@charset "UTF-8";

/**********************************************************
 * about
 **********************************************************/

/* ===== visual ===== */
.visual-top {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  position: relative;
  overflow: hidden;
  height: 850px;
  z-index: 1;
}
.video__conveyor-belt {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 110%;
  object-fit: cover;
  transform: translate(-50%, 0);
  z-index: 1;
}
.visual-logo {
  margin-bottom: 50px;
  width: 580px;
  z-index: 1;
}
@media (768px <= width < 1920px) {
  .visual-top {
    height: 44.271vw;
  }
  .visual-logo {
    margin-bottom: 2.604vw;
    width: 30.208vw;
  }
}
@media (width < 768px) {
  .visual-top {
    height: 88.8vw;
  }
  .video__conveyor-belt {
    left: 20%;
    transform: translate(-20%, 0);
    width: 220%;
  }
  .visual-logo {
    margin-bottom: 7.467vw;
    width: 57.867vw; /* 217px */
  }
}

/* ===== ingredient ===== */
.ingredient {
  padding: 19px 28px;
  background: var(--color-light);
  color: var(--color-main-dark);
  letter-spacing: .025em;
  border: 3px solid var(--color-main-dark);
  border-radius: 28px;
}
.ingredient__title {
  margin: 0 auto .5em;
  padding-bottom: .5em;
  line-height: 1;
  font-size: 26px;
  text-align: center;
  border-bottom: 3px solid var(--color-main-dark);
}
.ingredient__text {
  font-size: 17px;
}
.ingredient sup {
  font-size: 16px;
}
@media (768px <= width < 1920px) {
  .ingredient {
    padding: 0.99vw 1.458vw;
    font-size: 1.563vw;
    border: 0.156vw solid var(--color-main-dark);
    border-radius: 1.458vw;
  }
  .ingredient__title {
    font-size: 1.354vw;
    border-bottom: 0.156vw solid var(--color-main-dark);
  }
  .ingredient__text {
    font-size: 0.885vw;
  }
  .ingredient sup {
    font-size: 0.833vw;
  }
}
@media (width < 768px) {
  .ingredient {
    padding: 2.667vw 4vw;
    border: 0.4vw solid var(--color-main-dark);
    border-radius: 4vw;
  }
  .ingredient__title {
    letter-spacing: 0;
    font-size: 3.733vw; /* 14px */
    border-bottom: 0.4vw solid var(--color-main-dark);
  }
  .ingredient__text {
    font-size: 2.4vw; /* 9px */
  }
  .ingredient sup {
    font-size: 2.4vw; /* 9px */
  }
}

/* .about */
.about {
  position: relative;
  padding: 370px 0 0;
}
@media (768px <= width < 1920px) {
  .about {
    padding: 19.271vw 0 0;
  }
}
@media (width < 768px) {
  .about {
    padding: 17.333vw 0 0;
  }
}

/* ===== label ===== */
.about .label {
  position: absolute;
  top: 190px;
  left: 0;
  padding: 85px 32px;
}
@media (768px <= width < 1920px) {
  .about .label {
    top: 9.896vw;
    padding: 4.427vw 1.667vw;
  }
}
@media (width < 768px) {
  .about .label {
    top: 9.333vw;
    padding: 8.3997vw 3.1203vw;
  }
}

/* ===== care ===== */
.care {
  position: relative;
  margin: 0 auto 380px;
  width: fit-content;
}
.care .l-text .title {
  line-height: 1.5;
  font-size: 66px;
  font-weight: 700;
}
.care .img-care {
  position: absolute;
  top: 0;
  right: -740px;
  width: 1600px;
  z-index: -1;
}
.care .caption {
  margin: 90px 0 0 0;
}
@media (768px <= width < 1920px) {
  .care {
    margin: 0 auto 19.792vw;
  }
  .care .l-text .title {
    font-size: 3.438vw;
  }
  .care .img-care {
    right: -38.542vw;
    width: 83.333vw;
  }
  .care .caption {
    margin: 4.688vw 0 0 0;
  }
}
@media (width < 768px) {
  .care {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6.667vw;
    margin-bottom: 20.8vw;
  }
  .care .l-text {
    order: 2;
  }
  .care .l-text .title {
    font-size: 5.333vw; /* 20px */
  }
  .care .img-care {
    position: relative;
    right: 0;
    width: 160%;
    overflow: hidden;
  }
  .care .caption {
    margin: 5.333vw 0 0;
  }
}

/* ===== step ===== */
.step {
  margin-bottom: 400px;
}

/* .step-top */
.step-top {
  display: flex;
  justify-content: center;
  gap: 80px;
  margin-bottom: 240px;
}
.step-top .l-text {
  order: 2;
}
.step-top .l-visual {
  order: 1;
}
.step-top .visual {
  width: 604px;
  height: 668px;
}
@media (768px <= width < 1920px) {
  .step {
    margin-bottom: 20.833vw;
  }
  .step-top {
    gap: 4.167vw;
    margin-bottom: 12.5vw;
  }
  .step-top .visual {
    width: 31.458vw;
    height: 34.792vw;
  }
}
@media (width < 768px) {
  .step {
    margin-bottom: 37.333vw;
  }
  .step-top {
    flex-direction: column;
    align-items: center;
    gap: 5.333vw;
    margin-bottom: 12vw;
  }
  .step-top .visual {
    width: 66.667vw;
    height: 73.68vw;
  }
}

/* .ingredient */
.step .l-ingredient {
  display: flex;
  gap: 19px;
}
.step .ingredient {
  width: 288px;
}
@media (768px <= width < 1920px) {
  .step .l-ingredient {
    gap: 0.99vw;
  }
  .step .ingredient {
    width: 15vw;
  }
}
@media (width < 768px) {
  .step .l-ingredient {
    gap: 2.667vw;
  }
  .step .ingredient {
    width: 40.4vw;
  }
}

/* === スクロールテリングセクション === */
.l-step {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 auto;
  width: min(1500px, 78.125vw);
  height: 45.833vw; /* 880px */
}
.l-step + .l-step {
  margin-top: 250px;
}
@media (768px <= width < 1920px) {
  .l-step + .l-step {
    margin-top: 13.021vw;
  }
}
@media (width < 768px) {
  .l-step {
    display: block;
    margin: 0 auto 8vw;
    width: 100%;
    height: auto;
  }
  .l-step + .l-step {
    margin-top: 16vw;
  }
}

/* テキストエリア */
.textpin .title {
  margin-bottom: 80px;
  font-size: 60px;
  letter-spacing: .05em;
  line-height: 1.7;
}
.textpin .title sup {
  font-size: 20px;
}
@media (768px <= width < 1920px) {
  .textpin .title {
    margin-bottom: 4.167vw;
    font-size: 3.125vw;
  }
  .textpin .title sup {
    font-size: 1.042vw;
  }
}
@media (width < 768px) {
  .textpin .step-item {
    position: static;
    transform: none;
    opacity: 1;
    margin: 0 auto 13.333vw;
    width: 84vw;
  }
  .textpin .title {
    margin-bottom: 6.667vw;
    font-size: 5.333vw; /* 20px */
  }
  .textpin .title sup {
    font-size: 1.733vw; /* 6.5px */
  }
}

/* 画像エリア */
.graphic {
  position: absolute;
  top: 50%;
  right: 0;
  width: 971px;
  transform: translateY(-50%);
  z-index: -1;
}
@media (768px <= width < 1920px) {
  .graphic {
    width: 50.573vw;
  }
}
@media (width < 768px) {
  .graphic {
    position: static;
    margin: 0 auto;
    width: 74.667vw;
    transform: translateY(0);
  }
  /* 画像をテキストの下に出す用 */
  .step-image {
    margin: 14.667vw 0 0;
  }
  .step-image img {
    display: block;
    width: 100%;
    height: auto;
  }
}

/* .step-item */
.step-item { 
  align-self: center;
  font-size: 75px;
  letter-spacing: .1em;
 }
.step-item .step-number {
  display: block;
  margin-bottom: 40px;
  font-family: "futura-100", sans-serif;
  font-weight: 500;
  line-height: 1;
}
.step-item .title {
  margin-bottom: 57px;
  font-size: 50px;
  font-weight: 700;
  line-height: 1.4;
}
@media (768px <= width < 1920px) {
  .step-item { 
    font-size: 3.906vw;
  }
  .step-item .step-number {
    margin-bottom: 2.083vw;
  }
  .step-item .title {
    margin-bottom: 2.969vw;
    font-size: 2.604vw;
  }
}
@media (width < 768px) {
  .step-item { 
    font-size: 11.733vw; /* 44px */
  }
  .step-item .step-number {
    margin-bottom: 6.667vw;
  }
  .step-item .title {
    margin-bottom: 6.933vw;
    line-height: 1.7;
    font-size: 5.333vw; /* 20px */
  }
}


/* ===== keep ===== */
.keep {
  display: flex;
  justify-content: center;
  gap: 60px;
  margin-bottom: 400px;
}
.keep .l-text {
  order: 2;
}
.keep .l-text .description {
  margin: 0 0 60px;
}
.keep .l-text .title sup {
  vertical-align: baseline;
}
.keep .img-keep {
  order: 1;
  width: 820px;
}
.keep .ingredient {
  max-width: 482px;
}
.keep .ingredient + .ingredient {
  margin: 20px 0 0 120px;
}

@media (768px <= width < 1920px) {
  .keep {
    margin-bottom: 20.833vw;
  }
  .keep .l-text .description {
    margin: 0 0 3.125vw;
  }
  .keep .img-keep {
    width: 42.708vw;
  }
  .keep .ingredient {
    max-width: 25.104vw;
  }
  .keep .ingredient + .ingredient {
    margin: 1.042vw 0 0 6.25vw;
  }
}
@media (width < 768px) {
  .keep {
    margin-bottom: 25.067vw;
  }
  .keep .l-text .title {
    margin: 0 0 6.667vw;
    width: fit-content;
  }
  .keep .l-text .description {
    margin: 0 auto 8vw;
    width: fit-content;
  }
  .keep .img-keep {
    width: 75.733vw;
  }
  .keep .ingredient {
    max-width: 64.267vw;
  }
  .keep .ingredient + .ingredient {
    margin: 2.667vw 0 0 19.733vw;
  }
}


/* ===== fragrance ===== */
.fragrance {
  display: flex;
  justify-content: center;
}
.fragrance .img-fragrance {
  width: 793px;
}
@media (768px <= width < 1920px) {
  .fragrance .img-fragrance {
    width: 41.302vw;
  }
}
@media (width < 768px) {
  .fragrance .img-fragrance {
    width: 61.333vw;
  }
  .fragrance .l-text {
    order: 2;
  }
  .fragrance .img-fragrance {
    order: 1;
  }
}


/* =====  ===== */
.l-text .title {
  margin-bottom: 76px;
  font-family: 
    "Zen Kaku Gothic New",
    "Hiragino Sans", /* mac/iOS */
    "Yu Gothic", /* Windows */
    "Noto Sans JP", /* Android/Linux系 */
    system-ui,
    sans-serif;
  font-size: 57px;
  font-weight: 700;
  letter-spacing: .05em;
  line-height: 1.7;
}
.l-text .description {
  font-size: 24px;
  line-height: 2;
}
.l-text .title sup {
  margin-left: -.5em;
  margin-right: .5em;
  font-size: 19px;
}
.l-text sup {
  font-size: 14px;
}

@media (768px <= width < 1920px) {
  .l-text .title {
    margin-bottom: 3.958vw;
    font-size: 2.969vw;
  }
  .l-text .description {
    font-size: 1.25vw;
  }
  .l-text .title sup {
    font-size: 0.99vw;
  }
  .l-text sup {
    font-size: 0.729vw;
  }
}

@media (width < 768px) {
  .l-text .title {
    margin-bottom: 5.333vw;
    font-size: 5.333vw; /* 20px  */
  }
  .l-text .description {
    font-size: 3.333vw; /* 12.5px */
  }
  .l-text .title sup {
    font-size: 1.733vw; /* 6.5px */
  }
  .l-text sup {
    font-size: 2vw; /* 7.5px */
  }
  .keep,
  .fragrance {
    flex-direction: column;
    align-items: center;
    gap: 8vw;
  }
}


/* ===== note ===== */
.about .note {
  margin: 300px auto 194px;
  text-align: justify;
}
@media (768px <= width < 1920px) {
  .about .note {
    margin: 15.625vw auto 10.104vw;
  }
}
@media (width < 768px) {
  .about .note {
    margin: 19.467vw auto 17.867vw;
  }
}