:root {
  --color-black: #222222;
  --color-white: #ffffff;
  --color-gray: #595757;
  --color-lightgray: #E6F0F0;
  --color-primary: #004F99;
  --color-secondary: #008A3B;
  --color-blue: #178FD9;
  --color-lightblue: #EBF2F4;
  --color-lightblue2: #D9E8EC;
  --color-navy: #2F2A7F;
  --color-lightnavy: #EBEBF4;
  --color-green: #258346;
  --color-yellowgreen: #579900;
  --color-lightyellowgreen: #EAF0E2;
  --color-orange: #E97406;
  --color-purple: #774B91;
  --color-enji: #842640;
  --color-lightenji: #F2ECEC;
  --color-pink: #AC4683;
  --color-lightpink: #F2ECF0;
  --color-gold: #A99500;
  --color-border: #DFEAED;
  --color-bg: #F4F4F4;
}

/*----------------------------------------
	features CSS
-----------------------------------------*/
.wrapper {
  overflow: hidden;
}

.breadcrumb {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  padding: 20rem 20rem;
  color: var(--color-white);
}
@media screen and (max-width: 959px ) {
  .breadcrumb {
    padding: 15rem 20rem 45rem;
  }
}
.breadcrumb a {
  color: var(--color-white);
}
.breadcrumb li:not(:last-child)::after {
  color: var(--color-white);
}

.page-ttl {
  background: transparent;
  color: var(--color-white);
  overflow: visible;
}
@media screen and (max-width: 959px ) {
  .page-ttl {
    height: 180rem;
    padding: 0 20rem;
  }
}
.page-ttl::before, .page-ttl::after {
  display: none;
}
.page-ttl .en {
  color: var(--color-white);
}
.page-ttl .ttl-side {
  position: absolute;
  left: 0;
  top: 20rem;
  z-index: 100;
  mix-blend-mode: normal;
  opacity: 0.6;
  width: 84rem;
}
@media screen and (max-width: 959px ) {
  .page-ttl .ttl-side {
    display: none;
  }
}

.bg-wrap {
  background: url("../img/features/bg_body.webp") center bottom/cover no-repeat;
}

.features__intro {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 40rem;
  padding: 160rem 140rem 100rem;
  text-align: center;
}
@media screen and (max-width: 959px ) {
  .features__intro {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 24rem;
    padding: 30rem 20rem 80rem;
  }
}

.features__intro h2 {
  padding-bottom: 40rem;
  font-size: 60rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.6;
  color: #595757;
}
@media screen and (max-width: 959px ) {
  .features__intro h2 {
    padding-bottom: 16rem;
    font-size: 32rem;
    letter-spacing: 0.08em;
    line-height: 1.55;
  }
}

.features__lead {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 10rem;
  width: 100%;
  padding: 0 10rem;
  font-size: 18rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 2.8;
}
@media screen and (max-width: 959px ) {
  .features__lead {
    font-size: 14rem;
    letter-spacing: 0.04em;
    line-height: 2;
    text-align: justify;
  }
}
.features__lead li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 80rem 140rem;
  background: no-repeat center/cover;
}

@media screen and (max-width: 959px ) {
  .features__lead br {
    display: none;
  }
}
.features__grid {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 10rem;
  padding: 0 10rem;
  background: var(--color-white);
  color: var(--color-white);
}
@media screen and (max-width: 959px ) {
  .features__grid {
    gap: 5rem;
    padding: 0 5rem;
  }
}

.features-card {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  min-height: 600rem;
  padding: 140rem 200rem;
}
@media screen and (max-width: 959px ) {
  .features-card {
    min-height: 0;
    padding: 40rem 30rem;
  }
}
.features-card > div {
  display: -ms-grid;
  display: grid;
  gap: 30rem;
}
@media screen and (max-width: 959px ) {
  .features-card > div {
    gap: 15rem;
  }
}
.features-card .pic {
  width: 760rem;
}
@media screen and (max-width: 959px ) {
  .features-card .pic {
    width: 100%;
  }
}

.features-card--01 {
  --accent: var(--color-primary);
  background: url(../img/features/bg_feature01.webp) no-repeat center/cover;
}

.features-card--02 {
  --accent: var(--color-pink);
  background: url(../img/features/bg_feature05.webp) no-repeat center/cover;
}

.features-card--03 {
  --accent: var(--color-yellowgreen);
  background: url(../img/features/bg_feature08.webp) no-repeat center/cover;
}

.features-card--04 {
  --accent: var(--color-blue);
  background: url(../img/features/bg_feature03.webp) no-repeat center/cover;
}

.features-card--05 {
  --accent: var(--color-enji);
  background: url(../img/features/bg_feature02.webp) no-repeat center/cover;
}
@media screen and (max-width: 959px ) {
  .features-card--05 {
    background-position: left 60% center;
  }
}

.features-card--06 {
  --accent: var(--color-purple);
  background: url(../img/features/bg_feature04.webp) no-repeat center/cover;
}
@media screen and (max-width: 959px ) {
  .features-card--06 {
    background-position: left 70% center;
  }
}

.features-card--07 {
  --accent: var(--color-green);
  background: url(../img/features/bg_feature07.webp) no-repeat center/cover;
}

.features-card--08 {
  --accent: var(--color-navy);
  background: url(../img/features/bg_feature08.webp) no-repeat center/cover;
}

.features-card__label {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 10rem;
  width: 140rem;
  min-height: 34rem;
  margin-bottom: -10rem;
  padding: 8rem 20rem 8rem 18rem;
  border-radius: 100vmax;
  background: var(--color-white);
  color: var(--accent);
  font-family: "Heebo", sans-serif;
  font-size: 16rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
}
@media screen and (max-width: 959px ) {
  .features-card__label {
    width: 110rem;
    min-height: 28rem;
    padding: 8rem 15rem 6rem;
    font-size: 12rem;
    margin-bottom: -5rem;
  }
}

.features-card__label span {
  font-size: 8rem;
  line-height: 1.6;
}

.features-card h3 {
  font-size: 60rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.6;
}
@media screen and (max-width: 959px ) {
  .features-card h3 {
    font-size: 28rem;
  }
}
.features-card h3 strong {
  display: inline-block;
  -webkit-transform: translateY(0.05em);
          transform: translateY(0.05em);
  font-size: 70rem;
  line-height: 1;
  font-weight: 600;
}
@media screen and (max-width: 959px ) {
  .features-card h3 strong {
    font-size: 38rem;
  }
}

.features-card__text {
  width: 100%;
  font-size: 22rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 2.4;
}
@media screen and (max-width: 959px ) {
  .features-card__text {
    font-size: 14rem;
    text-align: justify;
  }
}
@media screen and (max-width: 959px ) {
  .features-card__text br {
    display: none;
  }
}

.features-card__text small {
  font-size: 14rem;
}
@media screen and (max-width: 959px ) {
  .features-card__text small {
    font-size: 11rem;
  }
}

.features__closing {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 70rem 300rem 300rem;
  background: url(../img/features/bg_closing.webp) no-repeat center/cover;
}
@media screen and (max-width: 959px ) {
  .features__closing {
    padding: 50rem 20rem 180rem;
  }
}

.features__closing img {
  width: 304rem;
  height: 150rem;
}
@media screen and (max-width: 959px ) {
  .features__closing img {
    width: 162rem;
    height: 80rem;
  }
}
/*# sourceMappingURL=features.css.map */