a {
  text-decoration: none;
}
.u-aboutBg__01,
.u-aboutBg__02,
.u-aboutBg__03 {
  position: relative;
  width: 100%;
}
.u-aboutBg__01 {
  z-index: 10;
  background: #f5f7fa;
}
.u-aboutBg__02 {
  z-index: 10;
  background: #edf1f8;
}
.u-aboutBg__03 {
  z-index: 1;
  background: #fff;
}

/* =============================================================
  u-secHd
============================================================= */
.u-secHd__label {
  color: #758088;
  font-family: var(--font-family-en);
  font-size: 16rem;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: .04em;
}

.u-secHd__ttl {
  margin-bottom: 4rem;
  font-size: 28rem;
  font-weight: 700;
  line-height: 1.6;
}

.u-secHd__sub {
  margin-top: 24rem;
  font-size: 16rem;
  line-height: 1.8;
}

.u-secHd.--center {
  text-align: center;
}

@media (max-width: 768px) {
  .u-secHd__ttl {
    font-size: 24rem;
  }

  .u-secHd.--center {
    text-align: left;
  }
}
/* =============================================================
  u-aboutKv
============================================================= */
.u-aboutKv {
  margin-right: calc(50% - 50vw);
  margin-left: calc(50% - 50vw);
  border-bottom: 1rem solid #d8dfec;
}
.u-aboutKv__inr {
  position: relative;
  padding: 80rem 0 80rem;
}
.u-aboutKv__inr::after {
  content: "";
  position: absolute;
  top: -1218rem;
  left: -1406rem;
  z-index: -1;
  display: block;
  width: 2083rem;
  height: 2358rem;
  background-image: url("/drivers/blogarekore/about/images/about_bg_01.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.u-aboutKv__bread {
  display: flex;
  align-items: center;
  font-size: 20rem;
  font-weight: 500;
}

.u-aboutKv__bread::before {
  content: "";
  width: 10rem;
  height: 10rem;
  margin-right: 16rem;
  border-radius: 2rem;
  background-color: #005bab;
}

.u-aboutKv__ttl {
  margin-top: 24rem;
  font-family: var(--font-family-en);
  font-size: 36rem;
  font-weight: 700;
  line-height: 1.3;
}

@media (max-width: 768px) {
  .u-aboutKv__bread {
    font-size: 16rem;
  }
  .u-aboutKv__bread::before {
    width: 8rem;
    height: 8rem;
    border-radius: 2rem;
  }
  .u-aboutKv__ttl {
    font-size: 32rem;
  }
}

/* =============================================================
  u-overview
============================================================= */
.u-overview__inr {
  padding: 80rem 0;
}

.u-overview__inr {
  display: flex;
  align-items: flex-start;
  gap: 60rem;
}

.u-overview__lead {
  flex: 0 0 auto;
}

.u-overview__label {
  color: #758088;
  font-family: var(--font-family-en);
  font-size: 16rem;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: .04em;
}

.u-overview__ttl {
  margin-top: 2rem;
  font-size: 32rem;
  font-weight: 700;
  line-height: 1.6;
}

.u-overview__body {
  flex: 1;
  padding-top: 29rem;
}

.u-overview__txt {
  font-size: 16rem;
  line-height: 2.5;
}

@media (max-width: 768px) {
  .u-overview__inr {
    flex-direction: column;
    gap: 24rem;
  }
  .u-overview__ttl {
    font-size: 28rem;
  }

  .u-overview__body {
    padding-top: 0;
  }

  .u-overview__txt {
    font-size: 16rem;
  }
}

/* =============================================================
  u-aboutDetail
============================================================= */
.u-aboutDetail {
  background-color: #eef2f7;
}

.u-aboutDetail__inr {
  display: flex;
}

.u-aboutDetail__imgCol {
  position: relative;
  flex: 0 0 480rem;
}

.u-aboutDetail__img {
  position: absolute;
  top: 57rem;
  left: -360rem;
  width: 776rem;
  aspect-ratio: 1/1;
}

.u-aboutDetail__bodyCol {
  display: flex;
  flex: 1;
  align-items: center;
}

.u-aboutDetail__body {
  padding: 217rem 0 254rem;
}

.u-aboutDetail__label {
  margin-bottom: 16rem;
  color: #888;
  font-size: 13rem;
  letter-spacing: .05em;
}

.u-aboutDetail__ttl {
  margin-bottom: 24rem;
  color: #1a1a1a;
  font-size: 22rem;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .02em;
}

.u-aboutDetail__txt {
  color: #333;
  font-size: 14rem;
  line-height: 2;
}

@media (max-width: 768px) {
  .u-aboutDetail__inr {
    flex-direction: column;
    gap: 64rem;
    padding: 80rem 0;
  }

  .u-aboutDetail__imgCol {
    flex: none;
    width: 100%;
  }

  .u-aboutDetail__img {
    position: static;
    width: 355rem;
    aspect-ratio: 1/1;
    margin-left: -20rem;
  }
  .u-aboutDetail__body {
    padding: 0;
  }
}

/* =============================================================
   u-whatFind
============================================================= */
.u-whatFind__inr {
  padding: 140rem 0 120rem;
}
.u-whatFind__inr::after {
  content: "";
  position: absolute;
  top: -1418rem;
  right: -960rem;
  z-index: -1;
  display: block;
  width: 2123rem;
  height: 1908rem;
  background-image: url("/drivers/blogarekore/about/images/about_bg_02.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.u-whatFind__list {
  display: flex;
  gap: 24rem;
  margin-top: 40rem;
}

.u-whatFind__item {
  flex: 1;
}

.u-whatFind__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32rem 32rem 40rem;
  border-radius: 4rem;
  background: #edf1f8;
}

.u-whatFind__cardIcon {
  width: 56rem;
  height: 56rem;
}

.u-whatFind__cardIcon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.u-whatFind__cardTtl {
  display: flex;
  align-items: center;
  gap: 8rem;
  margin-top: 24rem;
  font-size: 20rem;
  font-weight: 500;
}
.u-whatFind__cardTtl::before {
  content: "";
  display: inline-block;
  width: 12rem;
  height: 12rem;
  border-radius: 2rem;
}

.u-whatFind__cardTtl.--color-green::before {
  background-color: #009905;
}

.u-whatFind__cardTtl.--color-orange::before {
  background-color: #ff7b37;
}

.u-whatFind__cardTtl.--color-blue::before {
  background-color: #60a3e5;
}

.u-whatFind__cardTxt {
  margin-top: 16rem;
  font-size: 16rem;
  line-height: 1.8;
}

@media (max-width: 768px) {
  .u-whatFind__inr {
    padding: 80rem 0 ;
  }
  .u-whatFind__cardIcon {
    width: 64rem;
    height: 64rem;
  }

  .u-whatFind__list {
    flex-direction: column;
    gap: 16rem;
  }

  .u-whatFind__card {
    padding: 24rem 24rem 32rem ;
  }

  .u-whatFind__cardTtl {
    margin-top: 16rem;
  }
  .u-whatFind__card {
    padding: 28rem 20rem;
  }
}

/* =============================================================
   u-howToEnjoy
============================================================= */

.u-howToEnjoy {
  background-color: #eef2f7;
}


.u-howToEnjoy__inr {
  display: flex;
}
.u-howToEnjoy__bodyCol {
  flex: 1;
  padding: 200rem 0 210rem;
}
.u-howToEnjoy__list {
  display: flex;
  flex-direction: column;
  gap: 4rem;
  margin-top: 24rem;
  list-style: none;
}

.u-howToEnjoy__item {
  display: flex;
  align-items: center;
  gap: 12rem;
  font-size: 16rem;
  font-weight: 500;
  line-height: 1.8;
}
.u-howToEnjoy__item::before {
  content: "";
  display: inline-block;
  flex-shrink: 0;
  width: 20rem;
  height: 20rem;
  background-image: url("/drivers/blogarekore/about/images/icon_about_check.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.u-howToEnjoy__foot {
  margin-top: 20rem;
  font-size: 16rem;
  line-height: 1.8;
}

.u-howToEnjoy__imgCol {
  position: relative;
  flex: 0 0 480rem;
  height: 100%;
}

.u-howToEnjoy__img {
  position: absolute;
  top: 40rem;
  right: -360rem;
  width: 776rem;
  aspect-ratio: 1/1;
}

.u-howToEnjoy__body {
  padding: 217rem 0 254rem;
}

@media (max-width: 768px) {
  .u-howToEnjoy__inr {
    flex-direction: column;
    gap: 64rem;
    padding: 80rem 0;
  }
  .u-howToEnjoy__bodyCol {
    flex: 1;
    padding: 0;
  }

  .u-howToEnjoy__imgCol {
    flex: none;
    order: -1;
    width: 100%;
  }

  .u-howToEnjoy__img {
    position: static;
    width: 355rem;
    margin-right: -20rem;
  }
}

/* =============================================================
   u-relatedMedia
============================================================= */
.u-relatedMedia__inr {
  position: relative;
  padding: 140rem 0 120rem;
}
.u-relatedMedia__inr::after {
  content: "";
  position: absolute;
  top: -250rem;
  left: -1235rem;
  z-index: -1;
  display: block;
  width: 1722rem;
  height: 2083rem;
  background-image: url("/drivers/blogarekore/about/images/about_bg_03.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.u-relatedMedia__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12rem;
  margin-top: 40rem;
  list-style: none;
}

.u-relatedMedia__link {
  display: flex;
  align-items: center;
  gap: 10rem;
  padding: 16rem 32rem;
  border-radius: 4rem;
  background-color: #333;
  color: #fff;
  font-size: 16rem;
  font-weight: 500;
  line-height: 1.4;
  transition: opacity .2s ease;
}

@media (hover: hover) {
  .u-relatedMedia__link:hover {
    opacity: .75;
  }
}

/* アイコン共通（::before） */
.u-relatedMedia__link::before {
  content: "";
  display: inline-block;
  flex-shrink: 0;
  width: 56rem;
  height: 56rem;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.u-relatedMedia__link.--drivers {
  justify-content: space-between;
}

.u-relatedMedia__link.--drivers::before {
  content: "";
  display: none;
}
.u-relatedMedia__link.--drivers::after {
  content: "";
  width: 16rem;
  height: 14rem;
  padding: 21rem 0;
  background-image: url("/drivers/blogarekore/about/images/icon_about_blank.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* X */
.u-relatedMedia__link.--x::before {
  background-image: url(/drivers/blogarekore/about/images/icon_about_x.svg);
}

/* Facebook */
.u-relatedMedia__link.--facebook::before {
  background-image: url(/drivers/blogarekore/about/images/icon_about_fasebook.svg);
}

/* LINE */
.u-relatedMedia__link.--line::before {
  background-image: url(/drivers/blogarekore/about/images/icon_about_line.svg);
}

/* YouTube */
.u-relatedMedia__link.--youtube::before {
  background-image: url(/drivers/blogarekore/about/images/icon_about_youyube.svg);
}


@media (max-width: 768px) {
  .u-relatedMedia__inr {
    padding: 80rem 0;
  }

  .u-relatedMedia__hd {
    margin-bottom: 32rem;
    text-align: left;
  }

  .u-relatedMedia__ttl {
    font-size: 22rem;
  }

  .u-relatedMedia__list {
    grid-template-columns: repeat(2, 1fr);
    gap: 8rem;
  }
  .u-relatedMedia__link::before {
    width: 40rem;
    height: 40rem;
  }

  .u-relatedMedia__link.--drivers::after {
    content: "";
    width: 16rem;
    height: 14rem;
    padding: 21rem 0;
    background-image: url("/drivers/blogarekore/about/images/icon_about_blank.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }

  .u-relatedMedia__link {
    height: 72rem;
    padding: 16rem ;
    font-size: 14rem;
  }
}