@charset "UTF-8";

/* ---------------------------------------------------------------- */
/* #region Brand Concept Layout  */
/* ---------------------------------------------------------------- */
.brandConcept {
}
.brandConcept__head {
}
.brandConcept__fv {
  width: 100%;
  height: auto;
  @media (min-width: 769px) {
    padding-right: 170px;
  }
}
.brandConcept__fv img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: 100% 0%;
     object-position: 100% 0%;
  @media (min-width: 769px) {
    border-radius: 0px 10px 10px 0px;
  }
}
.brandConcept__health {
  padding-top: 56px;
  padding-bottom: 256px;
  @media (min-width: 769px) {
    padding-top: 88px;
    padding-bottom: 168px;
  }
}
.brandConcept__beginning {
  @media (min-width: 769px) {
    padding-top: 160px;
  }
}
.brandConcept__vmv {
  padding-top: 25vh;
  padding-bottom: 80px;
  @media (min-width: 769px) {
    padding-top: 25vh;
    padding-bottom: 128px;
  }
}
.chartVideo {
}

/* 状態 */
.brandConcept__health, .brandConcept__vmv{
  opacity: 1;
  transition: opacity 0.4s linear;
}
.chartVideo {
  opacity: 1;
  transition: opacity 0.2s linear;
}
html[data-state-bg="black"] .brandConcept__health,
html[data-state-bg="black"] .brandConcept__vmv {
  opacity:  0;
}
.brandConcept.is-beginning .chartVideo {
  opacity:  0;
}

/* #endregion Brand Concept Layout */


/* ---------------------------------------------------------------- */
/* #region Brand Concept Common Components */
/* ---------------------------------------------------------------- */

/* #endregion Brand Concept Common Components */


/* ---------------------------------------------------------------- */
/* #region Brand Concept Helth  */
/* ---------------------------------------------------------------- */
.health{
  @media (min-width: 769px) {
    display: flex;
    justify-content: space-between;
    gap: 64px;  
  }
}
.health__image{
  @media (min-width: 769px) {
    flex: 0 1 330px;
  }
}
.health__image > video, .health__image > img {
  width: 100%;
  height: auto;
}

.health__body{
  @media (min-width: 769px) {    
    flex: 0 1 378px;
  }
}
.health__eyebrow{
  font-family: var(--font-HankenGrotesk);
  font-size: 13px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0.13px;
  margin-bottom: 40px;
}
.health__heading{
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
  letter-spacing: 0.48px;
  margin-bottom: 40px;
}
.health__text{
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 240%;
  margin-bottom: 40px;
}
.health__text:last-child {
  margin-bottom: 0;
}

/* #endregion Brand Concept Helth */


/* ---------------------------------------------------------------- */
/* #region Brand Concept Beginning  */
/* ---------------------------------------------------------------- */
.beginning {
  padding-bottom: 25vh;
  @media (min-width: 769px) {
    padding-bottom: 25vh;
  }
}
.beginning__head {
}
.beginning__heading {
  color: var(--color-offWhite);
  font-family: var(--font-HankenGrotesk);
  font-size: 30px;
  font-style: normal;
  font-weight: 600;
  line-height: 110%;
  letter-spacing: 0.6px;
  margin-bottom: 65px;
  @media (min-width: 769px) {
    margin-bottom: 64px;
  }
}
.beginning__body {
  @media (min-width: 769px) {
    display: flex;
  }
}
.beginning__image {
  padding-right: 16px;
  margin-bottom: 65px;
  @media (min-width: 769px) {
    flex: 0 0 50%;
    height: 404px;
    padding-right: 110px;
    margin-bottom: 0px;
  }
}
.beginning__image img {
  width: 100%;
  height: auto;
  border-radius: 0px 10px 10px 0px;
  @media (min-width: 769px) {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    border-radius: 0px 10px 10px 0px;
  }
}
.beginning__message {
  padding-left: 16px;
  padding-right: 16px;
  @media (min-width: 769px) {
    flex: 0 0 50%;
    padding-left: 55px;
    padding-right: 0;
  }
}
.beginning__p {
  color: var(--color-offWhite); 
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 240%;
  margin-bottom: 40px;
}
.beginning__p:last-child {
  margin-bottom: 0;
}
/* 状態:背景 */
.beginning__heading {
  color: var(--custom-offBlack);
}
html[data-state-bg="black"] .beginning__heading{
 color: var(--color-offWhite); 
}

/* #endregion Concept Beginning */


/* ---------------------------------------------------------------- */
/* #region Concept VMV  */
/* ---------------------------------------------------------------- */

/* vmvリスト */
.vmvList {
}
.vmvList__item {
}

/* vmv */
.vmv {
}
.vmv__head {
  position: relative;
}
.vmv__bg {
  overflow: hidden;
  aspect-ratio: 390/390;
  @media (min-width: 769px) {
    aspect-ratio: 1440/550;
  }
}
.vmv__bg img {
  width: 100%;
  height: 100%;
}
.vmv__title {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 24px;
  @media (min-width: 769px) {
    justify-content: center;
    padding-bottom: 0;
  }
}
.vmv__titleInner {
  @media (min-width: 769px) {
    padding-left: 55px;
  }
}
.vmv__eyebrow {
  display: inline-block;
  color: var(--color-white);
  font-family: var(--font-HankenGrotesk);
  font-size: 13px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0.13px;

  width: 174px;
  border-bottom: 1px solid var(--color-white);
  padding-bottom: 24px;
  margin-bottom: 24px;
}
.vmv__headingEn {
  color: var(--color-white);
  font-family: var(--font-HankenGrotesk);
  font-size: 30px;
  font-style: normal;
  font-weight: 600;
  line-height: 110%;
  letter-spacing: 0.6px;
  @media (min-width: 769px) {
    font-size: 40px;
    line-height: 100%;
    letter-spacing: 0.8px;
  }
}
.vmv__headingJa {
  color: var(--color-white);
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
  letter-spacing: 0.48px;
  @media (min-width: 769px) {
    font-size: 34px;
    letter-spacing: 0.68px;
  }
}
.vmv__body {
  padding-top: 24px;
  padding-bottom: 80px;
  @media (min-width: 769px) {
    padding-top: 81px;
    padding-bottom: 81px;
  }
}
.vmv__inner {
  display: flex;
  flex-direction: column-reverse;
  gap: 24px;
  @media (min-width: 769px) {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 64px;
  }
}
.vmv__message {
  @media (min-width: 769px) {
    flex: 0 1 330px;
  }
}
.vmv__image {
  @media (min-width: 769px) {
    flex: 0 1 390px;
  }
}
.vmv__image > video, .vmv__image > img {
  width: 100%;
  height: auto;
}
.vmv__text {
  font-size: 15px;
  font-style: normal;
  font-weight: 500;
  line-height: 240%;
  margin-bottom: 24px;
}
.vmv__text:last-child {
  margin-bottom: 0px;
}
.vmv__link {
  margin-top: 24px;
  @media (min-width: 769px) {
    margin-top: 64px;
  }
}

/* #endregion Concept VMV */