@charset "UTF-8";

/*--------------------
 Common
--------------------*/
@media screen and (max-width: 767px) {
  html[data-browse-mode="S"] .main-content .pc-only {
    display: none;
  }
}

.main-content .sp-only {
  display: none;
}

@media screen and (max-width: 767px) {
  html[data-browse-mode="S"] .main-content .sp-only {
    display: block;
  }
}

/*
.main-content h1,
.main-content h2,
.main-content h3,
.main-content h4,
.main-content h5,
.main-content h6 {
  margin: 0;
  padding: 0;
}
*/

.main-content a {
  text-decoration: none;
}

.main-content img {
  vertical-align: bottom;
}

.main-content sup {
  font-size: 60%;
  vertical-align: super;
}

.main-content em {
  font-style: normal;
}

.main-content small {
  margin-left: 2px;
  font-size: 75%;
}

.main-content strong {
  font-weight: 600;
}

.main-content ul,
.main-content ol {
  list-style-type: none;
}

@media screen and (max-width: 767px) {
  html[data-browse-mode="S"] .main-content ul,
  html[data-browse-mode="S"] .main-content ol {
    list-style-type: none;
  }
}

/*--------------------
 main-content
--------------------*/
.main-content {
  /* margin: 0 auto 80px; */
  margin: 0 auto;
  font-size: 16px;
}

.main-content .inner {
  max-width: 1220px;
  margin: 0 auto;
  padding: 0 10px;
}

.main-content .section-title {
  position: relative;
  margin: 0 0 8px;
  padding: 0 0 6px;
  color: #222;
  font-size: 32px;
  font-weight: 600;
  text-align: center;
}
.main-content .section-title::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 50%;
  width: 120px;
  height: 2px;
  background-color: #34b558;
  transform: translate(-50%, 0);
}

.main-content .section-description {
  margin: 40px auto 0;
  font-size: 18px;
  line-height: 1.8;
  text-align: center;
}

@media screen and (max-width: 767px) {
  html[data-browse-mode="S"] .main-content {
    /* margin: 0 auto 60px; */
    margin: 0 auto;
    font-size: 14px;
  }

  html[data-browse-mode="S"] .main-content .inner {
    max-width: none;
    padding: 0 20px;
  }

  html[data-browse-mode="S"] .main-content .section-title {
    margin: 0 0 4px;
    font-size: 20px;
  }
  html[data-browse-mode="S"] .main-content .section-title::after {
    bottom: -4px;
    width: 60px;
  }

  html[data-browse-mode="S"] .main-content .section-description {
    margin: 24px auto 0;
    font-size: 16px;
  }
}

@media screen and (max-width: 413px) {
  html[data-browse-mode="S"] .main-content {
    /* margin: 0 auto 14.493vw; */
    margin: 0 auto;
    font-size: 3.382vw;
  }

  html[data-browse-mode="S"] .main-content .inner {
    padding: 0 4.831vw;
  }

  html[data-browse-mode="S"] .main-content .section-title {
    margin: 0 0 0.966vw;
    font-size: 4.831vw;
  }
  html[data-browse-mode="S"] .main-content .section-title::after {
    bottom: -0.966vw;
    width: 14.493vw;
  }

  html[data-browse-mode="S"] .main-content .section-description {
    margin: 5.797vw auto 0;
    font-size: 3.865vw;
  }
}

/*--------------------
 hero
--------------------*/
.main-content .hero {
  position: relative;
  background: linear-gradient(90deg, #efeacf 0%, #efeacf 50%, #a4c658 50%, #a4c658 100%);
}

.main-content .hero-image {
  position: absolute;
  z-index: 0;
  width: 100%;
  height: 480px;
  margin: 0 auto;
  background: url("/LP/about/img/hero_bg.png") no-repeat center bottom / 1366px auto;
}

.main-content .hero .inner {
  position: relative;
  z-index: 1;
  height: 480px;
  padding: 64px 10px 0;
}

.main-content .hero-title {
  margin: 0;
  padding: 0;
  font-size: 32px;
  font-weight: 600;
  letter-spacing: 0.1em;
}

.main-content .hero-description {
  margin: 32px 0 0;
  font-size: 18px;
  line-height: 2.0;
  letter-spacing: 0.18em;
}

@media screen and (max-width: 767px) {
  html[data-browse-mode="S"] .main-content .hero-image {
    height: 480px;
    background: url("/LP/about/img/hero_bg.png") no-repeat center bottom / cover;
  }

  html[data-browse-mode="S"] .main-content .hero .inner {
    height: 480px;
    padding: 32px 20px 0;
  }

  html[data-browse-mode="S"] .main-content .hero-title {
    font-size: 20px;
 }

  html[data-browse-mode="S"] .main-content .hero-description {
    margin: 24px 0 0;
    font-size: 16px;
    letter-spacing: 0.05em;
  }
}

@media screen and (max-width: 413px) {
  html[data-browse-mode="S"] .main-content .hero-image {
    height: 115.942vw;
  }

  html[data-browse-mode="S"] .main-content .hero .inner {
    height: 115.942vw;
    padding: 7.729vw 4.831vw 0;
  }

  html[data-browse-mode="S"] .main-content .hero-title {
    font-size: 4.831vw;
 }

  html[data-browse-mode="S"] .main-content .hero-description {
    margin: 5.797vw 0 0;
    font-size: 3.865vw;
    letter-spacing: 0.05em;
  }
}

/*--------------------
 services
--------------------*/
.main-content .services {
  padding: 64px 0 80px;
  background-color: #f5f5f5;
}

.main-content .services-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin: 56px 0 0;
}

.main-content .service-item {
  position: relative;
  padding: 32px 24px 80px;
  border-radius: 16px;
  background-color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  text-align: center;
}

.main-content .service-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: #eaf8ee;
}

.main-content .service-icon i {
  display: inline-block;
  width: 40px;
  height: 40px;
}
.main-content .service-icon i.icon-01 {
  background: url("/LP/about/img/service_icon_01.png") no-repeat left top / contain;
}
.main-content .service-icon i.icon-02 {
  background: url("/LP/about/img/service_icon_02.png") no-repeat left top / contain;
}
.main-content .service-icon i.icon-03 {
  background: url("/LP/about/img/service_icon_03.png") no-repeat left top / contain;
}
.main-content .service-icon i.icon-04 {
  background: url("/LP/about/img/service_icon_04.png") no-repeat left top / contain;
}
.main-content .service-icon i.icon-05 {
  background: url("/LP/about/img/service_icon_05.png") no-repeat left top / contain;
}
.main-content .service-icon i.icon-06 {
  background: url("/LP/about/img/service_icon_06.png") no-repeat left top / contain;
}

.main-content .service-title {
  margin: 24px 0 0;
  padding: 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
}

.main-content .service-description {
  margin: 16px 0 0;
  font-size: 15px;
  line-height: 1.6;
}
.main-content .service-description.line-1 {
  margin: calc(16px + (18px * 1.4)) 0 0;
}

.main-content .service-link-wrapper {
  position: absolute;
  bottom: 32px;
  width: calc(100% - (24px * 2));
}

.main-content .service-link {
  display: inline-block;
  position: relative;
  margin: 0 0 0 10px;
  padding: 0 20px 0 0;
  color: #4caf50;
  font-size: 16px;
  font-weight: 600;
}
.main-content .service-link::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  top: 50%;
  right: 0;
  border-radius: 1px;
  border-right: 2px solid #22ab37;
  border-bottom: 2px solid #22ab37;
  transform: rotate(-45deg) translate(0, -50%);
}

@media screen and (max-width: 767px) {
  html[data-browse-mode="S"] .main-content .services {
    padding: 40px 0 56px;
  }

  html[data-browse-mode="S"] .main-content .services-list {
    grid-template-columns: repeat(1, 1fr);
    gap: 32px 0;
    margin: 32px 0 0;
  }

  html[data-browse-mode="S"] .main-content .service-item {
    padding: 24px 16px 76px;
  }

  html[data-browse-mode="S"] .main-content .service-icon {
    width: 64px;
    height: 64px;
  }

  html[data-browse-mode="S"] .main-content .service-icon i {
    width: 36px;
    height: 36px;
  }

  html[data-browse-mode="S"] .main-content .service-title {
    margin: 16px 0 0;
    font-size: 16px;
  }

  html[data-browse-mode="S"] .main-content .service-description {
    margin: 16px 0 0;
    font-size: 15px;
  }
  html[data-browse-mode="S"] .main-content .service-description.line-1 {
    margin: 16px 0 0;
  }

  html[data-browse-mode="S"] .main-content .service-link-wrapper {
    bottom: 28px;
    width: calc(100% - (16px * 2));
  }

  html[data-browse-mode="S"] .main-content .service-link {
    margin: 0 0 0 10px;
    padding: 0 20px 0 0;
    font-size: 16px;
  }
  html[data-browse-mode="S"] .main-content .service-link::after {
    width: 10px;
    height: 10px;
  }
}

@media screen and (max-width: 413px) {
  html[data-browse-mode="S"] .main-content .services {
    padding: 9.662vw 0 13.527vw;
  }

  html[data-browse-mode="S"] .main-content .services-list {
    gap: 7.729vw 0;
    margin: 7.729vw 0 0;
  }

  html[data-browse-mode="S"] .main-content .service-item {
    padding: 5.797vw 3.865vw 18.357vw;
  }

  html[data-browse-mode="S"] .main-content .service-icon {
    width: 15.459vw;
    height: 15.459vw;
  }

  html[data-browse-mode="S"] .main-content .service-icon i {
    width: 8.696vw;
    height: 8.696vw;
  }

  html[data-browse-mode="S"] .main-content .service-title {
    margin: 3.865vw 0 0;
    font-size: 3.865vw;
  }

  html[data-browse-mode="S"] .main-content .service-description {
    margin: 3.865vw 0 0;
    font-size: 3.623vw;
  }
  html[data-browse-mode="S"] .main-content .service-description.line-1 {
    margin: 3.865vw 0 0;
  }

  html[data-browse-mode="S"] .main-content .service-link-wrapper {
    bottom: 6.763vw;
    width: calc(100% - (3.865vw * 2));
  }

  html[data-browse-mode="S"] .main-content .service-link {
    margin: 0 0 0 2.415vw;
    padding: 0 4.831vw 0 0;
    font-size: 3.865vw;
  }
  html[data-browse-mode="S"] .main-content .service-link::after {
    width: 2.415vw;
    height: 2.415vw;
  }
}

/*--------------------
 block-top-brand-thought
--------------------*/
/* Overwriting /css/usr/sb_user.css */
@media screen and (max-width: 767px) {
  html[data-browse-mode="S"] .block-top-brand-thought--title {
    margin-bottom: 0;
    padding: 40px 0 20px;
    font-size: 20px;
    line-height: 32px;
  }

  html[data-browse-mode="S"] .block-top-brand-thought--desc p {
    margin-bottom: 24px;
    font-size: 14px;
  }
}

@media screen and (max-width: 413px) {
  html[data-browse-mode="S"] .block-top-brand-thought--title {
    padding: 9.662vw 0 4.831vw;
    font-size: 4.831vw;
    line-height: 7.729vw;
  }

  html[data-browse-mode="S"] .block-top-brand-thought--desc p {
    margin-bottom: 5.797vw;
    font-size: 3.382vw;
  }
}

/*--------------------
 health
--------------------*/
.main-content .health {
  padding: 72px 0 0;
}

/* Overwriting /css/usr/user.css */
.block-top-healthy-navi {
  margin: 48px;
  padding: 0;
  background-color: transparent;
}

.block-top-more--btn {
  margin: 30px auto 0;
  padding-bottom: 0;
}

@media screen and (max-width: 767px) {
  html[data-browse-mode="S"] .main-content .health {
    padding: 40px 0 0;
  }

  /* Overwriting /css/usr/user.css */
  html[data-browse-mode="S"] .block-top-healthy-navi {
    margin: 32px 0 0;
    background-color: transparent;
  }

  html[data-browse-mode="S"] .block-top-healthy-navi-container {
    width: 100%;
  }

  html[data-browse-mode="S"] .block-top-more--btn {
    width: 200px;
    margin: 12px auto 0;
    padding-bottom: 0;
  }

  html[data-browse-mode="S"] .block-top-more--btn a {
    padding: 8px 0 10px;
    border-radius: 8px;
    border: 1px solid #22ab37;
    font-size: 14px;
  }
}

@media screen and (max-width: 413px) {
  html[data-browse-mode="S"] .main-content .health {
    padding: 9.662vw 0 0;
  }

  /* Overwriting /css/usr/user.css */
  html[data-browse-mode="S"] .block-top-healthy-navi {
    margin: 7.729vw 0 0;
  }

  html[data-browse-mode="S"] .block-top-more--btn {
    width: 48.309vw;
    margin: 2.899vw auto 0;
  }

  html[data-browse-mode="S"] .block-top-more--btn a {
    padding: 1.932vw 0 2.415vw;
    border-radius: 1.932vw;
    font-size: 3.382vw;
  }
}