@charset "UTF-8";
/*==========================================================================
Max Width
============================================================================*/
/*==========================================================================
Break Point
============================================================================*/
/*==========================================================================
Font
============================================================================*/
/*==========================================================================
Color
カラーコード変換 https://tech-unlimited.com/color.html
============================================================================*/
/*==========================================================================
box shadow
==========================================================================*/
/*==========================================================================
Line Height
==========================================================================*/
/*==========================================================================
Easing
Easingの動きが一覧でわかるチートシート https://easings.net/ja
Easingジェネレーター https://easings.co/
==========================================================================*/
.pagetitle,
.hero {
  position: relative;
  isolation: isolate;
}
.pagetitle::before,
.hero::before {
  content: "";
  display: block;
  position: absolute;
  left: -132px;
  top: calc(50% - 200px);
  z-index: 0;
  width: 400px;
  height: 400px;
  border-radius: 100%;
  filter: blur(60px);
}

.pagetitle__heading {
  justify-content: flex-start;
  align-items: center;
  gap: 0.5rem;
  position: relative;
  margin: 0;
  padding: 0 1.5rem;
  height: 4rem;
  font-weight: 600;
  font-size: 0.75rem;
  line-height: 1.667;
  letter-spacing: 0.08em;
  font-feature-settings: "pkna" on;
}
.pagetitle__icon {
  width: auto;
  height: 0.938rem;
}
.pagetitle .heading {
  margin: 0;
}

.hero {
  aspect-ratio: initial;
  color: rgb(255, 255, 255);
}
.hero::before {
  width: 1008px;
  height: 1008px;
  left: -653px;
  top: -612px;
}
.hero .thumb-area,
.hero .text-area {
  flex-shrink: 0;
  position: relative;
  height: 100%;
}
.hero .thumb-area {
  width: 47.4%;
}
.hero .thumb-area img {
  width: 100%;
  object-fit: contain;
  height: 100%;
  object-fit: cover;
  object-position: top;
  vertical-align: bottom;
}
.hero .text-area {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  width: 52.6%;
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.667;
}
.hero__icon {
  height: 53px;
}

.products--ai .pagetitle,
.products--ai .hero {
  background: #EAEDF0;
}
.products--ai .pagetitle::before,
.products--ai .hero::before {
  background: #052946;
}
.products--bx .pagetitle,
.products--bx .hero {
  background: #EAEDF0;
  color: rgb(0, 0, 0);
}
.products--bx .pagetitle::before,
.products--bx .hero::before {
  background: #A2B7C7;
}
.products--cs .pagetitle,
.products--cs .hero {
  background: #C9EDED;
  color: rgb(0, 0, 0);
}
.products--cs .pagetitle::before,
.products--cs .hero::before {
  background: #8E9DA9;
}
.products--ie .pagetitle,
.products--ie .hero {
  background: #EDF7F7;
  color: rgb(0, 0, 0);
}
.products--ie .pagetitle::before,
.products--ie .hero::before {
  background: #86CBCB;
}
.products--rd .pagetitle,
.products--rd .hero {
  background: #EDF7F7;
  color: rgb(0, 0, 0);
}
.products--rd .pagetitle::before,
.products--rd .hero::before {
  background: #51ACD4;
}
.products--mc .pagetitle,
.products--mc .hero {
  background: #E2F2F9;
}
.products--mc .pagetitle::before,
.products--mc .hero::before {
  background: #267496;
}
.products--gc .pagetitle,
.products--gc .hero {
  background: #EAEAFD;
  color: rgb(0, 0, 0);
}
.products--gc .pagetitle::before,
.products--gc .hero::before {
  background: #ADACF1;
}
.products--cc .pagetitle,
.products--cc .hero {
  background: #FAE0DB;
  color: rgb(0, 0, 0);
}
.products--cc .pagetitle::before,
.products--cc .hero::before {
  background: #F5B0A3;
}

.card__wrapper {
  position: relative;
  margin: 4rem auto 0;
  width: min(744px, 77.5vw);
  gap: 2rem;
}
.card__wrapper > * {
  flex-shrink: 0;
  width: calc((100% - 2rem) / 2);
}
@media print, screen and (max-width:915px) {
  .card__wrapper {
    padding: 0;
    width: auto;
  }
  .card__wrapper > * {
    width: auto;
  }
}

.bnr--product {
  margin-bottom: 1.5rem;
  width: 100%;
  height: auto;
  vertical-align: top;
}

@media print, screen and (max-width:915px) {
  .page--products .contents {
    margin: 0 4rem;
  }
}
@media print, screen and (max-width:767px) {
  .page--products .contents {
    margin: 0 1.5rem;
  }
  .pagetitle::before {
    left: -172px;
  }
  .pagetitle__heading {
    height: 3rem;
    font-size: 0.625rem;
    line-height: 2;
  }
  .hero {
    flex-direction: column;
    width: calc(100% + 3rem);
    margin: 5rem -1.5rem 3rem;
    height: 72.53vw;
    max-height: initial;
    border-radius: initial;
  }
  .hero::before {
    left: -494.75px;
    top: -549.75px;
    width: 787.5px;
    height: 787.5px;
    filter: blur(32px);
  }
  .hero .thumb-area,
  .hero .text-area {
    width: 100%;
    height: 50%;
  }
  .hero .text-area {
    gap: 0.75rem;
    font-weight: 700;
    font-size: 0.75rem;
  }
  .hero__icon {
    height: 31px;
  }
}

/*# sourceMappingURL=products.css.map */