@charset "UTF-8";
/* -----------------------------------------------
common
----------------------------------------------- */
.message__heading {
  text-align: center;
}
.message__heading-text--en {
  color: var(--accent-color-green);
  font-weight: bold;
  display: block;
}
.message__heading-text--ja {
  font-weight: bold;
  display: block;
}

@media (max-width: 767px) {
  .message__heading {
    margin-bottom: 27px;
  }
  .message__heading-text--en {
    font-size: 14px;
  }
  .message__heading-text--ja {
    font-size: 28px;
  }
}

@media (min-width: 768px) {
  .message__heading {
    margin-bottom: 30px;
  }
  .message__heading-text--en {
    font-size: 18px;
  }
  .message__heading-text--ja {
    font-size: 32px;
  }
}

/* -----------------------------------------------
philosophy
----------------------------------------------- */
.philosophy {
  position: relative;
  z-index: 1;
}
.philosophy::after {
  content: '';
  width: 100%;
  position: absolute;
  left: 50%;
  translate: -50% 0;
  z-index: -1;
}

@media (max-width: 767px) {
  .philosophy {
    padding: 34px 0 164px;
  }
  .philosophy::after {
    aspect-ratio: 390/128;
    background: url(../images/message/philosophy_bg_sp.png) center bottom / contain no-repeat;
    bottom: 31px;
  }
  .philosophy :is(.message__heading, .section__lead) {
    text-align: center;
  }
}

@media (min-width: 768px) {
  .philosophy {
    padding: 72px 0 92px;
    text-align: center;
  }
  .philosophy::after {
    max-width: 1080px;
    aspect-ratio: 1080/202;
    background: url(../images/message/philosophy_bg_pc.png) center bottom / contain no-repeat;
    bottom: 0;
  }
}

/* -----------------------------------------------
message
----------------------------------------------- */
.message {
  background-color: var(--bg-color-light-brown);
}
.message__header .message__heading {
  text-align: left;
}
.message__name {
  font-weight: bold;
}

@media (max-width: 767px) {
  .message {
    padding: 30px 0 60px;
  }
  .message__header {
    margin-bottom: 28px;
  }
  .message__heading-image {
    margin-bottom: 24px;
  }
  .message__heading-image img {
    border-radius: 20px;
  }
  .message .message__heading {
    margin-bottom: 18px;
  }
  .message__name {
    line-height: 1.8;
  }
}

@media (min-width: 768px) {
  .message {
    padding: 80px 0 96px;
  }
  .message .inner__wrap {
    max-width: calc(800px + 40px);
  }
  .message__header {
    display: flex;
    align-items: flex-end;
    gap: 0 7.5%;
    margin-bottom: 36px;
  }
  .message__heading-image {
    width: 72.5%;
  }
  .message__heading-image img {
    border-radius: 30px;
  }
  .message__heading-texts {
    flex: 1;
    padding-bottom: 30px;
  }
  .message__name {
    line-height: 1.8;
  }
}

/* -----------------------------------------------
story
----------------------------------------------- */
.story {
  background-color: var(--bg-color-cream);
  position: relative;
}
.story::before {
  content: '';
  width: 100%;
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% 0;
}

@media (max-width: 767px) {
  .story {
    padding: 101px 0 66px;
  }
  .story::before {
    aspect-ratio: 390/528;
    background: url(../images/message/story_bg_sp.png) center top / contain no-repeat;
  }
  .story .section__lead {
    text-align: center;
  }
  .story__content + .story__content {
    margin-top: 46px;
  }
  .story__image {
    width: 82.62%;
    margin: 0 auto 34px;
  }
  .story__content .section__text {
    margin-bottom: 34px;
  }
}

@media (min-width: 768px) {
  .story {
    padding: 101px 0 86px;
  }
  .story::before {
    aspect-ratio: 1080/528;
    background: url(../images/message/story_bg_pc.png) center top / contain no-repeat;
  }
  .story .inner__wrap {
    max-width: calc(798px + 40px);
  }
  .story__content {
    display: flex;
    gap: 0 3.76%;
  }
  .story__content + .story__content {
    margin-top: 50px;
  }
  .story__image {
    width: 36.34%;
  }
  .story__text {
    flex: 1;
  }
}

/* -----------------------------------------------
vision
----------------------------------------------- */
@media (max-width: 767px) {
  .vision {
    padding: 64px 0 62px;
  }
  .vision .message__heading {
    text-align: center;
  }
}

@media (min-width: 768px) {
  .vision {
    padding: 71px 0 78px;
  text-align: center;
  }
}