/* /lineup/facecare/lotion/ */
/* FV */
.lotion-fv {
  position: relative;
  overflow: hidden;
  padding: 160px 0 90px;
  background:
    radial-gradient(
      circle at 82% 18%,
      rgba(173, 214, 255, 0.45) 0%,
      rgba(173, 214, 255, 0) 34%
    ),
    radial-gradient(
      circle at 70% 86%,
      rgba(255, 240, 220, 0.45) 0%,
      rgba(255, 240, 220, 0) 40%
    ),
    linear-gradient(135deg, #f8fbff 0%, #edf5fc 60%, #ffffff 100%);
}

.lotion-fv__bg-text {
  position: absolute;
  right: -40px;
  bottom: 20px;
  color: rgba(0, 82, 159, 0.05);
  font-size: clamp(70px, 10vw, 150px);
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}

.lotion-fv__inner {
  width: min(1200px, 90%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 60px;
  align-items: center;
}

.lotion-fv__content {
  flex: 1;
  max-width: 520px;
}

.lotion-fv__label {
  display: inline-block;
  padding: 8px 18px;
  background: #eaf4ff;
  color: #00529f;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 24px;
}

.lotion-fv__title {
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.4;
  color: #222;
  margin-bottom: 24px;
}

.lotion-fv__lead {
  font-size: 18px;
  line-height: 2;
  color: #555;
  margin-bottom: 32px;
}

.lotion-fv__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 0 0 36px;
}

.lotion-fv__tags li {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  background: #fff;
  border: 1px solid #d8e7f7;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  color: #333;
}

.lotion-fv__buttons {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.lotion-fv__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 240px;
  padding: 18px 32px;
  border-radius: 10px;
  text-decoration: none;
  font-size: 16px;
  font-weight: 700;
  transition: all 0.3s ease;
}

.lotion-fv__btn--primary {
  background: #00529f;
  color: #fff;
}

.lotion-fv__btn--primary:hover {
  background: #003f7c;
}

.lotion-fv__btn--secondary {
  background: #fff;
  color: #00529f;
  border: 1px solid #00529f;
}

.lotion-fv__btn--secondary:hover {
  background: #f5f9ff;
}

.lotion-fv__image {
  overflow: hidden;
  border-radius: 30px;
  box-shadow: 0 26px 64px rgba(0, 82, 159, 0.16);
}

.lotion-fv__image img {
  width: 100%;
  display: block;
  aspect-ratio: 16 / 11;
  object-fit: cover;
}

@media (max-width: 1024px) {
  .lotion-fv__title {
    font-size: clamp(30px, 4vw, 40px);
  }

  .lotion-fv__lead {
    font-size: 16px;
  }
}

@media (max-width: 768px) {
  .lotion-fv {
    padding: 120px 0 60px;
  }

  .lotion-fv__inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .lotion-fv__content {
    max-width: 100%;
  }

  .lotion-fv__image {
    max-width: 100%;
  }

  .lotion-fv__title {
    font-size: clamp(30px, 4vw, 40px);
  }

  .lotion-fv__lead {
    font-size: 15px;
  }

  .lotion-fv__buttons {
    flex-direction: column;
  }

  .lotion-fv__btn {
    width: 100%;
    min-width: auto;
  }

  .lotion-fv__bg-text {
    display: none;
  }
}

/* Brand Type */

.lotion-brand-type {
  padding: 100px 0;
  background: #fff;
}

.lotion-brand-type__inner {
  width: min(1200px, 90%);
  margin: 0 auto;
}

.lotion-brand-type__heading {
  margin-bottom: 48px;
}

.lotion-brand-type__label {
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: 14px;
}

.lotion-brand-type__heading h2 {
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
  color: #222;
  margin-bottom: 20px;
}

.lotion-brand-type__heading p {
  font-size: 16px;
  line-height: 2;
  color: #555;
}

.lotion-brand-type__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.lotion-brand-type-card {
  position: relative;
  min-height: 220px;
  padding: 32px 28px;
  background: #f8fbff;
  border: 1px solid #dbe9f7;
  border-radius: 18px;
}

.lotion-brand-type-card {
  transition: 0.3s;
}

.lotion-brand-type-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 82, 159, 0.08);
}

.lotion-brand-type-card h3 {
  font-size: 20px;
  line-height: 1.6;
  color: #222;
  margin-bottom: 16px;
}

.lotion-brand-type-card p {
  font-size: 15px;
  line-height: 1.9;
  color: #555;
}

@media (max-width: 1024px) {
  .lotion-brand-type__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .lotion-brand-type {
    padding: 70px 0;
  }

  .lotion-brand-type__heading h2 {
    font-size: clamp(30px, 4vw, 40px);
    font-weight: 700;
  }

  .lotion-brand-type__grid {
    grid-template-columns: 1fr;
  }

  .lotion-brand-type-card {
    min-height: auto;
  }
}

/* Lotion Plan */

.lotion-plan {
  padding: 100px 0;
  background: #f8fbff;
}

.lotion-plan__inner {
  width: min(1200px, 90%);
  margin: 0 auto;
}

.lotion-plan__heading {
  margin-bottom: 48px;
}

.lotion-plan__label {
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: 14px;
}

.lotion-plan__heading h2 {
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
  color: #222;
  margin-bottom: 20px;
}

.lotion-plan__heading p {
  font-size: 16px;
  line-height: 2;
  color: #555;
}

.lotion-plan__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}

.lotion-plan-card {
  display: block;
  overflow: hidden;
  background: #fff;
  border: 1px solid #dbe9f7;
  border-radius: 18px;
  text-decoration: none;
  color: inherit;
  transition: all 0.3s ease;
}

.lotion-plan-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 82, 159, 0.08);
}

.lotion-plan-card__image {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.lotion-plan-card__image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.lotion-plan-card:hover .lotion-plan-card__image img {
  transform: scale(1.04);
}

.lotion-plan-card__body {
  padding: 28px 24px 30px;
}

.lotion-plan-card__body h3 {
  font-size: 20px;
  line-height: 1.5;
  color: #222;
  margin-bottom: 14px;
}

.lotion-plan-card__body p {
  font-size: 15px;
  line-height: 1.9;
  color: #555;
}

@media (max-width: 1024px) {
  .lotion-plan__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .lotion-plan {
    padding: 70px 0;
  }

  .lotion-plan__heading h2 {
    font-size: clamp(30px, 4vw, 40px);
    font-weight: 700;
  }

  .lotion-plan__heading p {
    font-size: 15px;
  }

  .lotion-plan__grid {
    grid-template-columns: 1fr;
  }
}

/* Lotion Reason */
.lotion-reason {
  padding: 100px 0;
  background: #fff;
}

.lotion-reason__inner {
  width: min(1200px, 90%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 72px;
  align-items: start;
}

.lotion-reason__heading {
  position: sticky;
  top: 120px;
}

.lotion-reason__label {
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: 14px;
}

.lotion-reason__heading h2 {
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
  color: #222;
  margin-bottom: 20px;
}

.lotion-reason__heading p {
  font-size: 16px;
  line-height: 2;
  color: #555;
}

.lotion-reason__list {
  display: grid;
  gap: 20px;
}

.lotion-reason-item {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 24px;
  padding: 30px 32px;
  background: #f8fbff;
  border: 1px solid #dbe9f7;
  border-radius: 18px;
}

.lotion-reason-item__icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #00529f;
  color: #fff;
  font-weight: 700;
}

.lotion-reason-item h3 {
  font-size: 20px;
  line-height: 1.5;
  color: #222;
  margin-bottom: 10px;
}

.lotion-reason-item p {
  font-size: 15px;
  line-height: 1.9;
  color: #555;
}

@media (max-width: 1024px) {
  .lotion-reason__inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .lotion-reason__heading {
    position: static;
  }
}

@media (max-width: 768px) {
  .lotion-reason {
    padding: 70px 0;
  }

  .lotion-reason__heading h2 {
    font-size: clamp(30px, 4vw, 40px);
    font-weight: 700;
  }

  .lotion-reason__heading p {
    font-size: 15px;
  }

  .lotion-reason-item {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 26px 24px;
  }

  .lotion-reason-item h3 {
    font-size: 18px;
  }
}

.lotion-reason__points {
  display: grid;
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 28px 0 0;
}

.lotion-reason__points li {
  position: relative;
  padding: 12px 18px 12px 42px;
  background: #f8fbff;
  border: 1px solid #dbe9f7;
  border-radius: 999px;
  color: #333;
  font-size: 15px;
  font-weight: 600;
}

.lotion-reason__points li::before {
  content: "✓";
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: #00529f;
  font-weight: 700;
}

/* Lotion Flow */
.lotion-flow {
  padding: 100px 0;
  background: linear-gradient(135deg, #f8fbff 0%, #edf4fb 100%);
}

.lotion-flow__inner {
  width: min(1200px, 90%);
  margin: 0 auto;
}

.lotion-flow__heading {
  margin-bottom: 56px;
}

.lotion-flow__label {
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: 14px;
}

.lotion-flow__heading h2 {
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
  color: #222;
  margin-bottom: 20px;
}

.lotion-flow__heading p {
  font-size: 16px;
  line-height: 2;
  color: #555;
}

.lotion-flow__steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.lotion-flow-step {
  position: relative;
  padding: 34px 28px 32px;
  background: #fff;
  border: 1px solid #dbe9f7;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0, 82, 159, 0.04);
}

.lotion-flow-step::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -20px;
  width: 14px;
  height: 14px;
  border-top: 2px solid #00529f;
  border-right: 2px solid #00529f;
  transform: translateY(-50%) rotate(45deg);
}

.lotion-flow-step:last-child::after {
  display: none;
}

.lotion-flow-step span {
  display: inline-block;
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-bottom: 18px;
}

.lotion-flow-step h3 {
  font-size: 20px;
  line-height: 1.5;
  color: #222;
  margin-bottom: 14px;
}

.lotion-flow-step p {
  font-size: 15px;
  line-height: 1.9;
  color: #555;
}

.lotion-flow__links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 40px;
}

.lotion-flow__links a {
  display: inline-flex;
  align-items: center;
  padding: 12px 18px;
  background: #fff;
  border: 1px solid #00529f;
  border-radius: 999px;
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: 0.3s;
}

.lotion-flow__links a::after {
  content: "→";
  margin-left: 8px;
}

.lotion-flow__links a:hover {
  background: #00529f;
  color: #fff;
}

@media (max-width: 1024px) {
  .lotion-flow__steps {
    grid-template-columns: repeat(2, 1fr);
  }

  .lotion-flow-step::after {
    display: none;
  }
}

@media (max-width: 768px) {
  .lotion-flow {
    padding: 70px 0;
  }

  .lotion-flow__heading h2 {
    font-size: clamp(30px, 4vw, 40px);
    font-weight: 700;
  }

  .lotion-flow__heading p {
    font-size: 15px;
  }

  .lotion-flow__steps {
    grid-template-columns: 1fr;
  }

  .lotion-flow-step {
    padding: 28px 24px;
  }

  .lotion-flow__links {
    flex-direction: column;
  }

  .lotion-flow__links a {
    justify-content: center;
    width: 100%;
    border-radius: 10px;
  }
}

.lotion-consultation {
  padding: 100px 0;
  background: #fff;
}

.lotion-consultation__inner {
  width: min(1200px, 90%);
  margin: auto;
}

.lotion-consultation__heading {
  margin-bottom: 50px;
}

.lotion-consultation__label {
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: 14px;
}

.lotion-consultation__heading h2 {
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 20px;
}

.lotion-consultation__heading p {
  font-size: 16px;
  line-height: 2;
  color: #555;
}

.lotion-consultation__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.lotion-consultation__item {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 24px 28px;
  border: 1px solid #dbe9f7;
  border-radius: 16px;
  background: #f8fbff;
}

.lotion-consultation__item span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #00529f;
  color: #fff;
  font-weight: 700;
}

.lotion-consultation__item p {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

@media (max-width: 768px) {
  .lotion-consultation {
    padding: 70px 0;
  }

  .lotion-consultation__heading h2 {
    font-size: clamp(30px, 4vw, 40px);
    font-weight: 700;
  }

  .lotion-consultation__grid {
    grid-template-columns: 1fr;
  }
}

/* Lotion Support */
.lotion-support {
  padding: 100px 0;
  background: #f8fbff;
}

.lotion-support__inner {
  width: min(1200px, 90%);
  margin: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: start;
}

.lotion-support__content {
  position: sticky;
  top: 120px;
  align-self: start;
}

.lotion-support__label {
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: 14px;
}

.lotion-support__content h2 {
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 24px;
}

.lotion-support__lead {
  font-size: 16px;
  line-height: 2;
  color: #555;
  margin-bottom: 32px;
}

.lotion-support__points {
  display: grid;
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.lotion-support__points li {
  position: relative;
  padding-left: 30px;
  font-size: 15px;
  font-weight: 600;
}

.lotion-support__points li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #00529f;
  font-weight: 700;
}

.lotion-support__cards {
  display: grid;
  gap: 20px;
}

.lotion-support-card {
  padding: 30px;
  background: #fff;
  border: 1px solid #dbe9f7;
  border-radius: 18px;
  transition: 0.3s;
}

.lotion-support-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(0, 82, 159, 0.08);
}

.lotion-support-card span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #00529f;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 16px;
}

.lotion-support-card h3 {
  font-size: 22px;
  line-height: 1.5;
  margin-bottom: 12px;
}

.lotion-support-card p {
  font-size: 15px;
  line-height: 1.9;
  color: #555;
}

.lotion-support-card__tag {
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 14px;
  border-radius: 999px;
  background: #eaf4ff;
  color: #00529f;
  font-size: 12px;
  font-weight: 700;
}

@media (max-width: 1024px) {
  .lotion-support__inner {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .lotion-support__content {
    position: static;
  }
}

@media (max-width: 768px) {
  .lotion-support {
    padding: 70px 0;
  }

  .lotion-support__content h2 {
    font-size: clamp(26px, 4vw, 40px);
    font-weight: 700;
  }

  .lotion-support__lead {
    font-size: 15px;
  }

  .lotion-support-card {
    padding: 24px;
  }

  .lotion-support-card h3 {
    font-size: 18px;
  }
}

/* FAQ */
.first-oem-faq {
  padding: 90px 0px;
}

.first-oem-faq__inner {
  margin: 0 auto;
}

.first-oem-faq__head {
  text-align: center;
  margin-bottom: 52px;
}

.first-oem-faq__label {
  display: inline-block;
  margin-bottom: 14px;
  color: #0068b7;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.first-oem-faq__head h2 {
  margin: 0 0 20px;
  color: #16324f;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
}

.first-oem-faq__head p {
  margin: 0;
  color: #526776;
  font-size: 16px;
  line-height: 1.9;
}

.first-oem-faq__list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.sp {
  display: none;
}

@media screen and (max-width: 767px) {
  .first-oem-faq {
    padding: 70px 0px;
  }

  .first-oem-faq__head {
    margin-bottom: 38px;
  }

  .first-oem-faq__head h2 {
    font-size: 28px;
  }

  .first-oem-faq__head p {
    font-size: 15px;
    line-height: 1.9;
  }

  .sp {
    display: inline;
  }
}

/* CTA */
.lotion-cta {
  position: relative;
  overflow: hidden;
  padding: 120px 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.15)),
    url("../../assets/img/lineup/facecare/lotion/cta-bg.webp");
  background-size: cover;
  background-position: center;
}

.lotion-cta__inner {
  position: relative;
  z-index: 1;
  width: min(900px, 90%);
  margin: auto;
  padding: 50px 24px;
  text-align: center;
  border-radius: 32px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.75);
  box-shadow: 0 20px 50px rgba(0, 82, 159, 0.08);
}

.lotion-cta__label {
  margin-bottom: 16px;
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.lotion-cta h2 {
  margin: 0 0 24px;
  color: #222;
  font-size: clamp(26px, 4vw, 40px);
  font-weight: 700;
  font-weight: 700;
}

.lotion-cta__text {
  max-width: 720px;
  margin: 0 auto 36px;
  color: #333;
  font-size: 16px;
  line-height: 2;
}

.lotion-cta__buttons {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.lotion-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 280px;
  padding: 18px 30px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  transition: 0.3s;
}

.lotion-cta__btn--primary {
  background: #00529f;
  color: #fff;
}

.lotion-cta__btn--primary:hover {
  background: #003f7c;
}

.lotion-cta__btn--secondary {
  background: #fff;
  color: #00529f;
  border: 1px solid #00529f;
}

.lotion-cta__btn--secondary:hover {
  background: #f5f9ff;
}

@media (max-width: 768px) {
  .lotion-cta {
    padding: 70px 0;
  }

  .lotion-cta__inner {
    width: min(100% - 40px, 1200px);
    padding: 50px 24px;
  }

  .lotion-cta h2 {
    font-size: clamp(26px, 4vw, 40px);
    font-weight: 700;
  }

  .lotion-cta__text {
    font-size: 15px;
    line-height: 1.9;
  }

  .lotion-cta__buttons {
    flex-direction: column;
  }

  .lotion-cta__btn {
    width: 100%;
    min-width: auto;
  }
}

/* /lineup/facecare/serum/ */
/* Serum FV */
.serum-fv {
  position: relative;
  overflow: hidden;
  padding: 160px 0 90px;
  background:
    radial-gradient(
      circle at 82% 18%,
      rgba(173, 214, 255, 0.45) 0%,
      rgba(173, 214, 255, 0) 34%
    ),
    radial-gradient(
      circle at 70% 86%,
      rgba(255, 240, 220, 0.45) 0%,
      rgba(255, 240, 220, 0) 40%
    ),
    linear-gradient(135deg, #f8fbff 0%, #edf5fc 60%, #ffffff 100%);
}

.serum-fv__inner {
  width: min(1200px, 90%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 60px;
  align-items: center;
}

.serum-fv__content {
  flex: 1;
  max-width: 560px;
}

.serum-fv__label {
  display: inline-block;
  padding: 8px 18px;
  border-radius: 999px;
  background: #eaf4ff;
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 24px;
}

.serum-fv__title {
  font-size: clamp(30px, 4vw, 40px);
  line-height: 1.4;
  font-weight: 700;
  color: #222;
  margin-bottom: 24px;
}

.serum-fv__lead {
  font-size: 18px;
  line-height: 2;
  color: #555;
  margin-bottom: 32px;
}

.serum-fv__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 0 0 36px;
}

.serum-fv__tags li {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  background: #fff;
  border: 1px solid #d8e7f7;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

.serum-fv__buttons {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.serum-fv__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 250px;
  padding: 18px 32px;
  border-radius: 10px;
  text-decoration: none;
  font-size: 16px;
  font-weight: 700;
  transition: 0.3s;
}

.serum-fv__btn--primary {
  background: #00529f;
  color: #fff;
}

.serum-fv__btn--primary:hover {
  background: #003f7c;
}

.serum-fv__btn--secondary {
  background: #fff;
  color: #00529f;
  border: 1px solid #00529f;
}

.serum-fv__btn--secondary:hover {
  background: #f5f9ff;
}

.serum-fv__image {
  overflow: hidden;
  border-radius: 30px;
  box-shadow: 0 26px 64px rgba(0, 82, 159, 0.16);
}

.serum-fv__image img {
  width: 100%;
  display: block;
  aspect-ratio: 16 / 11;
  object-fit: cover;
}

.serum-fv__bg-text {
  position: absolute;
  right: -40px;
  bottom: 20px;
  color: rgba(0, 82, 159, 0.05);
  font-size: clamp(70px, 10vw, 150px);
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}

@media (max-width: 768px) {
  .serum-fv {
    padding: 120px 0 60px;
  }

  .serum-fv__inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .serum-fv__content {
    max-width: 100%;
  }

  .serum-fv__title {
    font-size: clamp(30px, 4vw, 40px);
    font-weight: 700;
  }

  .serum-fv__lead {
    font-size: 15px;
  }

  .serum-fv__buttons {
    flex-direction: column;
  }

  .serum-fv__btn {
    width: 100%;
    min-width: auto;
  }

  .serum-fv__bg-text {
    display: none;
  }
}

/* Serum Brand Type */

.serum-brand-type {
  padding: 100px 0;
  background: #fff;
}

.serum-brand-type__inner {
  width: min(1200px, 90%);
  margin: 0 auto;
}

.serum-brand-type__heading {
  margin-bottom: 48px;
}

.serum-brand-type__label {
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: 14px;
}

.serum-brand-type__heading h2 {
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
  color: #222;
  margin-bottom: 20px;
}

.serum-brand-type__heading p {
  font-size: 16px;
  line-height: 2;
  color: #555;
}

.serum-brand-type__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}

.serum-brand-type-card {
  overflow: hidden;
  background: #fff;
  border: 1px solid #dbe9f7;
  border-radius: 18px;
  transition: 0.3s;
}

.serum-brand-type-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 82, 159, 0.08);
}

.serum-brand-type-card__image {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.serum-brand-type-card__image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: 0.4s;
}

.serum-brand-type-card:hover .serum-brand-type-card__image img {
  transform: scale(1.05);
}

.serum-brand-type-card span {
  display: inline-block;
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 18px;
}

.serum-brand-type-card h3 {
  font-size: 20px;
  line-height: 1.6;
  color: #222;
  margin-bottom: 16px;
}

.serum-brand-type-card p {
  font-size: 15px;
  line-height: 1.9;
  color: #555;
}

.serum-brand-type-card__body {
  padding: 28px;
}

.serum-brand-type-card__body h3 {
  font-size: 22px;
  line-height: 1.5;
  color: #222;
  margin-bottom: 14px;
}

.serum-brand-type-card__body p {
  font-size: 15px;
  line-height: 1.9;
  color: #555;
}

@media (max-width: 1024px) {
  .serum-brand-type__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .serum-brand-type {
    padding: 70px 0;
  }

  .serum-brand-type__heading h2 {
    font-size: clamp(30px, 4vw, 40px);
    font-weight: 700;
  }

  .serum-brand-type__heading p {
    font-size: 15px;
  }

  .serum-brand-type__grid {
    grid-template-columns: 1fr;
  }

  .serum-brand-type-card__body {
    padding: 24px;
  }

  .serum-brand-type-card__body h3 {
    font-size: 20px;
  }

  .serum-brand-type-card {
    min-height: auto;
    padding: 28px 24px;
  }

  .serum-brand-type-card h3 {
    font-size: 19px;
  }
}

/* Serum Planning */

.serum-planning {
  padding: 100px 0;
  background: #f8fbff;
}

.serum-planning__inner {
  width: min(1200px, 90%);
  margin: 0 auto;
}

.serum-planning__heading {
  margin-bottom: 70px;
}

.serum-planning__label {
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: 14px;
}

.serum-planning__heading h2 {
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 20px;
}

.serum-planning__heading p {
  font-size: 16px;
  line-height: 2;
  color: #555;
}

.serum-planning-item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  margin-bottom: 80px;
}

.serum-planning-item:last-child {
  margin-bottom: 0;
}

.serum-planning-item--reverse .serum-planning-item__image {
  order: 2;
}

.serum-planning-item--reverse .serum-planning-item__content {
  order: 1;
}

.serum-planning-item__image img {
  width: 100%;
  border-radius: 20px;
  display: block;
}

.serum-planning-item__content span {
  display: inline-block;
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 14px;
}

.serum-planning-item__content h3 {
  font-size: 32px;
  line-height: 1.4;
  margin-bottom: 20px;
  color: #222;
}

.serum-planning-item__content p {
  font-size: 16px;
  line-height: 2;
  color: #555;
  margin-bottom: 24px;
}

.serum-planning-item__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #00529f;
  font-weight: 700;
  text-decoration: none;
}

.serum-planning-item__link::after {
  content: "→";
}

@media (max-width: 768px) {
  .serum-planning {
    padding: 70px 0;
  }

  .serum-planning__heading h2 {
    font-size: clamp(30px, 4vw, 40px);
    font-weight: 700;
  }

  .serum-planning-item {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 60px;
  }

  .serum-planning-item--reverse .serum-planning-item__image,
  .serum-planning-item--reverse .serum-planning-item__content {
    order: initial;
  }

  .serum-planning-item__content h3 {
    font-size: 24px;
  }
}

/* WHY SERUM OEM */
.serum-reason {
  padding: 100px 0;
  background: #fff;
}

.serum-reason__inner {
  width: min(1200px, 90%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 72px;
  align-items: start;
}

.serum-reason__heading {
  position: sticky;
  top: 120px;
}

.serum-reason__label {
  display: inline-block;
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: 14px;
}

.serum-reason__heading h2 {
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
  color: #222;
  margin-bottom: 20px;
}

.serum-reason__heading p {
  font-size: 16px;
  line-height: 2;
  color: #555;
  margin-bottom: 30px;
}

.serum-reason__points {
  display: grid;
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.serum-reason__points li {
  position: relative;
  padding: 12px 18px 12px 44px;
  background: #f8fbff;
  border: 1px solid #dbe9f7;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  color: #333;
}

.serum-reason__points li::before {
  content: "✓";
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: #00529f;
  font-weight: 700;
}

.serum-reason__list {
  display: grid;
  gap: 20px;
}

.serum-reason-item {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 24px;
  padding: 32px;
  background: #f8fbff;
  border: 1px solid #dbe9f7;
  border-radius: 18px;
  transition: 0.3s;
}

.serum-reason-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 82, 159, 0.08);
}

.serum-reason-item span {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #00529f;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
}

.serum-reason-item h3 {
  font-size: 22px;
  line-height: 1.5;
  color: #222;
  margin-bottom: 12px;
}

.serum-reason-item p {
  font-size: 15px;
  line-height: 1.9;
  color: #555;
  margin: 0;
}

@media (max-width: 1024px) {
  .serum-reason__inner {
    gap: 40px;
  }

  .serum-reason__heading h2 {
    font-size: clamp(30px, 4vw, 40px);
    font-weight: 700;
  }
}

@media (max-width: 768px) {
  .serum-reason {
    padding: 70px 0;
  }

  .serum-reason__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .serum-reason__heading {
    position: static;
  }

  .serum-reason__heading h2 {
    font-size: 28px;
  }

  .serum-reason__heading p {
    font-size: 15px;
  }

  .serum-reason-item {
    grid-template-columns: 50px 1fr;
    gap: 16px;
    padding: 24px;
  }

  .serum-reason-item span {
    width: 50px;
    height: 50px;
    font-size: 14px;
  }

  .serum-reason-item h3 {
    font-size: 19px;
  }

  .serum-reason-item p {
    font-size: 14px;
    line-height: 1.8;
  }
}

/* SERUM FEATURES */

.serum-features {
  padding: 100px 0;
  background: #f8fbff;
}

.serum-features__inner {
  width: min(1200px, 90%);
  margin: 0 auto;
}

.serum-features__heading {
  margin: 0 auto 60px;
  text-align: center;
}

.serum-features__label {
  display: inline-block;
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: 14px;
}

.serum-features__heading h2 {
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 20px;
  color: #222;
}

.serum-features__heading p {
  font-size: 16px;
  line-height: 2;
  color: #555;
}

.serum-features__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-bottom: 70px;
}

.serum-features-card {
  background: #fff;
  border: 1px solid #dbe9f7;
  border-radius: 18px;
  padding: 32px 24px;
  text-align: center;
}

.serum-features-card__icon {
  font-size: 40px;
  margin-bottom: 20px;
}

.serum-features-card h3 {
  font-size: 22px;
  margin-bottom: 14px;
  color: #222;
}

.serum-features-card p {
  font-size: 15px;
  line-height: 1.9;
  color: #555;
}

.serum-features-ingredients {
  background: #fff;
  border: 1px solid #dbe9f7;
  border-radius: 20px;
  padding: 40px;
}

.serum-features-ingredients h3 {
  text-align: center;
  font-size: 28px;
  margin-bottom: 36px;
}

.serum-features-ingredients__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

.serum-features-ingredients h4 {
  color: #00529f;
  margin-bottom: 12px;
  font-size: 18px;
}

.serum-features-ingredients ul {
  padding-left: 20px;
}

.serum-features-ingredients li {
  line-height: 2;
  color: #555;
}

.serum-features-ingredients__note {
  margin-top: 24px;
  text-align: center;
  font-size: 13px;
  color: #777;
}

@media (max-width: 768px) {
  .serum-features {
    padding: 70px 0;
  }

  .serum-features__heading h2 {
    font-size: clamp(30px, 4vw, 40px);
    font-weight: 700;
  }

  .serum-features__grid {
    grid-template-columns: 1fr;
  }

  .serum-features-ingredients {
    padding: 24px;
  }

  .serum-features-ingredients__grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .serum-features-ingredients h3 {
    font-size: 24px;
  }
}

/* OEM FLOW */

.serum-flow {
  padding: 100px 0;
  background: #fff;
}

.serum-flow__inner {
  width: min(1200px, 90%);
  margin: 0 auto;
}

.serum-flow__heading {
  margin: 0 auto 60px;
  text-align: center;
}

.serum-flow__label {
  display: inline-block;
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: 14px;
}

.serum-flow__heading h2 {
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 20px;
}

.serum-flow__heading p {
  font-size: 16px;
  line-height: 2;
  color: #555;
}

/* STEP */

.serum-flow__steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  margin-bottom: 60px;
}

.serum-flow-step {
  position: relative;
  padding: 32px 24px;
  background: #f8fbff;
  border: 1px solid #dbe9f7;
  border-radius: 18px;
  text-align: center;
}

.serum-flow-step__number {
  width: 60px;
  height: 60px;
  margin: 0 auto 20px;
  background: #00529f;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
}

.serum-flow-step h3 {
  font-size: 20px;
  line-height: 1.5;
  margin-bottom: 14px;
  color: #222;
}

.serum-flow-step p {
  font-size: 14px;
  line-height: 1.8;
  color: #555;
}

.serum-flow__links {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.serum-flow-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 260px;
  padding: 16px 24px;
  border: 1px solid #00529f;
  border-radius: 999px;
  color: #00529f;
  text-decoration: none;
  font-weight: 700;
  transition: 0.3s;
}

.serum-flow-link:hover {
  background: #00529f;
  color: #fff;
}

@media (max-width: 768px) {
  .serum-flow {
    padding: 70px 0;
  }

  .serum-flow__heading h2 {
    font-size: clamp(30px, 4vw, 40px);
    font-weight: 700;
  }

  .serum-flow__heading p {
    font-size: 15px;
  }

  .serum-flow__steps {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .serum-flow-step {
    text-align: left;
  }

  .serum-flow-step__number {
    margin: 0 0 16px;
  }

  .serum-flow-link {
    width: 100%;
    min-width: auto;
  }
}

/* SUPPORT */

.serum-support {
  padding: 100px 0;
  background: #f8fbff;
}

.serum-support__inner {
  width: min(1200px, 90%);
  margin: 0 auto;
}

.serum-support__heading {
  margin: 0 auto 60px;
  text-align: center;
}

.serum-support__label {
  display: inline-block;
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: 14px;
}

.serum-support__heading h2 {
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 20px;
  color: #222;
}

.serum-support__heading p {
  font-size: 16px;
  line-height: 2;
  color: #555;
}

.serum-support__content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}

.serum-support__image {
  position: sticky;
  top: 120px;
}

.serum-support__image img {
  width: 100%;
  display: block;
  border-radius: 20px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
}

.serum-support__cards {
  display: grid;
  gap: 20px;
}

.serum-support-card {
  background: #fff;
  border: 1px solid #dbe9f7;
  border-radius: 18px;
  padding: 28px;
  transition: 0.3s;
}

.serum-support-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0, 82, 159, 0.08);
}

.serum-support-card span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #00529f;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 14px;
}

.serum-support-card h3 {
  font-size: 20px;
  line-height: 1.5;
  margin-bottom: 12px;
  color: #222;
}

.serum-support-card p {
  font-size: 15px;
  line-height: 1.9;
  color: #555;
}

@media (max-width: 768px) {
  .serum-support {
    padding: 70px 0;
  }

  .serum-support__heading h2 {
    font-size: clamp(30px, 4vw, 40px);
    font-weight: 700;
  }

  .serum-support__heading p {
    font-size: 15px;
  }

  .serum-support__content {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .serum-support-card {
    padding: 24px;
  }

  .serum-support-card h3 {
    font-size: 18px;
  }

  .serum-support__image {
    position: static;
  }
}

/* BRAND VALUE */

.serum-value {
  padding: 120px 0;
  background: #ffffff;
}

.serum-value__inner {
  width: min(1000px, 90%);
  margin: 0 auto;
}

.serum-value__heading {
  text-align: center;
  margin: 0 auto 80px;
}

.serum-value__label {
  display: inline-block;
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  margin-bottom: 16px;
}

.serum-value__heading h2 {
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 24px;
  color: #222;
}

.serum-value__heading p {
  font-size: 16px;
  line-height: 2;
  color: #555;
}

.serum-value__list {
  border-top: 1px solid #dbe9f7;
}

.serum-value-item {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 40px;
  padding: 48px 0;
  border-bottom: 1px solid #dbe9f7;
}

.serum-value-item span {
  color: #00529f;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1;
}

.serum-value-item h3 {
  font-size: 28px;
  line-height: 1.5;
  color: #222;
  margin-bottom: 16px;
}

.serum-value-item p {
  font-size: 16px;
  line-height: 2;
  color: #555;
  margin: 0;
}

@media (max-width: 768px) {
  .serum-value {
    padding: 80px 0;
  }

  .serum-value__heading {
    margin-bottom: 50px;
  }

  .serum-value__heading h2 {
    font-size: clamp(30px, 4vw, 40px);
    font-weight: 700;
  }

  .serum-value__heading p {
    font-size: 15px;
  }

  .serum-value-item {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 32px 0;
  }

  .serum-value-item span {
    font-size: 18px;
  }

  .serum-value-item h3 {
    font-size: 22px;
  }

  .serum-value-item p {
    font-size: 15px;
  }
}

/* CTA */
.serum-cta {
  position: relative;
  overflow: hidden;
  padding: 120px 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.1)),
    url("../../assets/img/lineup/facecare/serum/cta-bg.webp");
  background-size: cover;
  background-position: center;
}

.serum-cta__inner {
  position: relative;
  z-index: 1;
  width: min(900px, 90%);
  margin: auto;
  padding: 50px 24px;
  text-align: center;
  border-radius: 32px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.75);
  box-shadow: 0 20px 50px rgba(0, 82, 159, 0.08);
}

.serum-cta__label {
  margin-bottom: 16px;
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.serum-cta h2 {
  margin: 0 0 24px;
  color: #222;
  font-size: 40px;
  line-height: 1.5;
  font-weight: 700;
}

.serum-cta__lead {
  max-width: 720px;
  margin: 0 auto 36px;
  color: #333;
  font-size: 16px;
  line-height: 2;
}

.serum-cta__buttons {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.serum-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 280px;
  padding: 18px 30px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  transition: 0.3s;
}

.serum-cta__btn--primary {
  background: #00529f;
  color: #fff;
}

.serum-cta__btn--primary:hover {
  background: #003f7c;
}

.serum-cta__btn--secondary {
  background: #fff;
  color: #00529f;
  border: 1px solid #00529f;
}

.serum-cta__btn--secondary:hover {
  background: #f5f9ff;
}

@media (max-width: 768px) {
  .serum-cta {
    padding: 70px 0;
  }

  .serum-cta__inner {
    width: min(100% - 40px, 1200px);
    padding: 50px 24px;
  }

  .serum-cta h2 {
    font-size: 30px;
  }

  .serum-cta__lead {
    font-size: 15px;
    line-height: 1.9;
  }

  .serum-cta__buttons {
    flex-direction: column;
  }

  .serum-cta__btn {
    width: 100%;
    min-width: auto;
  }
}
/* lineup/facecare/cream/ */
/* FV  */
.cream-fv {
  position: relative;
  overflow: hidden;
  padding: 160px 0 90px;
  background:
    radial-gradient(
      circle at 82% 18%,
      rgba(173, 214, 255, 0.35) 0%,
      rgba(173, 214, 255, 0) 34%
    ),
    radial-gradient(
      circle at 70% 86%,
      rgba(203, 184, 157, 0.22) 0%,
      rgba(203, 184, 157, 0) 40%
    ),
    linear-gradient(135deg, #f8fbff 0%, #edf5fc 60%, #ffffff 100%);
}

.cream-fv__inner {
  width: min(1200px, 90%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 60px;
  align-items: center;
}

.cream-fv__content {
  flex: 1;
  max-width: 560px;
  position: relative;
  z-index: 2;
}

.cream-fv__label {
  display: inline-block;
  padding: 8px 18px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #d9e6f5;
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 24px;
}

.cream-fv__title {
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.4;
  font-weight: 700;
  color: #222;
  margin-bottom: 24px;
}

.cream-fv__title br {
  display: block;
}

.cream-fv__lead {
  font-size: 18px;
  line-height: 2;
  color: #555;
  margin-bottom: 32px;
}

.cream-fv__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 0 0 36px;
}

.cream-fv__tags li {
  padding: 10px 18px;
  background: #fff;
  border: 1px solid #dbe6f3;
  border-radius: 999px;
  font-size: 14px;
  color: #333;
}

.cream-fv__buttons {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.cream-fv__btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-width: 240px;
  padding: 18px 32px;
  border-radius: 10px;
  text-decoration: none;
  font-size: 16px;
  font-weight: 700;
  transition: 0.3s;
}

.cream-fv__btn--primary {
  background: #00529f;
  color: #fff;
}

.cream-fv__btn--primary:hover {
  background: #003f7c;
}

.cream-fv__btn--secondary {
  background: #fff;
  color: #00529f;
  border: 1px solid #00529f;
}

.cream-fv__btn--secondary:hover {
  background: #f5f9ff;
}

.cream-fv__image {
  overflow: hidden;
  border-radius: 30px;
  box-shadow: 0 26px 64px rgba(0, 82, 159, 0.16);
}

.cream-fv__image img {
  width: 100%;
  display: block;
  aspect-ratio: 16 / 11;
  object-fit: cover;
}

.cream-fv__bg-text {
  position: absolute;
  right: -40px;
  bottom: 20px;
  color: rgba(0, 82, 159, 0.05);
  font-size: clamp(70px, 10vw, 150px);
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}

@media (max-width: 768px) {
  .cream-fv {
    padding: 120px 0 60px;
  }

  .cream-fv__inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .cream-fv__title {
    font-size: clamp(30px, 4vw, 40px);
    font-weight: 700;
  }

  .cream-fv__lead {
    font-size: 15px;
  }

  .cream-fv__buttons {
    flex-direction: column;
  }

  .cream-fv__btn {
    width: 100%;
    min-width: auto;
  }

  .cream-fv__image {
    border-radius: 22px;
  }

  .cream-fv__image img {
    aspect-ratio: 4 / 3;
  }

  .cream-fv__bg-text {
    display: none;
  }
}

/* BRAND PLANNING  */
.cream-brand-type {
  padding: 100px 0;
  background: #fff;
}

.cream-brand-type__inner {
  width: min(1200px, 90%);
  margin: 0 auto;
}

.cream-brand-type__heading {
  margin-bottom: 48px;
}

.cream-brand-type__label {
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: 14px;
}

.cream-brand-type__heading h2 {
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
  color: #222;
  margin-bottom: 20px;
}

.cream-brand-type__heading p {
  font-size: 16px;
  line-height: 2;
  color: #555;
}

.cream-brand-type__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.cream-brand-type-card {
  padding: 32px 28px;
  background: #f8fbff;
  border: 1px solid #dbe9f7;
  border-radius: 18px;
  transition: 0.3s;
}

.cream-brand-type-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 82, 159, 0.08);
}

.cream-brand-type-card span {
  display: inline-block;
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 18px;
}

.cream-brand-type-card h3 {
  font-size: 20px;
  line-height: 1.6;
  margin-bottom: 16px;
}

.cream-brand-type-card p {
  font-size: 15px;
  line-height: 1.9;
  color: #555;
}

@media (max-width: 1100px) {
  .cream-brand-type__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .cream-brand-type {
    padding: 70px 0;
  }

  .cream-brand-type__heading h2 {
    font-size: clamp(30px, 4vw, 40px);
    font-weight: 700;
  }

  .cream-brand-type__heading p {
    font-size: 15px;
  }

  .cream-brand-type__grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .cream-brand-type-card {
    padding: 24px;
  }

  .cream-brand-type-card h3 {
    font-size: 18px;
  }

  .cream-brand-type-card p {
    font-size: 14px;
  }
}

/* PRODUCT PLANNING */
.cream-plan {
  padding: 100px 0;
  background: #f8fbff;
}

.cream-plan__inner {
  width: min(1200px, 90%);
  margin: 0 auto;
}

.cream-plan__heading {
  margin-bottom: 48px;
}

.cream-plan__label {
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: 14px;
}

.cream-plan__heading h2 {
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
  color: #222;
  margin-bottom: 20px;
}

.cream-plan__heading p {
  font-size: 16px;
  line-height: 2;
  color: #555;
}

.cream-plan__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}

.cream-plan-card {
  display: block;
  overflow: hidden;
  background: #fff;
  border: 1px solid #dbe9f7;
  border-radius: 18px;
  text-decoration: none;
  color: inherit;
  transition: all 0.3s ease;
}

.cream-plan-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 82, 159, 0.08);
}

.cream-plan-card__image {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.cream-plan-card__image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.cream-plan-card:hover .cream-plan-card__image img {
  transform: scale(1.04);
}

.cream-plan-card__body {
  position: relative;
  padding: 28px 24px 30px;
}

.cream-plan-card__body::before {
  content: "";
  display: block;
  width: 60px;
  height: 2px;
  background: #cbb89d;
  margin-bottom: 18px;
}

.cream-plan-card__body span {
  display: inline-block;
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 14px;
}

.cream-plan-card__body h3 {
  font-size: 20px;
  line-height: 1.5;
  color: #222;
  margin-bottom: 14px;
}

.cream-plan-card__body p {
  font-size: 15px;
  line-height: 1.9;
  color: #555;
}

@media (max-width: 1024px) {
  .cream-plan__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .cream-plan {
    padding: 70px 0;
  }

  .cream-plan__heading h2 {
    font-size: clamp(30px, 4vw, 40px);
    font-weight: 700;
  }

  .cream-plan__heading p {
    font-size: 15px;
  }

  .cream-plan__grid {
    grid-template-columns: 1fr;
  }
}

/* WHY CREAM OEM */
.cream-reason {
  padding: 100px 0;
  background: #fff;
}

.cream-reason__inner {
  width: min(1200px, 90%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 72px;
  align-items: start;
}

.cream-reason__heading {
  position: sticky;
  top: 120px;
}

.cream-reason__label {
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: 14px;
}

.cream-reason__heading h2 {
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 20px;
}

.cream-reason__heading p {
  font-size: 16px;
  line-height: 2;
  color: #555;
}

.cream-reason__points {
  display: grid;
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 28px 0 0;
}

.cream-reason__points li {
  position: relative;
  padding: 12px 18px 12px 42px;
  background: #f8fbff;
  border: 1px solid #dbe9f7;
  border-radius: 999px;
}

.cream-reason__points li::before {
  content: "✓";
  position: absolute;
  left: 18px;
  color: #00529f;
}

.cream-reason__list {
  display: grid;
  gap: 20px;
}

.cream-reason-item {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 24px;
  padding: 30px 32px;
  background: #f8fbff;
  border: 1px solid #dbe9f7;
  border-radius: 18px;
}

.cream-reason-item span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: #00529f;
  color: #fff;
  border-radius: 50%;
  font-size: 15px;
  font-weight: 700;
}

.cream-reason-item h3 {
  font-size: 20px;
  line-height: 1.5;
  margin-bottom: 10px;
}

.cream-reason-item p {
  font-size: 15px;
  line-height: 1.9;
  color: #555;
}

/* WHY CREAM OEM Responsive */

@media (max-width: 1024px) {
  .cream-reason__inner {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .cream-reason__heading {
    position: static;
  }
}

@media (max-width: 768px) {
  .cream-reason {
    padding: 70px 0;
  }

  .cream-reason__heading h2 {
    font-size: clamp(30px, 4vw, 40px);
    font-weight: 700;
  }

  .cream-reason__heading p {
    font-size: 15px;
  }

  .cream-reason-item {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 24px;
  }

  .cream-reason-item span {
    width: 48px;
    height: 48px;
  }

  .cream-reason-item h3 {
    font-size: 18px;
  }

  .cream-reason-item p {
    font-size: 14px;
  }

  .cream-reason__points li {
    border-radius: 14px;
    line-height: 1.6;
  }
}

/* CREAM DESIGN */
.cream-design {
  padding: 100px 0;
  background: #f8fbff;
}

.cream-design__inner {
  width: min(1200px, 90%);
  margin: 0 auto;
}

.cream-design__heading {
  margin-bottom: 50px;
}

.cream-design__label {
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: 14px;
}

.cream-design__heading h2 {
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 20px;
}

.cream-design__heading p {
  font-size: 16px;
  line-height: 2;
  color: #555;
}

.cream-design__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.cream-design-card {
  padding: 32px;
  background: #fff;
  border: 1px solid #dbe9f7;
  border-radius: 18px;
  transition: 0.3s;
}

.cream-design-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 82, 159, 0.08);
}

.cream-design-card span {
  display: inline-block;
  color: #cbb89d;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 16px;
}

.cream-design-card h3 {
  font-size: 20px;
  margin-bottom: 14px;
  line-height: 1.5;
}

.cream-design-card p {
  font-size: 15px;
  line-height: 1.9;
  color: #555;
}

@media (max-width: 1024px) {
  .cream-design__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .cream-design {
    padding: 70px 0;
  }

  .cream-design__heading h2 {
    font-size: clamp(30px, 4vw, 40px);
    font-weight: 700;
  }

  .cream-design__grid {
    grid-template-columns: 1fr;
  }
}

/* CONSULTATION */

.cream-consultation {
  padding: 100px 0;
  background: #fff;
}

.cream-consultation__inner {
  width: min(1200px, 90%);
  margin: auto;
}

.cream-consultation__heading {
  margin-bottom: 50px;
}

.cream-consultation__label {
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: 14px;
}

.cream-consultation__heading h2 {
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 20px;
}

.cream-consultation__heading p {
  font-size: 16px;
  line-height: 2;
  color: #555;
}

.cream-consultation__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.cream-consultation__item {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 24px 28px;
  border: 1px solid #dbe9f7;
  border-radius: 16px;
  background: #f8fbff;
}

.cream-consultation__item span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #00529f;
  color: #fff;
  font-weight: 700;
}

.cream-consultation__item p {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

@media (max-width: 768px) {
  .cream-consultation {
    padding: 70px 0;
  }

  .cream-consultation__heading h2 {
    font-size: clamp(30px, 4vw, 40px);
    font-weight: 700;
  }

  .cream-consultation__grid {
    grid-template-columns: 1fr;
  }
}

/* WHY QBI WORLD */
.cream-support {
  padding: 100px 0;
  background: #f8fbff;
}

.cream-support__inner {
  width: min(1200px, 90%);
  margin: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: start;
}

.cream-support__content {
  position: sticky;
  top: 120px;
  align-self: start;
}

.cream-support__label {
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: 14px;
}

.cream-support__content h2 {
  font-size: clamp(30px, 4vw, 38px);
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 24px;
}

.cream-support__lead {
  font-size: 16px;
  line-height: 2;
  color: #555;
  margin-bottom: 32px;
}

.cream-support__points {
  display: grid;
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.cream-support__points li {
  position: relative;
  padding-left: 30px;
  font-size: 15px;
  font-weight: 600;
}

.cream-support__points li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #00529f;
  font-weight: 700;
}

.cream-support__cards {
  display: grid;
  gap: 20px;
}

.cream-support-card {
  padding: 30px;
  background: #fff;
  border: 1px solid #dbe9f7;
  border-radius: 18px;
  transition: 0.3s;
}

.cream-support-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(0, 82, 159, 0.08);
}

.cream-support-card span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 16px;
  background: #cbb89d;
}

.cream-support-card h3 {
  font-size: 22px;
  line-height: 1.5;
  margin-bottom: 12px;
}

.cream-support-card p {
  font-size: 15px;
  line-height: 1.9;
  color: #555;
}

@media (max-width: 1024px) {
  .cream-support__inner {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .cream-support__content {
    position: static;
  }
}

@media (max-width: 768px) {
  .cream-support {
    padding: 70px 0;
  }

  .cream-support__content h2 {
    font-size: clamp(30px, 4vw, 40px);
    font-weight: 700;
  }

  .cream-support__lead {
    font-size: 15px;
  }

  .cream-support-card {
    padding: 24px;
  }

  .cream-support-card h3 {
    font-size: 18px;
  }
}

/* BRAND DEVELOPMENT */
.cream-visual {
  position: relative;
}

.cream-visual__image {
  height: 520px;
}

.cream-visual__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cream-visual__content {
  max-width: 700px;
  margin: -120px auto 0;
  background: #fff;
  padding: 50px;
  position: relative;
  z-index: 2;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
}

.cream-visual__label {
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: 14px;
}

.cream-visual__content h2 {
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 20px;
}

.cream-visual__lead {
  font-size: 16px;
  line-height: 2;
  color: #555;
}

@media (max-width: 768px) {
  .cream-visual__image {
    height: 320px;
  }

  .cream-visual__content {
    margin: -60px 20px 0;
    padding: 30px;
  }

  .cream-visual__content h2 {
    font-size: 28px;
  }
}

/* OEM FLOW */
.cream-flow {
  padding: 100px 0;
  background: linear-gradient(135deg, #f8fbff 0%, #edf4fb 100%);
}

.cream-flow__inner {
  width: min(1200px, 90%);
  margin: 0 auto;
}

.cream-flow__heading {
  margin-bottom: 56px;
}

.cream-flow__label {
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: 14px;
}

.cream-flow__heading h2 {
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
  color: #222;
  margin-bottom: 20px;
}

.cream-flow__heading p {
  font-size: 16px;
  line-height: 2;
  color: #555;
}

/* STEP */
.cream-flow__steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  align-items: stretch;
}

.cream-flow-step {
  position: relative;
  padding: 32px 24px;
  background: #fff;
  border: 1px solid #dbe9f7;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0, 82, 159, 0.04);
  transition: 0.3s;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.cream-flow-step:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 82, 159, 0.08);
}

.cream-flow-step::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -12px;
  width: 14px;
  height: 14px;
  border-top: 2px solid #cbb89d;
  border-right: 2px solid #cbb89d;
  transform: translateY(-50%) rotate(45deg);
}

.cream-flow-step:last-child::after {
  display: none;
}

.cream-flow-step span {
  display: inline-block;
  color: #cbb89d;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 18px;
}

.cream-flow-step h3 {
  font-size: 20px;
  line-height: 1.5;
  color: #222;
  margin-bottom: 14px;
}

.cream-flow-step p {
  font-size: 15px;
  line-height: 1.9;
  color: #555;
}

.cream-flow-step:nth-child(3) {
  background: #fcfaf6;
  border-color: #e4d6bd;
}

/* LINKS */
.cream-flow__links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 40px;
}

.cream-flow__links a {
  display: inline-flex;
  align-items: center;
  padding: 12px 18px;
  background: #fff;
  border: 1px solid #00529f;
  border-radius: 999px;
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: 0.3s;
}

.cream-flow__links a::after {
  content: "→";
  margin-left: 8px;
}

.cream-flow__links a:hover {
  background: #00529f;
  color: #fff;
}

/* TABLET */
@media (max-width: 1100px) {
  .cream-flow__steps {
    grid-template-columns: repeat(2, 1fr);
  }

  .cream-flow-step::after {
    display: none;
  }
}

/* SP */
@media (max-width: 768px) {
  .cream-flow {
    padding: 70px 0;
  }

  .cream-flow__heading h2 {
    font-size: 28px;
  }

  .cream-flow__heading p {
    font-size: 15px;
  }

  .cream-flow__steps {
    grid-template-columns: 1fr;
  }

  .cream-flow-step {
    padding: 28px 24px;
  }

  .cream-flow__links {
    flex-direction: column;
  }

  .cream-flow__links a {
    width: 100%;
    justify-content: center;
    border-radius: 10px;
  }
}

/* RELATED OEM */
.cream-related {
  padding: 100px 0;
  background: #fff;
}

.cream-related__inner {
  width: min(1200px, 90%);
  margin: auto;
}

.cream-related__heading {
  margin-bottom: 50px;
}

.cream-related__label {
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: 14px;
}

.cream-related__heading h2 {
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 20px;
}

.cream-related__heading p {
  font-size: 16px;
  line-height: 2;
  color: #555;
}

.cream-related__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.cream-related-card {
  display: block;
  padding: 32px 28px;
  background: #f8fbff;
  border: 1px solid #dbe9f7;
  border-radius: 18px;
  text-decoration: none;
  color: inherit;
  transition: 0.3s;
}

.cream-related-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 82, 159, 0.08);
}

.cream-related-card h3 {
  font-size: 22px;
  margin-bottom: 14px;
}

.cream-related-card p {
  font-size: 15px;
  line-height: 1.9;
  color: #555;
  margin-bottom: 20px;
}

.cream-related-card span {
  color: #00529f;
  font-weight: 700;
}

/* RELATED OEM Responsive */

@media (max-width: 1100px) {
  .cream-related__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .cream-related {
    padding: 70px 0;
  }

  .cream-related__heading h2 {
    font-size: clamp(30px, 4vw, 40px);
    font-weight: 700;
  }

  .cream-related__heading p {
    font-size: 15px;
  }

  .cream-related__grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .cream-related-card {
    padding: 24px;
  }

  .cream-related-card h3 {
    font-size: 18px;
  }

  .cream-related-card p {
    font-size: 14px;
  }
}

/* CTA */
.cream-cta {
  position: relative;
  overflow: hidden;
  padding: 120px 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.15)),
    url("../../assets/img/lineup/facecare/cream/cta-bg.webp");
  background-size: cover;
  background-position: center;
}

.cream-cta__inner {
  position: relative;
  z-index: 1;
  width: min(900px, 90%);
  margin: auto;
  padding: 50px 24px;
  text-align: center;
  border-radius: 32px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.75);
  box-shadow: 0 20px 50px rgba(0, 82, 159, 0.08);
}

.cream-cta__label {
  margin-bottom: 16px;
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.cream-cta h2 {
  margin: 0 0 24px;
  color: #222;
  font-size: 40px;
  line-height: 1.5;
  font-weight: 700;
}

.cream-cta__lead {
  max-width: 720px;
  margin: 0 auto 36px;
  color: #333;
  font-size: 16px;
  line-height: 2;
}

.cream-cta__buttons {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.cream-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 280px;
  padding: 18px 30px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  transition: 0.3s;
}

.cream-cta__btn--primary {
  background: #00529f;
  color: #fff;
}

.cream-cta__btn--primary:hover {
  background: #003f7c;
}

.cream-cta__btn--secondary {
  background: #fff;
  color: #00529f;
  border: 1px solid #00529f;
}

.cream-cta__btn--secondary:hover {
  background: #f5f9ff;
}

@media (max-width: 768px) {
  .cream-cta {
    padding: 70px 0;
  }

  .cream-cta__inner {
    width: min(100% - 40px, 1200px);
    padding: 50px 24px;
  }

  .cream-cta h2 {
    font-size: 30px;
  }

  .cream-cta__lead {
    font-size: 15px;
    line-height: 1.9;
  }

  .cream-cta__buttons {
    flex-direction: column;
  }

  .cream-cta__btn {
    width: 100%;
    min-width: auto;
  }
}

/* lineup/facecare/face-mask/ */
/* FACE MASK OEM FV */
.mask-fv {
  position: relative;
  overflow: hidden;
  padding: 160px 0 100px;
  background:
    radial-gradient(
      circle at 82% 18%,
      rgba(173, 214, 255, 0.34) 0%,
      rgba(173, 214, 255, 0) 34%
    ),
    radial-gradient(
      circle at 14% 84%,
      rgba(215, 240, 238, 0.38) 0%,
      rgba(215, 240, 238, 0) 40%
    ),
    linear-gradient(135deg, #f8fbff 0%, #edf7fb 54%, #ffffff 100%);
}

.mask-fv__bg-text {
  position: absolute;
  right: -40px;
  bottom: 18px;
  color: rgba(0, 82, 159, 0.055);
  font-size: clamp(60px, 10vw, 150px);
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}

.mask-fv__inner {
  position: relative;
  z-index: 1;
  width: min(1200px, 90%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.88fr 1.12fr;
  gap: 62px;
  align-items: center;
}

.mask-fv__content {
  max-width: 590px;
}

.mask-fv__label {
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  margin-bottom: 24px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid #d8e7f7;
  border-radius: 999px;
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 8px 24px rgba(0, 82, 159, 0.06);
}

.mask-fv__title {
  margin: 0 0 24px;
  color: #1f2f45;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.02em;
}

.mask-fv__lead {
  margin: 0 0 30px;
  color: #526776;
  font-size: 17px;
  line-height: 2;
}

.mask-fv__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 0 0 36px;
}

.mask-fv__tags li {
  display: inline-flex;
  align-items: center;
  padding: 10px 16px;
  background: #fff;
  border: 1px solid #dbe9f7;
  border-radius: 999px;
  color: #333;
  font-size: 14px;
  font-weight: 600;
}

.mask-fv__tags li::before {
  content: "✓";
  margin-right: 7px;
  color: #00529f;
  font-weight: 700;
}

.mask-fv__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.mask-fv__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 260px;
  padding: 18px 30px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.3s ease;
}

.mask-fv__btn--primary {
  background: #00529f;
  color: #fff;
  box-shadow: 0 14px 28px rgba(0, 82, 159, 0.18);
}

.mask-fv__btn--primary:hover {
  background: #003f7c;
  transform: translateY(-2px);
}

.mask-fv__btn--secondary {
  background: rgba(255, 255, 255, 0.92);
  color: #00529f;
  border: 1px solid #00529f;
}

.mask-fv__btn--secondary:hover {
  background: #f5f9ff;
  transform: translateY(-2px);
}

.mask-fv__visual {
  position: relative;
}

.mask-fv__image {
  position: relative;
  overflow: hidden;
  border-radius: 32px;
  box-shadow: 0 28px 70px rgba(0, 82, 159, 0.15);
}

.mask-fv__image::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(135deg, rgba(0, 82, 159, 0.08), rgba(255, 255, 255, 0) 54%),
    linear-gradient(0deg, rgba(240, 252, 250, 0.22), rgba(255, 255, 255, 0) 56%);
  pointer-events: none;
}

.mask-fv__image img {
  width: 100%;
  aspect-ratio: 16 / 13;
  display: block;
  object-fit: cover;
}

@media (max-width: 1024px) {
  .mask-fv__inner {
    grid-template-columns: 1fr;
    gap: 46px;
  }

  .mask-fv__content {
    max-width: 760px;
  }

  .mask-fv__visual {
    max-width: 760px;
  }
}

@media (max-width: 768px) {
  .mask-fv {
    padding: 120px 0 70px;
  }

  .mask-fv__inner {
    width: min(100% - 40px, 1200px);
    gap: 34px;
  }

  .mask-fv__title {
    font-size: clamp(30px, 4vw, 40px);
    font-weight: 700;
    line-height: 1.55;
  }

  .mask-fv__lead {
    font-size: 15px;
    line-height: 1.9;
  }

  .mask-fv__tags {
    gap: 10px;
    margin-bottom: 30px;
  }

  .mask-fv__tags li {
    padding: 9px 13px;
    font-size: 13px;
  }

  .mask-fv__buttons {
    flex-direction: column;
  }

  .mask-fv__btn {
    width: 100%;
    min-width: auto;
    padding: 17px 22px;
  }

  .mask-fv__image {
    border-radius: 22px;
  }

  .mask-fv__image img {
    aspect-ratio: 4 / 3;
  }

  .mask-fv__bg-text {
    display: none;
  }
}

/* FACE MASK BRAND */
.mask-brand {
  padding: 110px 0;
  background: #fff;
}

.mask-brand__inner {
  width: min(1200px, 90%);
  margin: 0 auto;
}

.mask-brand__head {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: 70px;
  align-items: center;
  margin-bottom: 56px;
}

.mask-brand__text {
  max-width: 620px;
}

.mask-brand__label {
  margin-bottom: 14px;
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.mask-brand__text h2 {
  margin: 0 0 22px;
  color: #222;
  font-size: clamp(30px, 4vw, 40px);
  line-height: 1.5;
  font-weight: 700;
}

.mask-brand__text p {
  margin: 0;
  color: #555;
  font-size: 16px;
  line-height: 2;
}

.mask-brand__image {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  box-shadow: 0 24px 58px rgba(0, 82, 159, 0.12);
}

.mask-brand__image::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(135deg, rgba(0, 82, 159, 0.08), rgba(255, 255, 255, 0) 54%),
    linear-gradient(0deg, rgba(240, 252, 250, 0.24), rgba(255, 255, 255, 0) 55%);
  pointer-events: none;
}

.mask-brand__image img {
  width: 100%;
  aspect-ratio: 16 / 10;
  display: block;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.mask-brand__image:hover img {
  transform: scale(1.04);
}

.mask-brand__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.mask-brand-card {
  position: relative;
  overflow: hidden;
  padding: 32px 26px;
  background: linear-gradient(145deg, #ffffff 0%, #f8fbff 64%, #f2fbfa 100%);
  border: 1px solid #dbe9f7;
  border-radius: 22px;
  transition: all 0.3s ease;
}

.mask-brand-card::after {
  content: "";
  position: absolute;
  right: -38px;
  bottom: -38px;
  width: 126px;
  height: 126px;
  background: rgba(173, 214, 255, 0.15);
  border-radius: 50%;
}

.mask-brand-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 38px rgba(0, 82, 159, 0.08);
}

.mask-brand-card__tag {
  position: relative;
  z-index: 1;
  display: inline-block;
  margin-bottom: 16px;
  color: #00529f;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.mask-brand-card h3 {
  position: relative;
  z-index: 1;
  margin: 0 0 14px;
  color: #222;
  font-size: 21px;
  line-height: 1.5;
  font-weight: 700;
}

.mask-brand-card p {
  position: relative;
  z-index: 1;
  margin: 0;
  color: #555;
  font-size: 15px;
  line-height: 1.9;
}

@media (max-width: 1024px) {
  .mask-brand__head {
    grid-template-columns: 1fr;
    gap: 44px;
  }

  .mask-brand__text {
    max-width: 760px;
  }

  .mask-brand__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .mask-brand {
    padding: 70px 0;
  }

  .mask-brand__inner {
    width: min(100% - 40px, 1200px);
  }

  .mask-brand__head {
    gap: 32px;
    margin-bottom: 40px;
  }

  .mask-brand__text h2 {
    font-size: clamp(30px, 4vw, 40px);
    font-weight: 700;
  }

  .mask-brand__text p {
    font-size: 15px;
    line-height: 1.9;
  }

  .mask-brand__image {
    border-radius: 22px;
  }

  .mask-brand__image img {
    aspect-ratio: 4 / 3;
  }

  .mask-brand__grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .mask-brand-card {
    padding: 28px 24px;
  }

  .mask-brand-card h3 {
    font-size: 19px;
  }
}

/* WHY FACE MASK */
.mask-reason {
  padding: 110px 0;
  background: linear-gradient(135deg, #f8fbff 0%, #eef7fb 55%, #ffffff 100%);
}

.mask-reason__inner {
  width: min(1200px, 90%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 70px;
  align-items: start;
}

.mask-reason__image {
  position: sticky;
  top: 120px;
  overflow: hidden;
  border-radius: 30px;
  box-shadow: 0 25px 60px rgba(0, 82, 159, 0.12);
  align-self: start;
}

.mask-reason__image img {
  width: 100%;
  display: block;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.mask-reason__label {
  margin-bottom: 14px;
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.mask-reason__content h2 {
  margin: 0 0 24px;
  color: #222;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
}

.mask-reason__lead {
  margin: 0 0 36px;
  color: #555;
  font-size: 16px;
  line-height: 2;
}

.mask-reason__list {
  display: grid;
  gap: 18px;
}

.mask-reason-item {
  padding: 24px 28px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #dbe9f7;
  border-radius: 20px;
  transition: 0.3s;
}

.mask-reason-item:hover {
  transform: translateX(5px);
  box-shadow: 0 16px 36px rgba(0, 82, 159, 0.08);
}

.mask-reason-item span {
  display: inline-block;
  margin-bottom: 8px;
  color: #00529f;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.mask-reason-item h3 {
  margin: 0 0 8px;
  color: #222;
  font-size: 21px;
  line-height: 1.5;
}

.mask-reason-item p {
  margin: 0;
  color: #555;
  font-size: 15px;
  line-height: 1.9;
}

@media (max-width: 1024px) {
  .mask-reason__inner {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .mask-reason__image {
    position: static;
  }

  .mask-reason__image img {
    aspect-ratio: 16/10;
  }
}

@media (max-width: 768px) {
  .mask-reason {
    padding: 70px 0;
  }

  .mask-reason__inner {
    width: min(100% - 40px, 1200px);
    gap: 36px;
  }

  .mask-reason__content h2 {
    font-size: clamp(30px, 4vw, 40px);
    font-weight: 700;
  }

  .mask-reason__lead {
    font-size: 15px;
    line-height: 1.9;
  }

  .mask-reason__image {
    border-radius: 22px;
  }

  .mask-reason-item {
    padding: 22px;
  }

  .mask-reason-item h3 {
    font-size: 18px;
  }
}

/* PRODUCT PLANNING */
.mask-plan {
  padding: 110px 0;
  background: #fff;
}

.mask-plan__inner {
  width: min(1200px, 90%);
  margin: 0 auto;
}

.mask-plan__heading {
  margin-bottom: 60px;
}

.mask-plan__label {
  margin-bottom: 14px;
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.mask-plan__heading h2 {
  margin: 0 0 22px;
  color: #222;
  font-size: clamp(30px, 4vw, 40px);
  line-height: 1.5;
  font-weight: 700;
}

.mask-plan__heading p {
  margin: 0;
  color: #555;
  font-size: 16px;
  line-height: 2;
}

.mask-plan__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}

.mask-plan-card {
  overflow: hidden;
  background: #fff;
  border: 1px solid #dbe9f7;
  border-radius: 26px;
  transition: 0.3s ease;
  box-shadow: 0 10px 28px rgba(0, 82, 159, 0.04);
}

.mask-plan-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 44px rgba(0, 82, 159, 0.09);
}

.mask-plan-card__image {
  overflow: hidden;
  aspect-ratio: 16 / 10;
}

.mask-plan-card__image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: 0.6s ease;
}

.mask-plan-card:hover img {
  transform: scale(1.05);
}

.mask-plan-card__body {
  padding: 30px;
  background: linear-gradient(145deg, #ffffff 0%, #f8fbff 70%, #f2fbfa 100%);
}

.mask-plan-card__tag {
  display: inline-block;
  margin: 0 0 14px;
  padding: 8px 14px;
  background: #eef6ff;
  color: #00529f;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.mask-plan-card__body h3 {
  margin: 0 0 14px;
  color: #222;
  font-size: 24px;
  line-height: 1.5;
  font-weight: 700;
}

.mask-plan-card__body p {
  margin: 0;
  color: #555;
  font-size: 15px;
  line-height: 1.9;
}

@media (max-width: 768px) {
  .mask-plan {
    padding: 70px 0;
  }

  .mask-plan__inner {
    width: min(100% - 40px, 1200px);
  }

  .mask-plan__heading {
    margin-bottom: 40px;
  }

  .mask-plan__heading h2 {
    font-size: clamp(30px, 4vw, 40px);
    font-weight: 700;
  }

  .mask-plan__heading p {
    font-size: 15px;
    line-height: 1.9;
  }

  .mask-plan__grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .mask-plan-card {
    border-radius: 22px;
  }

  .mask-plan-card__image {
    aspect-ratio: 4 / 3;
  }

  .mask-plan-card__body {
    padding: 24px;
  }

  .mask-plan-card__body h3 {
    font-size: 20px;
  }
}

/* CONSULTATION */
.mask-consultation {
  padding: 110px 0;
  background: #fff;
}

.mask-consultation__inner {
  width: min(1200px, 90%);
  margin: 0 auto;
}

.mask-consultation__heading {
  margin-bottom: 60px;
}

.mask-consultation__label {
  margin-bottom: 14px;
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.mask-consultation__heading h2 {
  margin: 0 0 22px;
  color: #222;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
}

.mask-consultation__heading p {
  margin: 0;
  color: #555;
  font-size: 16px;
  line-height: 2;
}

.mask-consultation__content {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 56px;
  align-items: start;
}

.mask-consultation__image {
  position: sticky;
  top: 120px;
  overflow: hidden;
  border-radius: 28px;
  box-shadow: 0 24px 60px rgba(0, 82, 159, 0.12);
}

.mask-consultation__image img {
  width: 100%;
  display: block;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.mask-consultation__list {
  display: grid;
  gap: 18px;
}

.mask-consultation-item {
  padding: 28px 30px;
  background: #fff;
  border: 1px solid #dbe9f7;
  border-radius: 22px;
  transition: 0.3s;
}

.mask-consultation-item:hover {
  transform: translateX(6px);
  box-shadow: 0 16px 36px rgba(0, 82, 159, 0.08);
}

.mask-consultation-item h3 {
  margin: 0 0 10px;
  color: #222;
  font-size: 22px;
  line-height: 1.5;
}

.mask-consultation-item p {
  margin: 0;
  color: #555;
  font-size: 15px;
  line-height: 1.9;
}

@media (max-width: 1024px) {
  .mask-consultation__content {
    grid-template-columns: 1fr;
  }

  .mask-consultation__image {
    position: static;
  }

  .mask-consultation__image img {
    aspect-ratio: 16 / 10;
  }
}

@media (max-width: 768px) {
  .mask-consultation {
    padding: 70px 0;
  }

  .mask-consultation__inner {
    width: min(100% - 40px, 1200px);
  }

  .mask-consultation__heading {
    margin-bottom: 40px;
  }

  .mask-consultation__heading h2 {
    font-size: clamp(30px, 4vw, 40px);
    font-weight: 700;
  }

  .mask-consultation__content {
    gap: 30px;
  }

  .mask-consultation__image {
    border-radius: 22px;
  }

  .mask-consultation-item {
    padding: 24px;
  }

  .mask-consultation-item h3 {
    font-size: 18px;
  }
}

/* WHY QBI WORLD */
.mask-strength {
  position: relative;
  padding: 120px 0;
  background:
    radial-gradient(
      circle at 18% 18%,
      rgba(173, 214, 255, 0.24) 0%,
      rgba(173, 214, 255, 0) 34%
    ),
    radial-gradient(
      circle at 88% 82%,
      rgba(198, 235, 230, 0.22) 0%,
      rgba(198, 235, 230, 0) 38%
    ),
    linear-gradient(135deg, #f8fbff 0%, #eef7fb 58%, #ffffff 100%);
}

.mask-strength__inner {
  width: min(1200px, 90%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 72px;
  align-items: center;
}

.mask-strength__message {
  max-width: 560px;
  position: sticky;
  top: 120px;
  align-self: start;
}

.mask-strength__label {
  margin-bottom: 14px;
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.mask-strength__message h2 {
  margin: 0 0 22px;
  color: #222;
  font-size: clamp(30px, 4vw, 40px);
  line-height: 1.5;
  font-weight: 700;
}

.mask-strength__message > p {
  margin: 0 0 34px;
  color: #555;
  font-size: 16px;
  line-height: 2;
}

.mask-strength__box {
  position: relative;
  overflow: hidden;
  padding: 32px 34px;
  background: #00529f;
  color: #fff;
  border-radius: 24px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.7;
  box-shadow: 0 20px 42px rgba(0, 82, 159, 0.18);
}

.mask-strength__box::after {
  content: "";
  position: absolute;
  right: -24px;
  bottom: -28px;
  width: 110px;
  height: 110px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 50%;
}

.mask-strength__list {
  display: grid;
  gap: 20px;
}

.mask-strength-item {
  position: relative;
  overflow: hidden;
  padding: 28px 30px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid #dbe9f7;
  border-radius: 22px;
  box-shadow: 0 10px 28px rgba(0, 82, 159, 0.04);
  transition: 0.3s ease;
}

.mask-strength-item::after {
  content: "";
  position: absolute;
  right: -42px;
  bottom: -42px;
  width: 126px;
  height: 126px;
  background: rgba(173, 214, 255, 0.12);
  border-radius: 50%;
}

.mask-strength-item:hover {
  transform: translateX(6px);
  box-shadow: 0 18px 42px rgba(0, 82, 159, 0.09);
}

.mask-strength-item span {
  position: relative;
  z-index: 1;
  display: inline-block;
  margin-bottom: 10px;
  color: #00529f;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.mask-strength-item h3 {
  position: relative;
  z-index: 1;
  margin: 0 0 10px;
  color: #222;
  font-size: 22px;
  line-height: 1.5;
  font-weight: 700;
}

.mask-strength-item p {
  position: relative;
  z-index: 1;
  margin: 0;
  color: #555;
  font-size: 15px;
  line-height: 1.9;
}

@media (max-width: 1024px) {
  .mask-strength__inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .mask-strength__message {
    max-width: 760px;
    position: static;
  }
}

@media (max-width: 768px) {
  .mask-strength {
    padding: 70px 0;
  }

  .mask-strength__inner {
    width: min(100% - 40px, 1200px);
    gap: 38px;
  }

  .mask-strength__message h2 {
    font-size: clamp(30px, 4vw, 40px);
    font-weight: 700;
  }

  .mask-strength__message > p {
    font-size: 15px;
    line-height: 1.9;
  }

  .mask-strength__box {
    padding: 26px 24px;
    border-radius: 20px;
    font-size: 21px;
  }

  .mask-strength-item {
    padding: 24px;
  }

  .mask-strength-item h3 {
    font-size: 19px;
  }

  .mask-strength-item p {
    font-size: 14px;
  }
}

/* CTA */
.mask-cta {
  position: relative;
  overflow: hidden;
  padding: 120px 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)),
    url("../../assets/img/lineup/facecare/face-mask/cta-bg.webp");
  background-size: cover;
  background-position: center;
}

.mask-cta__inner {
  position: relative;
  z-index: 1;
  width: min(900px, 90%);
  margin: auto;
  text-align: center;
  background: rgba(255, 255, 255, 0);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 32px;
  padding: 50px 24px;
  box-shadow: 0 20px 50px rgba(0, 82, 159, 0.08);
}

.mask-cta__label {
  margin-bottom: 16px;
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.mask-cta h2 {
  margin: 0 0 24px;
  color: #222;
  font-size: 30px;
  line-height: 1.5;
  font-weight: 700;
}

.mask-cta__text {
  max-width: 700px;
  margin: 0 auto 36px;
  color: #222;
  font-size: 16px;
  line-height: 2;
}

.mask-cta__buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
}

.mask-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 280px;
  padding: 18px 30px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  transition: 0.3s ease;
}

.mask-cta__btn--primary {
  background: #00529f;
  color: #fff;
}

.mask-cta__btn--primary:hover {
  background: #003f7c;
}

.mask-cta__btn--secondary {
  background: #fff;
  color: #00529f;
  border: 1px solid #00529f;
}

.mask-cta__btn--secondary:hover {
  background: #f5f9ff;
}

@media (max-width: 768px) {
  .mask-cta {
    padding: 70px 0;
  }

  .mask-cta__inner {
    width: min(100% - 40px, 1200px);
    padding: 50px 24px;
  }

  .mask-cta h2 {
    font-size: 30px;
  }

  .mask-cta__text {
    font-size: 15px;
    line-height: 1.9;
  }

  .mask-cta__buttons {
    flex-direction: column;
  }

  .mask-cta__btn {
    width: 100%;
    min-width: auto;
  }
}

/* /lineup/facecare/all-in-one/ */
/* All in One FV */
.allinone-fv {
  position: relative;
  overflow: hidden;
  padding: 160px 0 90px;
  background:
    radial-gradient(
      circle at 82% 18%,
      rgba(173, 214, 255, 0.45) 0%,
      rgba(173, 214, 255, 0) 34%
    ),
    radial-gradient(
      circle at 70% 86%,
      rgba(255, 240, 220, 0.45) 0%,
      rgba(255, 240, 220, 0) 40%
    ),
    linear-gradient(135deg, #f8fbff 0%, #edf5fc 60%, #ffffff 100%);
}

.allinone-fv__inner {
  width: min(1200px, 90%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 60px;
  align-items: center;
}

.allinone-fv__content {
  max-width: 560px;
}

.allinone-fv__label {
  display: inline-block;
  padding: 8px 18px;
  margin-bottom: 24px;
  background: #eaf4ff;
  color: #00529f;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
}

.allinone-fv__title {
  margin: 0 0 24px;
  color: #222;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.02em;
}

.allinone-fv__lead {
  margin: 0 0 32px;
  color: #555;
  font-size: 17px;
  line-height: 2;
}

.allinone-fv__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 0 0 36px;
}

.allinone-fv__tags li {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid #d8e7f7;
  border-radius: 999px;
  color: #333;
  font-size: 14px;
  font-weight: 600;
}

.allinone-fv__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.allinone-fv__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 260px;
  padding: 18px 30px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  text-decoration: none;
  transition: all 0.3s ease;
}

.allinone-fv__btn--primary {
  background: #00529f;
  color: #fff;
}

.allinone-fv__btn--primary:hover {
  background: #003f7c;
}

.allinone-fv__btn--secondary {
  background: #fff;
  color: #00529f;
  border: 1px solid #00529f;
}

.allinone-fv__btn--secondary:hover {
  background: #f5f9ff;
}

.allinone-fv__image {
  overflow: hidden;
  border-radius: 30px;
  box-shadow: 0 26px 64px rgba(0, 82, 159, 0.16);
}

.allinone-fv__image img {
  width: 100%;
  display: block;
  aspect-ratio: 16 / 11;
  object-fit: cover;
}

.allinone-fv__bg-text {
  position: absolute;
  right: -40px;
  bottom: 20px;
  color: rgba(0, 82, 159, 0.05);
  font-size: clamp(70px, 10vw, 150px);
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}

@media (max-width: 1024px) {
  .allinone-fv__inner {
    grid-template-columns: 1fr;
  }

  .allinone-fv__content {
    max-width: 100%;
  }

  .allinone-fv__title {
    font-size: clamp(30px, 4vw, 40px);
    font-weight: 700;
  }
}

@media (max-width: 768px) {
  .allinone-fv {
    padding: 120px 0 60px;
  }

  .allinone-fv__inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .allinone-fv__title {
    font-size: clamp(30px, 4vw, 40px);
    font-weight: 700;
    line-height: 1.5;
  }

  .allinone-fv__lead {
    font-size: 15px;
    line-height: 1.9;
  }

  .allinone-fv__buttons {
    flex-direction: column;
  }

  .allinone-fv__btn {
    width: 100%;
    min-width: auto;
  }

  .allinone-fv__image {
    border-radius: 22px;
  }

  .allinone-fv__image img {
    aspect-ratio: 4 / 3;
  }

  .allinone-fv__bg-text {
    display: none;
  }
}

/* All in One Brand Type */
.allinone-brand-type {
  padding: 100px 0;
  background: #fff;
}

.allinone-brand-type__inner {
  width: min(1200px, 90%);
  margin: 0 auto;
}

.allinone-brand-type__heading {
  margin-bottom: 48px;
}

.allinone-brand-type__label {
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: 14px;
}

.allinone-brand-type__heading h2 {
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
  color: #222;
  margin-bottom: 20px;
}

.allinone-brand-type__heading p {
  font-size: 16px;
  line-height: 2;
  color: #555;
}

.allinone-brand-type__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.allinone-brand-type-card {
  position: relative;
  min-height: 246px;
  padding: 32px 28px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  border: 1px solid #dbe9f7;
  border-radius: 18px;
  transition: 0.3s;
}

.allinone-brand-type-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 28px;
  width: 48px;
  height: 3px;
  background: #00529f;
  border-radius: 999px;
}

.allinone-brand-type-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 82, 159, 0.08);
}

.allinone-brand-type-card h3 {
  font-size: 20px;
  line-height: 1.6;
  color: #222;
  margin-bottom: 18px;
  padding-top: 10px;
}

.allinone-brand-type-card p {
  font-size: 15px;
  line-height: 1.9;
  color: #555;
}

@media (max-width: 1024px) {
  .allinone-brand-type__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .allinone-brand-type-card {
    min-height: 220px;
  }
}

@media (max-width: 768px) {
  .allinone-brand-type {
    padding: 70px 0;
  }

  .allinone-brand-type__inner {
    width: min(100% - 40px, 1200px);
  }

  .allinone-brand-type__heading {
    margin-bottom: 38px;
  }

  .allinone-brand-type__heading h2 {
    font-size: clamp(30px, 4vw, 40px);
    font-weight: 700;
  }

  .allinone-brand-type__heading p {
    font-size: 15px;
  }

  .allinone-brand-type__grid {
    grid-template-columns: 1fr;
  }

  .allinone-brand-type-card {
    min-height: auto;
    padding: 28px 24px;
  }

  .allinone-brand-type-card h3 {
    font-size: 19px;
  }
}

/* All in One Plan */
.allinone-plan {
  padding: 100px 0;
  background: #f8fbff;
}

.allinone-plan__inner {
  width: min(1200px, 90%);
  margin: 0 auto;
}

.allinone-plan__heading {
  margin-bottom: 48px;
}

.allinone-plan__label {
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: 14px;
}

.allinone-plan__heading h2 {
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
  color: #222;
  margin-bottom: 20px;
}

.allinone-plan__heading p {
  font-size: 16px;
  line-height: 2;
  color: #555;
}

.allinone-plan__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}

.allinone-plan-card {
  display: block;
  overflow: hidden;
  background: #fff;
  border: 1px solid #dbe9f7;
  border-radius: 18px;
  text-decoration: none;
  color: inherit;
  transition: 0.3s;
}

.allinone-plan-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 82, 159, 0.08);
}

.allinone-plan-card__image {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #edf4fb;
}

.allinone-plan-card__image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.allinone-plan-card:hover .allinone-plan-card__image img {
  transform: scale(1.04);
}

.allinone-plan-card__body {
  padding: 28px 24px 30px;
}

.allinone-plan-card__body span {
  display: inline-block;
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 14px;
}

.allinone-plan-card__body h3 {
  font-size: 20px;
  line-height: 1.5;
  color: #222;
  margin-bottom: 14px;
}

.allinone-plan-card__body p {
  font-size: 15px;
  line-height: 1.9;
  color: #555;
}

@media (max-width: 768px) {
  .allinone-plan {
    padding: 70px 0;
  }

  .allinone-plan__inner {
    width: min(100% - 40px, 1200px);
  }

  .allinone-plan__heading h2 {
    font-size: clamp(30px, 4vw, 40px);
    font-weight: 700;
  }

  .allinone-plan__heading p {
    font-size: 15px;
  }

  .allinone-plan__grid {
    grid-template-columns: 1fr;
  }

  .allinone-plan-card__body {
    padding: 26px 22px 28px;
  }
}

/* WHY ALL IN ONE */
.allinone-reason {
  padding: 100px 0;
  background: #fff;
}

.allinone-reason__inner {
  width: min(1200px, 90%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 72px;
  align-items: start;
}

.allinone-reason__heading {
  position: sticky;
  top: 120px;
}

.allinone-reason__label {
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: 14px;
}

.allinone-reason__heading h2 {
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
  color: #222;
  margin-bottom: 20px;
}

.allinone-reason__heading p {
  font-size: 16px;
  line-height: 2;
  color: #555;
}

.allinone-reason__points {
  display: grid;
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 28px 0 0;
}

.allinone-reason__points li {
  position: relative;
  padding: 12px 18px 12px 42px;
  background: #f8fbff;
  border: 1px solid #dbe9f7;
  border-radius: 999px;
  color: #333;
  font-size: 15px;
  font-weight: 600;
}

.allinone-reason__points li::before {
  content: "✓";
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: #00529f;
}

.allinone-reason__list {
  display: grid;
  gap: 20px;
}

.allinone-reason-item {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 24px;
  padding: 30px 32px;
  background: #f8fbff;
  border: 1px solid #dbe9f7;
  border-radius: 18px;
}

.allinone-reason-item span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: #00529f;
  color: #fff;
  border-radius: 50%;
  font-size: 15px;
  font-weight: 700;
}

.allinone-reason-item h3 {
  font-size: 20px;
  margin-bottom: 10px;
}

.allinone-reason-item p {
  font-size: 15px;
  line-height: 1.9;
  color: #555;
}

@media (max-width: 1024px) {
  .allinone-reason__inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .allinone-reason__heading {
    position: static;
  }
}

@media (max-width: 768px) {
  .allinone-reason {
    padding: 70px 0;
  }

  .allinone-reason__heading h2 {
    font-size: clamp(30px, 4vw, 40px);
    font-weight: 700;
  }

  .allinone-reason__heading p {
    font-size: 15px;
  }

  .allinone-reason-item {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 26px 24px;
  }

  .allinone-reason-item span {
    width: 48px;
    height: 48px;
  }

  .allinone-reason-item h3 {
    font-size: 18px;
  }

  .allinone-reason__points li {
    font-size: 14px;
    padding: 12px 16px 12px 40px;
  }
}

/* All in One Continuous Use */
.allinone-continuous {
  padding: 100px 0;
  background: linear-gradient(135deg, #f8fbff 0%, #edf4fb 100%);
}

.allinone-continuous__inner {
  width: min(1200px, 90%);
  margin: 0 auto;
}

.allinone-continuous__heading {
  margin-bottom: 52px;
}

.allinone-continuous__label {
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: 14px;
}

.allinone-continuous__heading h2 {
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
  color: #222;
  margin-bottom: 20px;
}

.allinone-continuous__heading p {
  font-size: 16px;
  line-height: 2;
  color: #555;
}

.allinone-continuous__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.allinone-continuous-card {
  position: relative;
  min-height: 260px;
  padding: 34px 28px 32px;
  background: #fff;
  border: 1px solid #dbe9f7;
  border-radius: 18px;
  transition: 0.3s;
  box-shadow: 0 10px 30px rgba(0, 82, 159, 0.04);
}

.allinone-continuous-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 82, 159, 0.08);
}

.allinone-continuous-card span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  font-size: 28px;
  background: none;
  width: auto;
  height: auto;
}

.allinone-continuous-card h3 {
  font-size: 20px;
  line-height: 1.55;
  color: #222;
  margin-bottom: 14px;
}

.allinone-continuous-card p {
  font-size: 15px;
  line-height: 1.9;
  color: #555;
}

@media (max-width: 1024px) {
  .allinone-continuous__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .allinone-continuous-card {
    min-height: 230px;
  }
}

@media (max-width: 768px) {
  .allinone-continuous {
    padding: 70px 0;
  }

  .allinone-continuous__inner {
    width: min(100% - 40px, 1200px);
  }

  .allinone-continuous__heading {
    margin-bottom: 38px;
  }

  .allinone-continuous__heading h2 {
    font-size: clamp(30px, 4vw, 40px);
    font-weight: 700;
  }

  .allinone-continuous__heading p {
    font-size: 15px;
  }

  .allinone-continuous__grid {
    grid-template-columns: 1fr;
  }

  .allinone-continuous-card {
    min-height: auto;
    padding: 28px 24px;
  }

  .allinone-continuous-card span {
    width: 48px;
    height: 48px;
    margin-bottom: 18px;
  }

  .allinone-continuous-card h3 {
    font-size: 19px;
  }
}

/* All in One Consultation */
.allinone-consultation {
  padding: 100px 0;
  background: #fff;
}

.allinone-consultation__inner {
  width: min(1200px, 90%);
  margin: 0 auto;
}

.allinone-consultation__heading {
  margin-bottom: 50px;
}

.allinone-consultation__label {
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: 14px;
}

.allinone-consultation__heading h2 {
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
  color: #222;
  margin-bottom: 20px;
}

.allinone-consultation__heading p {
  font-size: 16px;
  line-height: 2;
  color: #555;
}

.allinone-consultation__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.allinone-consultation__item {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 24px 28px;
  background: #f8fbff;
  border: 1px solid #dbe9f7;
  border-radius: 16px;
  transition: 0.3s;
}

.allinone-consultation__item:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(0, 82, 159, 0.08);
}

.allinone-consultation__item span {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: #00529f;
  color: #fff;
  border-radius: 50%;
  font-weight: 700;
}

.allinone-consultation__item p {
  margin: 0;
  color: #333;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.7;
}

@media (max-width: 768px) {
  .allinone-consultation {
    padding: 70px 0;
  }

  .allinone-consultation__inner {
    width: min(100% - 40px, 1200px);
  }

  .allinone-consultation__heading {
    margin-bottom: 38px;
  }

  .allinone-consultation__heading h2 {
    font-size: clamp(30px, 4vw, 40px);
    font-weight: 700;
  }

  .allinone-consultation__heading p {
    font-size: 15px;
  }

  .allinone-consultation__grid {
    grid-template-columns: 1fr;
  }

  .allinone-consultation__item {
    align-items: flex-start;
    padding: 22px 20px;
  }

  .allinone-consultation__item p {
    font-size: 15px;
  }
}

/* All in One Support */
.allinone-support {
  padding: 100px 0;
  background: #f8fbff;
}

.allinone-support__inner {
  width: min(1200px, 90%);
  margin: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: start;
}

.allinone-support__content {
  position: sticky;
  top: 120px;
  align-self: start;
}

.allinone-support__label {
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: 14px;
}

.allinone-support__content h2 {
  font-size: clamp(30px, 4vw, 38px);
  font-weight: 700;
  line-height: 1.5;
  color: #222;
  margin-bottom: 24px;
}

.allinone-support__lead {
  font-size: 16px;
  line-height: 2;
  color: #555;
  margin-bottom: 32px;
}

.allinone-support__points {
  display: grid;
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.allinone-support__points li {
  position: relative;
  padding-left: 30px;
  font-size: 15px;
  font-weight: 600;
  color: #333;
}

.allinone-support__points li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #00529f;
  font-weight: 700;
}

.allinone-support__cards {
  display: grid;
  gap: 20px;
}

.allinone-support-card {
  padding: 30px;
  background: #fff;
  border: 1px solid #dbe9f7;
  border-radius: 18px;
  transition: 0.3s;
}

.allinone-support-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(0, 82, 159, 0.08);
}

.allinone-support-card span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 16px;
  background: #00529f;
  color: #fff;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 700;
}

.allinone-support-card h3 {
  font-size: 22px;
  line-height: 1.5;
  color: #222;
  margin-bottom: 12px;
}

.allinone-support-card p {
  font-size: 15px;
  line-height: 1.9;
  color: #555;
}

@media (max-width: 1024px) {
  .allinone-support__inner {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .callinone-support__content {
    position: static;
  }
}

@media (max-width: 768px) {
  .allinone-support {
    padding: 70px 0;
  }

  .allinone-support__inner {
    width: min(100% - 40px, 1200px);
  }

  .allinone-support__content h2 {
    font-size: clamp(30px, 4vw, 40px);
    font-weight: 700;
  }

  .allinone-support__lead {
    font-size: 15px;
  }

  .allinone-support-card {
    padding: 24px;
  }

  .allinone-support-card h3 {
    font-size: 18px;
  }
}

/* CTA */
.allinone-cta {
  position: relative;
  overflow: hidden;
  padding: 120px 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.15)),
    url("../../assets/img/lineup/facecare/all-in-one/cta-bg.webp");
  background-size: cover;
  background-position: center;
}

.allinone-cta__inner {
  position: relative;
  z-index: 1;
  width: min(900px, 90%);
  margin: auto;
  padding: 50px 24px;
  text-align: center;
  border-radius: 32px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.75);
  box-shadow: 0 20px 50px rgba(0, 82, 159, 0.08);
}

.allinone-cta__label {
  margin-bottom: 16px;
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.allinone-cta h2 {
  margin: 0 0 24px;
  color: #222;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
}

.allinone-cta__lead {
  max-width: 720px;
  margin: 0 auto 36px;
  color: #333;
  font-size: 16px;
  line-height: 2;
}

.allinone-cta__buttons {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.allinone-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 280px;
  padding: 18px 30px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  transition: 0.3s;
}

.allinone-cta__btn--primary {
  background: #00529f;
  color: #fff;
}

.allinone-cta__btn--primary:hover {
  background: #003f7c;
}

.allinone-cta__btn--secondary {
  background: #fff;
  color: #00529f;
  border: 1px solid #00529f;
}

.allinone-cta__btn--secondary:hover {
  background: #f5f9ff;
}

@media (max-width: 768px) {
  .allinone-cta {
    padding: 70px 0;
  }

  .allinone-cta__inner {
    width: min(100% - 40px, 1200px);
    padding: 50px 24px;
  }

  .allinone-cta h2 {
    font-size: 30px;
  }

  .allinone-cta__lead {
    font-size: 15px;
    line-height: 1.9;
  }

  .allinone-cta__buttons {
    flex-direction: column;
  }

  .allinone-cta__btn {
    width: 100%;
    min-width: auto;
  }
}

/* /lineup/facecare/sensitive-skin/ */
/* Sensitive Skin FV */
.sensitive-fv {
  position: relative;
  overflow: hidden;
  padding: 160px 0 90px;
  background:
    radial-gradient(
      circle at 82% 18%,
      rgba(173, 214, 255, 0.35) 0%,
      rgba(173, 214, 255, 0) 34%
    ),
    radial-gradient(
      circle at 15% 80%,
      rgba(230, 245, 235, 0.45) 0%,
      rgba(230, 245, 235, 0) 40%
    ),
    linear-gradient(135deg, #f8fbff 0%, #edf5fc 60%, #ffffff 100%);
}

.sensitive-fv::before {
  content: "";
  position: absolute;
  right: -120px;
  top: -120px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: rgba(0, 82, 159, 0.06);
}

.sensitive-fv::after {
  content: "";
  position: absolute;
  left: -160px;
  bottom: -180px;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  background: rgba(176, 205, 185, 0.22);
}

.sensitive-fv__inner {
  width: min(1200px, 90%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 60px;
  align-items: center;
}

.sensitive-fv__content {
  max-width: 560px;
}

.sensitive-fv__label {
  display: inline-block;
  padding: 8px 18px;
  margin-bottom: 24px;
  background: #eaf4ff;
  color: #00529f;
  border: 1px solid #d8e7f7;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
}

.sensitive-fv__title {
  margin: 0 0 24px;
  color: #222;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.02em;
}

.sensitive-fv__lead {
  margin: 0 0 32px;
  color: #555;
  font-size: 17px;
  line-height: 2;
}

.sensitive-fv__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 0 0 38px;
}

.sensitive-fv__tags li {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #d8e7f7;
  border-radius: 999px;
  color: #333;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 8px 22px rgba(0, 82, 159, 0.04);
}

.sensitive-fv__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.sensitive-fv__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 260px;
  padding: 18px 30px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  transition: 0.3s ease;
}

.sensitive-fv__btn--primary {
  background: #00529f;
  color: #fff;
}

.sensitive-fv__btn--primary:hover {
  background: #003f7c;
  transform: translateY(-2px);
}

.sensitive-fv__btn--secondary {
  background: #fff;
  color: #00529f;
  border: 1px solid #00529f;
}

.sensitive-fv__btn--secondary:hover {
  background: #f5f9ff;
  transform: translateY(-2px);
}

.sensitive-fv__visual {
  position: relative;
}

.sensitive-fv__image {
  overflow: hidden;
  border-radius: 30px;
  box-shadow: 0 26px 64px rgba(0, 82, 159, 0.16);
}

.sensitive-fv__image img {
  width: 100%;
  display: block;
  aspect-ratio: 16 / 11;
  object-fit: cover;
}

.sensitive-fv__note {
  position: absolute;
  left: -20px;
  bottom: 30px;
  width: 260px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid #dbe9f7;
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(0, 82, 159, 0.12);
  backdrop-filter: blur(10px);
}

.sensitive-fv__note span {
  display: inline-block;
  margin-bottom: 8px;
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.sensitive-fv__note p {
  margin: 0;
  color: #444;
  font-size: 14px;
  line-height: 1.8;
}

.sensitive-fv__bg-text {
  position: absolute;
  right: -40px;
  bottom: 20px;
  color: rgba(0, 82, 159, 0.05);
  font-size: clamp(70px, 10vw, 150px);
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}

@media (max-width: 1024px) {
  .sensitive-fv__inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .sensitive-fv__content {
    max-width: 760px;
  }

  .sensitive-fv__title {
    font-size: clamp(30px, 4vw, 40px);
    font-weight: 700;
  }

  .sensitive-fv__note {
    left: 24px;
    bottom: 24px;
  }
}

@media (max-width: 768px) {
  .sensitive-fv {
    padding: 120px 0 60px;
  }

  .sensitive-fv__inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .sensitive-fv__title {
    font-size: clamp(30px, 4vw, 40px);
    font-weight: 700;
    line-height: 1.5;
  }

  .sensitive-fv__lead {
    font-size: 15px;
    line-height: 1.9;
  }

  .sensitive-fv__buttons {
    flex-direction: column;
  }

  .sensitive-fv__btn {
    width: 100%;
    min-width: auto;
  }

  .sensitive-fv__image {
    border-radius: 22px;
  }

  .sensitive-fv__image img {
    aspect-ratio: 4 / 3;
  }

  .sensitive-fv__note {
    position: static;
    width: 100%;
    margin-top: 16px;
  }

  .sensitive-fv__bg-text {
    display: none;
  }
}

/* BRAND PLANNING */

.sensitive-brand {
  padding: 100px 0;
  background: #fff;
}

.sensitive-brand__inner {
  width: min(1200px, 90%);
  margin: 0 auto;
}

.sensitive-brand__heading {
  margin-bottom: 50px;
}

.sensitive-brand__label {
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: 14px;
}

.sensitive-brand__heading h2 {
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 20px;
  color: #222;
}

.sensitive-brand__heading p {
  font-size: 16px;
  line-height: 2;
  color: #555;
}

.sensitive-brand__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.sensitive-brand-card {
  padding: 38px;
  background: #f8fbff;
  border: 1px solid #dbe9f7;
  border-radius: 20px;
  transition: 0.3s;
}

.sensitive-brand-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 15px 35px rgba(0, 82, 159, 0.08);
}

.sensitive-brand-card span {
  display: inline-block;
  margin-bottom: 18px;
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
}

.sensitive-brand-card h3 {
  font-size: 24px;
  line-height: 1.6;
  margin-bottom: 14px;
  color: #222;
}

.sensitive-brand-card p {
  font-size: 15px;
  line-height: 1.9;
  color: #555;
}

@media (max-width: 768px) {
  .sensitive-brand {
    padding: 70px 0;
  }

  .sensitive-brand__heading h2 {
    font-size: clamp(30px, 4vw, 40px);
    font-weight: 700;
  }

  .sensitive-brand__grid {
    grid-template-columns: 1fr;
  }

  .sensitive-brand-card {
    padding: 28px 24px;
  }

  .sensitive-brand-card h3 {
    font-size: 20px;
  }
}

/* PRODUCT PLANNING */
.sensitive-plan {
  padding: 100px 0;
  background: #f8fbff;
}

.sensitive-plan__inner {
  width: min(1200px, 90%);
  margin: 0 auto;
}

.sensitive-plan__heading {
  margin-bottom: 50px;
}

.sensitive-plan__label {
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: 14px;
}

.sensitive-plan__heading h2 {
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 20px;
}

.sensitive-plan__heading p {
  font-size: 16px;
  line-height: 2;
  color: #555;
}

.sensitive-plan__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}

.sensitive-plan-card {
  overflow: hidden;
  background: #fff;
  border: 1px solid #dbe9f7;
  border-radius: 20px;
  transition: 0.3s;
}

.sensitive-plan-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 15px 35px rgba(0, 82, 159, 0.08);
}

.sensitive-plan-card__image {
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.sensitive-plan-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sensitive-plan-card__body {
  padding: 28px;
}

.sensitive-plan-card__body span {
  display: inline-block;
  margin-bottom: 12px;
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
}

.sensitive-plan-card__body h3 {
  font-size: 22px;
  line-height: 1.5;
  margin-bottom: 14px;
}

.sensitive-plan-card__body p {
  font-size: 15px;
  line-height: 1.9;
  color: #555;
}

@media (max-width: 768px) {
  .sensitive-plan {
    padding: 70px 0;
  }

  .sensitive-plan__heading h2 {
    font-size: clamp(30px, 4vw, 40px);
    font-weight: 700;
  }

  .sensitive-plan__grid {
    grid-template-columns: 1fr;
  }

  .sensitive-plan-card__body {
    padding: 24px;
  }

  .sensitive-plan-card__body h3 {
    font-size: 20px;
  }
}

/* WHY SENSITIVE SKIN BRAND */
.sensitive-reason {
  padding: 100px 0;
  background: #fff;
}

.sensitive-reason__inner {
  width: min(1200px, 90%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 72px;
  align-items: start;
}

.sensitive-reason__heading {
  position: sticky;
  top: 120px;
}

.sensitive-reason__label {
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: 14px;
}

.sensitive-reason__heading h2 {
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
  color: #222;
  margin-bottom: 20px;
}

.sensitive-reason__heading p {
  font-size: 16px;
  line-height: 2;
  color: #555;
}

.sensitive-reason__points {
  display: grid;
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 28px 0 0;
}

.sensitive-reason__points li {
  position: relative;
  padding: 12px 18px 12px 42px;
  background: #f8fbff;
  border: 1px solid #dbe9f7;
  border-radius: 999px;
  color: #333;
  font-size: 15px;
  font-weight: 600;
}

.sensitive-reason__points li::before {
  content: "✓";
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: #00529f;
  font-weight: 700;
}

.sensitive-reason__list {
  display: grid;
  gap: 20px;
}

.sensitive-reason-item {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 24px;
  padding: 30px 32px;
  background: #f8fbff;
  border: 1px solid #dbe9f7;
  border-radius: 18px;
  transition: 0.3s;
}

.sensitive-reason-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(0, 82, 159, 0.08);
}

.sensitive-reason-item__icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #eef6ff;
  border-radius: 50%;
  font-size: 24px;
}

.sensitive-reason-item h3 {
  font-size: 20px;
  line-height: 1.5;
  color: #222;
  margin-bottom: 10px;
}

.sensitive-reason-item p {
  font-size: 15px;
  line-height: 1.9;
  color: #555;
}

@media (max-width: 1024px) {
  .sensitive-reason__inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .sensitive-reason__heading {
    position: static;
  }
}

@media (max-width: 768px) {
  .sensitive-reason {
    padding: 70px 0;
  }

  .sensitive-reason__heading h2 {
    font-size: clamp(30px, 4vw, 40px);
    font-weight: 700;
  }

  .sensitive-reason__heading p {
    font-size: clamp(30px, 4vw, 40px);
    font-weight: 700;
  }

  .sensitive-reason__points li {
    border-radius: 12px;
  }

  .sensitive-reason-item {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 26px 24px;
  }

  .sensitive-reason-item h3 {
    font-size: 18px;
  }
}

/* BRAND STRATEGY */

.sensitive-strategy {
  padding: 110px 0;
  background: linear-gradient(135deg, #f8fbff 0%, #f6faf7 100%);
}

.sensitive-strategy__inner {
  width: min(1200px, 90%);
  margin: 0 auto;

  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: center;
}

.sensitive-strategy__image img {
  width: 100%;
  display: block;
  border-radius: 24px;
  box-shadow: 0 20px 50px rgba(0, 82, 159, 0.08);
}

.sensitive-strategy__label {
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: 14px;
}

.sensitive-strategy__content h2 {
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 24px;
  color: #222;
}

.sensitive-strategy__lead {
  font-size: 16px;
  line-height: 2;
  color: #555;
  margin-bottom: 40px;
}

.sensitive-strategy__points {
  display: grid;
  gap: 22px;
}

.sensitive-strategy__point {
  display: flex;
  gap: 18px;
}

.sensitive-strategy__point span {
  flex-shrink: 0;

  width: 52px;
  height: 52px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: #00529f;
  color: #fff;

  border-radius: 50%;

  font-size: 14px;
  font-weight: 700;
}

.sensitive-strategy__point h3 {
  font-size: 20px;
  margin-bottom: 8px;
  color: #222;
}

.sensitive-strategy__point p {
  font-size: 15px;
  line-height: 1.8;
  color: #555;
}

@media (max-width: 1024px) {
  .sensitive-strategy__inner {
    grid-template-columns: 1fr;
    gap: 50px;
  }
}

@media (max-width: 768px) {
  .sensitive-strategy {
    padding: 70px 0;
  }

  .sensitive-strategy__content h2 {
    font-size: clamp(30px, 4vw, 40px);
    font-weight: 700;
  }

  .sensitive-strategy__lead {
    font-size: 15px;
  }

  .sensitive-strategy__point h3 {
    font-size: 18px;
  }
}

.sensitive-strategy__check {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #00529f;
  color: #fff;
  font-weight: 700;
}

/* CONSULTATION */
.sensitive-consultation {
  padding: 100px 0;
  background: #fff;
}

.sensitive-consultation__inner {
  width: min(1200px, 90%);
  margin: auto;
}

.sensitive-consultation__heading {
  margin-bottom: 50px;
}

.sensitive-consultation__label {
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: 14px;
}

.sensitive-consultation__heading h2 {
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 20px;
}

.sensitive-consultation__heading p {
  font-size: 16px;
  line-height: 2;
  color: #555;
}

.sensitive-consultation__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.sensitive-consultation__item {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 24px 28px;
  background: #f8fbff;
  border: 1px solid #dbe9f7;
  border-radius: 16px;
}

.sensitive-consultation__item span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #00529f;
  color: #fff;
  font-weight: 700;
}

.sensitive-consultation__item p {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

@media (max-width: 768px) {
  .sensitive-consultation {
    padding: 70px 0;
  }

  .sensitive-consultation__heading h2 {
    font-size: clamp(30px, 4vw, 40px);
    font-weight: 700;
  }

  .sensitive-consultation__grid {
    grid-template-columns: 1fr;
  }
}

/* WHY QBI WORLD */
.sensitive-support {
  padding: 100px 0;
  background: linear-gradient(135deg, #f8fbff 0%, #f6faf7 100%);
}

.sensitive-support__inner {
  width: min(1200px, 90%);
  margin: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: start;
}

.sensitive-support__content {
  position: sticky;
  top: 120px;
  align-self: start;
}

.sensitive-support__label {
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: 14px;
}

.sensitive-support__content h2 {
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 24px;
  color: #222;
}

.sensitive-support__lead {
  font-size: 16px;
  line-height: 2;
  color: #555;
  margin-bottom: 32px;
}

.sensitive-support__points {
  display: grid;
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.sensitive-support__points li {
  position: relative;
  padding-left: 30px;
  font-size: 15px;
  font-weight: 600;
  color: #333;
}

.sensitive-support__points li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #00529f;
  font-weight: 700;
}

.sensitive-support__cards {
  display: grid;
  gap: 20px;
}

.sensitive-support-card {
  padding: 30px;
  background: #fff;
  border: 1px solid #dbe9f7;
  border-radius: 18px;
  transition: 0.3s;
}

.sensitive-support-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(0, 82, 159, 0.08);
}

.sensitive-support-card span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #00529f;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 16px;
}

.sensitive-support-card h3 {
  font-size: 22px;
  line-height: 1.5;
  margin-bottom: 12px;
  color: #222;
}

.sensitive-support-card p {
  font-size: 15px;
  line-height: 1.9;
  color: #555;
}

@media (max-width: 1024px) {
  .sensitive-support__inner {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .sensitive-support__content {
    position: static;
  }
}

@media (max-width: 768px) {
  .sensitive-support {
    padding: 70px 0;
  }

  .sensitive-support__content h2 {
    font-size: clamp(30px, 4vw, 40px);
    font-weight: 700;
  }

  .sensitive-support__lead {
    font-size: 15px;
  }

  .sensitive-support-card {
    padding: 24px;
  }

  .sensitive-support-card h3 {
    font-size: 18px;
  }
}

/* OEM FLOW */
.sensitive-flow {
  padding: 100px 0;
  background: linear-gradient(135deg, #f8fbff 0%, #f6faf7 100%);
}

.sensitive-flow__inner {
  width: min(1200px, 90%);
  margin: 0 auto;
}

.sensitive-flow__heading {
  margin-bottom: 56px;
}

.sensitive-flow__label {
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: 14px;
}

.sensitive-flow__heading h2 {
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
  color: #222;
  margin-bottom: 20px;
}

.sensitive-flow__heading p {
  font-size: 16px;
  line-height: 2;
  color: #555;
}

.sensitive-flow__steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.sensitive-flow-step {
  position: relative;
  padding: 34px 28px 32px;
  background: #fff;
  border: 1px solid #dbe9f7;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0, 82, 159, 0.04);
  transition: 0.3s;
}

.sensitive-flow-step:hover {
  transform: translateY(-4px);
  box-shadow: 0 15px 35px rgba(0, 82, 159, 0.08);
}

.sensitive-flow-step::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -20px;
  width: 14px;
  height: 14px;
  border-top: 2px solid #00529f;
  border-right: 2px solid #00529f;
  transform: translateY(-50%) rotate(45deg);
}

.sensitive-flow-step:last-child::after {
  display: none;
}

.sensitive-flow-step span {
  display: inline-block;
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-bottom: 18px;
}

.sensitive-flow-step h3 {
  font-size: 20px;
  line-height: 1.5;
  color: #222;
  margin-bottom: 14px;
}

.sensitive-flow-step p {
  font-size: 15px;
  line-height: 1.9;
  color: #555;
}

.sensitive-flow__links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 40px;
}

.sensitive-flow__links a {
  display: inline-flex;
  align-items: center;
  padding: 12px 18px;
  background: #fff;
  border: 1px solid #00529f;
  border-radius: 999px;
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: 0.3s;
}

.sensitive-flow__links a::after {
  content: "→";
  margin-left: 8px;
}

.sensitive-flow__links a:hover {
  background: #00529f;
  color: #fff;
}

@media (max-width: 1024px) {
  .sensitive-flow__steps {
    grid-template-columns: repeat(2, 1fr);
  }

  .sensitive-flow-step::after {
    display: none;
  }
}

@media (max-width: 768px) {
  .sensitive-flow {
    padding: 70px 0;
  }

  .sensitive-flow__heading h2 {
    font-size: clamp(30px, 4vw, 40px);
    font-weight: 700;
  }

  .sensitive-flow__heading p {
    font-size: 15px;
  }

  .sensitive-flow__steps {
    grid-template-columns: 1fr;
  }

  .sensitive-flow-step {
    padding: 28px 24px;
  }

  .sensitive-flow-step h3 {
    font-size: 18px;
  }

  .sensitive-flow__links {
    flex-direction: column;
  }

  .sensitive-flow__links a {
    width: 100%;
    justify-content: center;
    border-radius: 10px;
  }
}

/* CTA */
.sensitive-cta {
  position: relative;
  overflow: hidden;
  padding: 120px 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.55)),
    url("../../assets/img/lineup/facecare/sensitive-skin/cta-bg.webp");
  background-size: cover;
  background-position: center;
}

.sensitive-cta__inner {
  width: min(900px, 90%);
  margin: auto;
  text-align: center;
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(4px);
  padding: 20px;
  border-radius: 24px;
}

.sensitive-cta__label {
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: 14px;
}

.sensitive-cta h2 {
  font-size: clamp(30px, 4vw, 30px);
  font-weight: 700;
  line-height: 1.5;
  color: #222;
  margin-bottom: 24px;
}

.sensitive-cta__lead {
  max-width: 700px;
  margin: 0 auto 40px;
  font-size: 16px;
  line-height: 2;
  color: #555;
}

.sensitive-cta__buttons {
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}

.sensitive-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 280px;
  padding: 18px 30px;
  border-radius: 10px;
  text-decoration: none;
  font-size: 16px;
  font-weight: 700;
  transition: 0.3s;
}

.sensitive-cta__btn--primary {
  background: #00529f;
  color: #fff;
}

.sensitive-cta__btn--primary:hover {
  background: #003f7c;
  transform: translateY(-2px);
}

.sensitive-cta__btn--secondary {
  background: #fff;
  color: #00529f;
  border: 1px solid #00529f;
}

.sensitive-cta__btn--secondary:hover {
  background: #f4f9ff;
  transform: translateY(-2px);
}

@media (max-width: 768px) {
  .sensitive-cta {
    padding: 80px 0;
  }

  .sensitive-cta h2 {
    font-size: clamp(30px, 4vw, 30px);
    font-weight: 700;
  }

  .sensitive-cta__lead {
    font-size: 15px;
  }

  .sensitive-cta__buttons {
    flex-direction: column;
  }

  .sensitive-cta__btn {
    width: 100%;
    min-width: auto;
  }
}

/* /lineup/facecare/korean-skincare/  */
/* Korean Skincare FV */
.korean-fv {
  position: relative;
  overflow: hidden;
  padding: 160px 0 90px;
  background:
    radial-gradient(
      circle at 88% 18%,
      rgba(173, 214, 255, 0.42) 0%,
      rgba(173, 214, 255, 0) 32%
    ),
    radial-gradient(
      circle at 78% 78%,
      rgba(255, 220, 235, 0.55) 0%,
      rgba(255, 220, 235, 0) 38%
    ),
    linear-gradient(135deg, #f8fbff 0%, #edf4fb 58%, #ffffff 100%);
}

.korean-fv__bg-text {
  position: absolute;
  right: -40px;
  bottom: 20px;
  color: rgba(0, 82, 159, 0.055);
  font-size: clamp(64px, 10vw, 150px);
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}

.korean-fv__inner {
  position: relative;
  z-index: 1;
  width: min(1200px, 90%);
  margin: 0 auto;
  display: grid;
  /* grid-template-columns: .92fr 1.08fr; */
  grid-template-columns: 0.8fr 1.2fr;
  gap: 56px;
  align-items: center;
}

.korean-fv__content {
  max-width: 560px;
}

.korean-fv__label {
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #d8e7f7;
  border-radius: 999px;
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 24px;
  box-shadow: 0 8px 24px rgba(0, 82, 159, 0.06);
}

.korean-fv__title {
  margin: 0 0 24px;
  color: #1f2f45;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.48;
  letter-spacing: 0.02em;
}

.korean-fv__lead {
  margin: 0 0 30px;
  color: #526776;
  font-size: 17px;
  line-height: 2;
}

.korean-fv__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 0 0 36px;
}

.korean-fv__tags li {
  display: inline-flex;
  align-items: center;
  padding: 10px 16px;
  background: #fff;
  border: 1px solid #dbe9f7;
  border-radius: 999px;
  color: #333;
  font-size: 14px;
  font-weight: 600;
}

.korean-fv__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 18px;
}

.korean-fv__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 250px;
  padding: 18px 30px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.3s ease;
}

.korean-fv__btn--primary {
  background: #00529f;
  color: #fff;
  box-shadow: 0 14px 28px rgba(0, 82, 159, 0.18);
}

.korean-fv__btn--primary:hover {
  background: #003f7c;
  transform: translateY(-2px);
}

.korean-fv__btn--secondary {
  background: rgba(255, 255, 255, 0.86);
  color: #00529f;
  border: 1px solid #00529f;
}

.korean-fv__btn--secondary:hover {
  background: #f5f9ff;
  transform: translateY(-2px);
}

.korean-fv__note {
  margin: 0;
  color: #6b7d8c;
  font-size: 12px;
  line-height: 1.8;
}

.korean-fv__visual {
  position: relative;
}

.korean-fv__image-main {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  box-shadow: 0 24px 60px rgba(0, 82, 159, 0.16);
}

.korean-fv__image-main::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(0, 82, 159, 0.08),
    rgba(255, 255, 255, 0)
  );
  z-index: 1;
  pointer-events: none;
}

.korean-fv__image-main img {
  width: 100%;
  aspect-ratio: 16 / 11;
  display: block;
  object-fit: cover;
}

.korean-fv__floating {
  position: absolute;
  z-index: 2;
  width: 210px;
  padding: 18px 20px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(216, 231, 247, 0.9);
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(0, 82, 159, 0.12);
  backdrop-filter: blur(10px);
}

.korean-fv__floating span {
  display: inline-block;
  margin-bottom: 6px;
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.korean-fv__floating p {
  margin: 0;
  color: #333;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
}

.korean-fv__floating--top {
  top: 28px;
  left: -34px;
}

.korean-fv__floating--bottom {
  right: -24px;
  bottom: 32px;
}

@media (max-width: 1024px) {
  .korean-fv__inner {
    grid-template-columns: 1fr;
    gap: 44px;
  }

  .korean-fv__content {
    max-width: 720px;
  }

  .korean-fv__title {
    font-size: clamp(30px, 4vw, 40px);
    font-weight: 700;
  }

  .korean-fv__visual {
    max-width: 760px;
  }
}

@media (max-width: 768px) {
  .korean-fv {
    padding: 120px 0 66px;
  }

  .korean-fv__inner {
    width: min(100% - 40px, 1200px);
    gap: 34px;
  }

  .korean-fv__title {
    font-size: clamp(30px, 4vw, 40px);
    font-weight: 700;

    line-height: 1.55;
  }

  .korean-fv__lead {
    font-size: 15px;
    line-height: 1.9;
  }

  .korean-fv__tags {
    gap: 10px;
    margin-bottom: 30px;
  }

  .korean-fv__tags li {
    font-size: 13px;
    padding: 9px 13px;
  }

  .korean-fv__buttons {
    flex-direction: column;
  }

  .korean-fv__btn {
    width: 100%;
    min-width: auto;
    padding: 17px 22px;
  }

  .korean-fv__image-main {
    border-radius: 22px;
  }

  .korean-fv__image-main img {
    aspect-ratio: 4 / 3;
  }

  .korean-fv__floating {
    position: static;
    width: 100%;
    margin-top: 12px;
  }

  .korean-fv__bg-text {
    display: none;
  }
}

/* BRAND CONCEPT */
.korean-brand {
  padding: 110px 0;
  background: #fff;
}

.korean-brand__inner {
  width: min(1200px, 90%);
  margin: 0 auto;
}

.korean-brand__heading {
  margin-bottom: 60px;
}

.korean-brand__label {
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: 14px;
}

.korean-brand__heading h2 {
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 22px;
  color: #222;
}

.korean-brand__heading p {
  font-size: 16px;
  line-height: 2;
  color: #555;
}

.korean-brand__grid {
  display: grid;
  /* grid-template-columns: 1fr 1fr; */
  grid-template-columns: 1.1fr 0.9fr;
  gap: 70px;
  align-items: center;
}

.korean-brand__image img {
  width: 100%;
  border-radius: 24px;
  display: block;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
}

.korean-brand__content {
  display: grid;
  gap: 24px;
}

.korean-brand-card {
  display: flex;
  gap: 22px;
  padding: 28px;
  background: #f8fbff;
  border: 1px solid #dbe9f7;
  border-radius: 18px;
  transition: 0.3s;
}

.korean-brand-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(0, 82, 159, 0.08);
}

.korean-brand-card span {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #00529f;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
}

.korean-brand-card h3 {
  font-size: 22px;
  line-height: 1.5;
  margin-bottom: 8px;
}

.korean-brand-card p {
  font-size: 15px;
  line-height: 1.9;
  color: #555;
}

@media (max-width: 1024px) {
  .korean-brand__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .korean-brand {
    padding: 70px 0;
  }

  .korean-brand__heading h2 {
    font-size: clamp(30px, 4vw, 40px);
    font-weight: 700;
  }

  .korean-brand-card {
    padding: 24px;
  }

  .korean-brand-card h3 {
    font-size: 18px;
  }
}

/* WHY KOREAN BEAUTY */
.korean-reason {
  padding: 110px 0;
  background: #f8fbff;
}

.korean-reason__inner {
  width: min(1200px, 90%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 72px;
  align-items: start;
}

.korean-reason__heading {
  position: sticky;
  top: 120px;
}

.korean-reason__label {
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: 14px;
}

.korean-reason__heading h2 {
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
  color: #222;
  margin-bottom: 22px;
}

.korean-reason__heading p {
  font-size: 16px;
  line-height: 2;
  color: #555;
}

.korean-reason__points {
  display: grid;
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 30px 0 0;
}

.korean-reason__points li {
  position: relative;
  padding: 12px 18px 12px 42px;
  background: #fff;
  border: 1px solid #dbe9f7;
  border-radius: 999px;
  color: #333;
  font-size: 15px;
  font-weight: 600;
}

.korean-reason__points li::before {
  content: "✓";
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: #00529f;
  font-weight: 700;
}

.korean-reason__list {
  display: grid;
  gap: 24px;
}

.korean-reason-item {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 24px;
  padding: 34px;
  background: #fff;
  border: 1px solid #dbe9f7;
  border-radius: 22px;
  transition: all 0.3s ease;
}

.korean-reason-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 82, 159, 0.08);
}

.korean-reason-item span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  background: #00529f;
  color: #fff;
  border-radius: 50%;
  font-size: 15px;
  font-weight: 700;
}

.korean-reason-item h3 {
  font-size: 22px;
  line-height: 1.5;
  color: #222;
  margin-bottom: 10px;
}

.korean-reason-item p {
  font-size: 15px;
  line-height: 1.9;
  color: #555;
}

@media (max-width: 1024px) {
  .korean-reason__inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .korean-reason__heading {
    position: static;
  }
}

@media (max-width: 768px) {
  .korean-reason {
    padding: 70px 0;
  }

  .korean-reason__heading h2 {
    font-size: clamp(30px, 4vw, 40px);
    font-weight: 700;
  }

  .korean-reason__heading p {
    font-size: 15px;
  }

  .korean-reason-item {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 26px 24px;
  }

  .korean-reason-item span {
    width: 50px;
    height: 50px;
  }

  .korean-reason-item h3 {
    font-size: 18px;
  }
}

/* PRODUCT PLANNING */

.korean-plan {
  padding: 110px 0;
  background: #fff;
}

.korean-plan__inner {
  width: min(1200px, 90%);
  margin: 0 auto;
}

.korean-plan__heading {
  margin-bottom: 60px;
}

.korean-plan__label {
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: 14px;
}

.korean-plan__heading h2 {
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
  color: #222;
  margin-bottom: 22px;
}

.korean-plan__heading p {
  font-size: 16px;
  line-height: 2;
  color: #555;
}

.korean-plan__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}

.korean-plan-card {
  overflow: hidden;
  background: #fff;
  border: 1px solid #dbe9f7;
  border-radius: 24px;
  transition: all 0.3s ease;
}

.korean-plan-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 40px rgba(0, 82, 159, 0.08);
}

.korean-plan-card__image {
  overflow: hidden;
  aspect-ratio: 16 / 10;
}

.korean-plan-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.korean-plan-card:hover img {
  transform: scale(1.05);
}

.korean-plan-card__body {
  padding: 28px;
}

.korean-plan-card__tag {
  display: inline-block;

  margin-bottom: 14px;
  padding: 8px 14px;

  background: #eef6ff;
  color: #00529f;

  border-radius: 999px;

  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.korean-plan-card__body h3 {
  font-size: 24px;
  line-height: 1.5;
  margin-bottom: 14px;
  color: #222;
}

.korean-plan-card__body p {
  font-size: 15px;
  line-height: 1.9;
  color: #555;
}

@media (max-width: 1024px) {
  .korean-plan__grid {
    gap: 24px;
  }
}

@media (max-width: 768px) {
  .korean-plan {
    padding: 70px 0;
  }

  .korean-plan__heading {
    margin-bottom: 40px;
  }

  .korean-plan__heading h2 {
    font-size: clamp(30px, 4vw, 40px);
    font-weight: 700;
  }

  .korean-plan__grid {
    grid-template-columns: 1fr;
  }

  .korean-plan-card__body {
    padding: 24px;
  }

  .korean-plan-card__body h3 {
    font-size: 20px;
  }
}

/* SNS STRATEGY */

.korean-sns {
  position: relative;
  overflow: hidden;
  padding: 140px 0;

  background:
    radial-gradient(
      circle at 85% 20%,
      rgba(255, 220, 235, 0.6) 0%,
      rgba(255, 220, 235, 0) 40%
    ),
    radial-gradient(
      circle at 15% 85%,
      rgba(173, 214, 255, 0.2) 0%,
      rgba(173, 214, 255, 0) 40%
    ),
    linear-gradient(135deg, #f8fbff 0%, #edf4fb 55%, #ffffff 100%);
}

.korean-sns__inner {
  width: min(1200px, 90%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 100px;
  align-items: center;
}

/* 左 */

.korean-sns__label {
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  margin-bottom: 16px;
}

.korean-sns__content h2 {
  font-size: clamp(30px, 4vw, 36px);
  font-weight: 700;
  line-height: 1.45;
  color: #222;
  margin-bottom: 28px;
}

.korean-sns__lead {
  font-size: 16px;
  line-height: 2.1;
  color: #555;
  margin-bottom: 38px;
}

.korean-sns__points {
  display: grid;
  gap: 16px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.korean-sns__points li {
  position: relative;
  padding: 16px 22px 16px 48px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(8px);
  border: 1px solid #dbe9f7;
  border-radius: 999px;
  color: #333;
  font-size: 15px;
  font-weight: 600;
}

.korean-sns__points li::before {
  content: "✓";
  position: absolute;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  color: #00529f;
  font-weight: 700;
}

/* 右 */
.korean-sns__visual {
  position: relative;
  min-height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.korean-sns-phone {
  width: min(340px, 100%);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(219, 233, 247, 0.9);
  border-radius: 34px;
  box-shadow:
    0 30px 80px rgba(0, 82, 159, 0.12),
    0 10px 25px rgba(0, 82, 159, 0.08);
}

.korean-sns-phone__header {
  height: 54px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 24px;
  border-bottom: 1px solid #edf4fb;
}

.korean-sns-phone__header span {
  width: 8px;
  height: 8px;
  background: #d8e5f4;
  border-radius: 50%;
}

.korean-sns-phone__image {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.korean-sns-phone__image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.korean-sns-phone__body {
  padding: 32px;
}

.korean-sns-phone__tag {
  color: #00529f;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  margin-bottom: 12px;
}

.korean-sns-phone__body h3 {
  font-size: 24px;
  line-height: 1.5;
  color: #222;
  margin-bottom: 14px;
}

.korean-sns-phone__body p {
  font-size: 15px;
  line-height: 1.9;
  color: #555;
}

/* 浮遊カード */

.korean-sns-card {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 22px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(219, 233, 247, 0.9);
  border-radius: 18px;
  box-shadow: 0 20px 40px rgba(0, 82, 159, 0.1);
}

.korean-sns-card span {
  width: 38px;
  height: 38px;

  display: flex;
  align-items: center;
  justify-content: center;
  background: #00529f;
  color: #fff;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
}

.korean-sns-card p {
  margin: 0;
  color: #222;
  font-size: 14px;
  font-weight: 700;
}

.korean-sns-card--01 {
  top: 40px;
  left: -10px;
}

.korean-sns-card--02 {
  right: -10px;
  top: 220px;
}

.korean-sns-card--03 {
  left: -60px;
  bottom: 120px;
}

@media (max-width: 1024px) {
  .korean-sns__inner {
    grid-template-columns: 1fr;
    gap: 60px;
  }

  .korean-sns__visual {
    min-height: auto;
  }
}

@media (max-width: 768px) {
  .korean-sns {
    padding: 80px 0;
  }

  .korean-sns__inner {
    gap: 40px;
  }

  .korean-sns__content h2 {
    font-size: clamp(30px, 4vw, 40px);
    font-weight: 700;
  }

  .korean-sns__lead {
    font-size: 15px;
  }

  .korean-sns__visual {
    display: block;
  }

  .korean-sns-phone {
    width: 100%;
    border-radius: 24px;
  }

  .korean-sns-card {
    position: static;
    margin-top: 12px;
  }
}

/* CONSULTATION */

.korean-consultation {
  padding: 110px 0;
  background: #fff;
}

.korean-consultation__inner {
  width: min(1200px, 90%);
  margin: 0 auto;
}

.korean-consultation__head {
  text-align: center;
  margin: 0 auto 60px;
}

.korean-consultation__label {
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: 14px;
}

.korean-consultation__head h2 {
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 20px;
  color: #222;
}

.korean-consultation__head p {
  font-size: 16px;
  line-height: 2;
  color: #555;
}

.korean-consultation__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.korean-consultation__item {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 28px;
  background: #f8fbff;
  border: 1px solid #dbe9f7;
  border-radius: 18px;
  transition: 0.3s;
}

.korean-consultation__item:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(0, 82, 159, 0.08);
}

.korean-consultation__item span {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #eef6ff;
  border: 1px solid #dbe9f7;
  border-radius: 50%;
  font-size: 24px;
}

.korean-consultation__item p {
  font-size: 17px;
  line-height: 1.7;
  color: #222;
  font-weight: 600;
}

@media (max-width: 768px) {
  .korean-consultation {
    padding: 70px 0;
  }

  .korean-consultation__head h2 {
    font-size: clamp(30px, 4vw, 40px);
    font-weight: 700;
  }

  .korean-consultation__grid {
    grid-template-columns: 1fr;
  }

  .korean-consultation__item {
    padding: 22px;
  }

  .korean-consultation__item p {
    font-size: 15px;
  }
}

/* WHY QBI WORLD */
.korean-strength {
  padding: 110px 0;
  background: #f8fbff;
}

.korean-strength__inner {
  width: min(1200px, 90%);
  margin: 0 auto;
}

.korean-strength__head {
  text-align: center;
  margin: 0 auto 60px;
}

.korean-strength__label {
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: 14px;
}

.korean-strength__head h2 {
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 20px;
}

.korean-strength__head p {
  font-size: 16px;
  line-height: 2;
  color: #555;
}

.korean-strength__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.korean-strength-card {
  padding: 34px 28px;
  background: #fff;
  border: 1px solid #dbe9f7;
  border-radius: 22px;
}

.korean-strength-card span {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  background: #eef6ff;
  border: 1px solid #dbe9f7;
  border-radius: 50%;
  font-size: 28px;
  line-height: 1;
}

.korean-strength-card h3 {
  font-size: 22px;
  line-height: 1.5;
  margin-bottom: 14px;
}

.korean-strength-card p {
  font-size: 15px;
  line-height: 1.9;
  color: #555;
}

@media (max-width: 1024px) {
  .korean-strength__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .korean-strength {
    padding: 70px 0;
  }

  .korean-strength__head h2 {
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 700;
  }

  .korean-strength__grid {
    grid-template-columns: 1fr;
  }
}

/* CTA */
.korean-cta {
  position: relative;
  overflow: hidden;
  padding: 120px 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.55)),
    url("../../assets/img/lineup/facecare/korean-skincare/cta-bg.webp");
  background-size: cover;
  background-position: center;
}

.korean-cta__inner {
  width: min(900px, 90%);
  margin: auto;
  text-align: center;
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(4px);
  padding: 20px;
  border-radius: 24px;
}

.korean-cta__label {
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  margin-bottom: 16px;
}

.korean-cta h2 {
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
  color: #222;
  margin-bottom: 24px;
}

.korean-cta__lead {
  max-width: 700px;
  margin: 0 auto 40px;

  font-size: 16px;
  line-height: 2;
  color: #555;
}

.korean-cta__buttons {
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}

.korean-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 280px;
  padding: 18px 20px;
  border-radius: 12px;
  text-decoration: none;
  font-size: 16px;
  font-weight: 700;
  transition: 0.3s;
}

.korean-cta__btn--primary {
  background: #00529f;
  color: #fff;
}

.korean-cta__btn--primary:hover {
  background: #003f7c;
}

.korean-cta__btn--secondary {
  background: #fff;
  color: #00529f;
  border: 1px solid #00529f;
}

.korean-cta__btn--secondary:hover {
  background: #f7fbff;
}

@media (max-width: 768px) {
  .korean-cta {
    padding: 80px 0;
  }

  .korean-cta__inner {
    padding: 50px 24px;
  }

  .korean-cta h2 {
    font-size: clamp(30px, 4vw, 40px);
    font-weight: 700;
  }

  .korean-cta__lead {
    font-size: 15px;
  }

  .korean-cta__buttons {
    flex-direction: column;
  }

  .korean-cta__btn {
    min-width: auto;
    width: 100%;
  }
}

/* lineup/facecare/mens-skincare/ */
/* Mens Skincare FV */
.mens-fv {
  position: relative;
  overflow: hidden;
  padding: 160px 0 96px;
  background:
    radial-gradient(
      circle at 82% 18%,
      rgba(0, 82, 159, 0.2) 0%,
      rgba(0, 82, 159, 0) 34%
    ),
    radial-gradient(
      circle at 16% 84%,
      rgba(220, 232, 244, 0.7) 0%,
      rgba(220, 232, 244, 0) 36%
    ),
    linear-gradient(135deg, #f7fbff 0%, #edf4fb 48%, #ffffff 100%);
}

.mens-fv::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    110deg,
    rgba(255, 255, 255, 0.92) 0%,
    rgba(255, 255, 255, 0.72) 46%,
    rgba(255, 255, 255, 0.18) 100%
  );
  pointer-events: none;
}

.mens-fv__bg-text {
  position: absolute;
  right: -48px;
  bottom: 22px;
  color: rgba(0, 82, 159, 0.055);
  font-size: clamp(58px, 9vw, 142px);
  font-weight: 800;
  letter-spacing: 0.05em;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}

.mens-fv__inner {
  position: relative;
  z-index: 1;
  width: min(1200px, 90%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.75fr 1.25fr;
  gap: 64px;
  align-items: center;
}

.mens-fv__content {
  max-width: 570px;
}

.mens-fv__label {
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  margin-bottom: 24px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid #d8e7f7;
  border-radius: 999px;
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  box-shadow: 0 8px 24px rgba(0, 82, 159, 0.06);
}

.mens-fv__title {
  margin: 0 0 24px;
  color: #1c2539;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.48;
  letter-spacing: 0.02em;
}

.mens-fv__lead {
  margin: 0 0 30px;
  color: #526776;
  font-size: 17px;
  line-height: 2;
}

.mens-fv__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 0 0 36px;
}

.mens-fv__tags li {
  display: inline-flex;
  align-items: center;
  padding: 10px 16px;
  background: #fff;
  border: 1px solid #dbe9f7;
  border-radius: 999px;
  color: #1c2539;
  font-size: 14px;
  font-weight: 600;
}

.mens-fv__tags li::before {
  content: "✓";
  margin-right: 8px;
  color: #00529f;
  font-weight: 700;
}

.mens-fv__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.mens-fv__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 270px;
  padding: 18px 30px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.3s ease;
}

.mens-fv__btn--primary {
  background: #00529f;
  color: #fff;
  box-shadow: 0 14px 28px rgba(0, 82, 159, 0.2);
}

.mens-fv__btn--primary:hover {
  background: #003f7c;
  transform: translateY(-2px);
}

.mens-fv__btn--secondary {
  background: rgba(255, 255, 255, 0.9);
  color: #00529f;
  border: 1px solid #00529f;
}

.mens-fv__btn--secondary:hover {
  background: #f5f9ff;
  transform: translateY(-2px);
}

.mens-fv__visual {
  position: relative;
}

.mens-fv__image {
  position: relative;
  overflow: hidden;
  border-radius: 30px;
  box-shadow: 0 26px 64px rgba(28, 37, 57, 0.16);
}

.mens-fv__image::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    135deg,
    rgba(28, 37, 57, 0.2),
    rgba(255, 255, 255, 0) 54%
  );
  pointer-events: none;
}

.mens-fv__image img {
  width: 100%;
  aspect-ratio: 16 / 11;
  display: block;
  object-fit: cover;
}

.mens-fv__panel {
  position: absolute;
  z-index: 2;
  width: 230px;
  padding: 18px 20px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(216, 231, 247, 0.95);
  border-radius: 18px;
  box-shadow: 0 18px 42px rgba(28, 37, 57, 0.14);
  backdrop-filter: blur(10px);
}

.mens-fv__panel span {
  display: inline-block;
  margin-bottom: 6px;
  color: #00529f;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.mens-fv__panel p {
  margin: 0;
  color: #1c2539;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
}

@media (max-width: 1024px) {
  .mens-fv__inner {
    grid-template-columns: 1fr;
    gap: 46px;
  }

  .mens-fv__content {
    max-width: 760px;
  }

  .mens-fv__title {
    font-size: clamp(30px, 4vw, 40px);
    font-weight: 700;
  }

  .mens-fv__visual {
    max-width: 780px;
  }
}

@media (max-width: 768px) {
  .mens-fv {
    padding: 120px 0 66px;
  }

  .mens-fv__inner {
    width: min(100% - 40px, 1200px);
    gap: 34px;
  }

  .mens-fv__title {
    font-size: clamp(30px, 4vw, 40px);
    font-weight: 700;
    line-height: 1.55;
  }

  .mens-fv__lead {
    font-size: 15px;
    line-height: 1.9;
  }

  .mens-fv__tags {
    gap: 10px;
    margin-bottom: 30px;
  }

  .mens-fv__tags li {
    font-size: 13px;
    padding: 9px 13px;
  }

  .mens-fv__buttons {
    flex-direction: column;
  }

  .mens-fv__btn {
    width: 100%;
    min-width: auto;
    padding: 17px 22px;
  }

  .mens-fv__image {
    border-radius: 22px;
  }

  .mens-fv__image img {
    aspect-ratio: 4 / 3;
  }

  .mens-fv__panel {
    position: static;
    width: 100%;
    margin-top: 12px;
  }

  .mens-fv__bg-text {
    display: none;
  }
}

/* BRAND CONCEPT */
.mens-brand {
  padding: 110px 0;
  background: #fff;
}

.mens-brand__inner {
  width: min(1200px, 90%);
  margin: 0 auto;
}

.mens-brand__heading {
  margin-bottom: 60px;
}

.mens-brand__label {
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  margin-bottom: 14px;
}

.mens-brand__heading h2 {
  margin: 0 0 22px;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
  color: #1c2539;
}

.mens-brand__heading p {
  color: #526776;
  font-size: 16px;
  line-height: 2;
}

.mens-brand__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 70px;
  align-items: center;
}

.mens-brand__image img {
  width: 100%;
  display: block;
  border-radius: 24px;
  box-shadow: 0 24px 60px rgba(28, 37, 57, 0.1);
  height: 560px;
  object-fit: cover;
}

.mens-brand__content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.mens-brand-card {
  padding: 28px;
  background: #fff;
  border: 1px solid #dbe9f7;
  border-radius: 18px;
  transition: 0.3s;
}

.mens-brand-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(0, 82, 159, 0.08);
}

.mens-brand-card h3 {
  position: relative;
  margin: 0 0 12px;
  padding-left: 18px;
  font-size: 20px;
  line-height: 1.5;
  color: #1c2539;
}

.mens-brand-card h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.4em;
  width: 6px;
  height: 24px;
  background: #00529f;
  border-radius: 999px;
}

.mens-brand-card p {
  margin: 0;
  color: #526776;
  font-size: 15px;
  line-height: 1.9;
}

@media (max-width: 1024px) {
  .mens-brand__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

@media (max-width: 768px) {
  .mens-brand {
    padding: 70px 0;
  }

  .mens-brand__heading {
    margin-bottom: 40px;
  }

  .mens-brand__heading h2 {
    font-size: clamp(30px, 4vw, 40px);
    font-weight: 700;
  }

  .mens-brand__heading p {
    font-size: 15px;
  }

  .mens-brand-card {
    padding: 22px;
  }

  .mens-brand-card h3 {
    font-size: 18px;
  }

  .mens-brand-card p {
    font-size: 14px;
  }
}

/* PRODUCT PLANNING */

.mens-plan {
  padding: 110px 0;
  background: #f8fbff;
}

.mens-plan__inner {
  width: min(1200px, 90%);
  margin: 0 auto;
}

.mens-plan__heading {
  margin-bottom: 60px;
}

.mens-plan__label {
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  margin-bottom: 14px;
}

.mens-plan__heading h2 {
  margin: 0 0 22px;
  color: #1c2539;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
}

.mens-plan__heading p {
  margin: 0;
  color: #526776;
  font-size: 16px;
  line-height: 2;
}

.mens-plan__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}

.mens-plan-card {
  overflow: hidden;
  background: #fff;
  border: 1px solid #dbe9f7;
  border-radius: 24px;
  box-shadow: 0 14px 34px rgba(0, 82, 159, 0.05);
  transition: all 0.3s ease;
}

.mens-plan-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 44px rgba(0, 82, 159, 0.1);
}

.mens-plan-card__image {
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #edf4fb;
}

.mens-plan-card__image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.mens-plan-card:hover .mens-plan-card__image img {
  transform: scale(1.05);
}

.mens-plan-card__body {
  padding: 30px;
}

.mens-plan-card__tag {
  display: inline-block;
  margin: 0 0 14px;
  padding: 8px 14px;
  background: #eef6ff;
  color: #00529f;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.mens-plan-card__body h3 {
  margin: 0 0 14px;
  color: #1c2539;
  font-size: 24px;
  line-height: 1.5;
}

.mens-plan-card__body p {
  margin: 0;
  color: #526776;
  font-size: 15px;
  line-height: 1.9;
}

@media (max-width: 1024px) {
  .mens-plan__grid {
    gap: 24px;
  }
}

@media (max-width: 768px) {
  .mens-plan {
    padding: 70px 0;
  }

  .mens-plan__heading {
    margin-bottom: 40px;
  }

  .mens-plan__heading h2 {
    font-size: clamp(30px, 4vw, 40px);
    font-weight: 700;
  }

  .mens-plan__heading p {
    font-size: 15px;
  }

  .mens-plan__grid {
    grid-template-columns: 1fr;
  }

  .mens-plan-card__body {
    padding: 24px;
  }

  .mens-plan-card__body h3 {
    font-size: 20px;
  }
}

/* BRAND STRATEGY */

.mens-strategy {
  position: relative;
  overflow: hidden;
  padding: 110px 0;
  background:
    radial-gradient(
      circle at 88% 18%,
      rgba(0, 82, 159, 0.1) 0%,
      rgba(0, 82, 159, 0) 34%
    ),
    linear-gradient(135deg, #f8fbff 0%, #edf4fb 54%, #ffffff 100%);
}

.mens-strategy__inner {
  width: min(1200px, 90%);
  margin: 0 auto;
}

.mens-strategy__heading {
  margin: 0 auto 58px;
  text-align: center;
}

.mens-strategy__label {
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  margin-bottom: 14px;
}

.mens-strategy__heading h2 {
  margin: 0 0 22px;
  color: #1c2539;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
}

.mens-strategy__heading p {
  margin: 0;
  color: #526776;
  font-size: 16px;
  line-height: 2;
}

.mens-strategy__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.mens-strategy-card {
  position: relative;
  overflow: hidden;
  min-height: 250px;
  padding: 38px 32px;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid #dbe9f7;
  border-radius: 24px;
  box-shadow: 0 14px 34px rgba(0, 82, 159, 0.05);
  transition: all 0.3s ease;
}

.mens-strategy-card::after {
  content: "";
  position: absolute;
  right: -42px;
  bottom: -42px;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: rgba(0, 82, 159, 0.06);
}

.mens-strategy-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 44px rgba(0, 82, 159, 0.1);
}

.mens-strategy-card span {
  display: inline-block;
  margin-bottom: 22px;
  color: #00529f;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.16em;
}

.mens-strategy-card h3 {
  margin: 0 0 16px;
  color: #1c2539;
  font-size: 26px;
  line-height: 1.5;
}

.mens-strategy-card p {
  margin: 0;
  color: #526776;
  font-size: 15px;
  line-height: 1.9;
}

@media (max-width: 1024px) {
  .mens-strategy__grid {
    grid-template-columns: 1fr;
  }

  .mens-strategy-card {
    min-height: auto;
  }
}

@media (max-width: 768px) {
  .mens-strategy {
    padding: 70px 0;
  }

  .mens-strategy__heading {
    text-align: left;
    margin-bottom: 40px;
  }

  .mens-strategy__heading h2 {
    font-size: clamp(30px, 4vw, 40px);
    font-weight: 700;
  }

  .mens-strategy__heading p {
    font-size: 15px;
  }

  .mens-strategy-card {
    padding: 28px 24px;
    border-radius: 20px;
  }

  .mens-strategy-card h3 {
    font-size: 21px;
  }
}

/* CONSULTATION */
.mens-consultation {
  padding: 110px 0;
  background: #fff;
}

.mens-consultation__inner {
  width: min(1200px, 90%);
  margin: 0 auto;
}

.mens-consultation__head {
  margin: 0 auto 58px;
  text-align: center;
}

.mens-consultation__label {
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  margin-bottom: 14px;
}

.mens-consultation__head h2 {
  margin: 0 0 22px;
  color: #1c2539;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
}

.mens-consultation__head p {
  margin: 0;
  color: #526776;
  font-size: 16px;
  line-height: 2;
}

.mens-consultation__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.mens-consultation__item {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 28px;
  background: #f8fbff;
  border: 1px solid #dbe9f7;
  border-radius: 18px;
  transition: all 0.3s ease;
}

.mens-consultation__item:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(0, 82, 159, 0.08);
}

.mens-consultation__item span {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #eef6ff;
  border: 1px solid #dbe9f7;
  border-radius: 50%;
  font-size: 24px;
}

.mens-consultation__item p {
  margin: 0;
  color: #1c2539;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.7;
}

@media (max-width: 768px) {
  .mens-consultation {
    padding: 70px 0;
  }

  .mens-consultation__head {
    text-align: left;
    margin-bottom: 40px;
  }

  .mens-consultation__head h2 {
    font-size: clamp(30px, 4vw, 40px);
    font-weight: 700;
  }

  .mens-consultation__head p {
    font-size: 15px;
  }

  .mens-consultation__grid {
    grid-template-columns: 1fr;
  }

  .mens-consultation__item {
    padding: 22px;
  }

  .mens-consultation__item p {
    font-size: 15px;
  }
}

/* WHY QBI WORLD */
.mens-strength {
  padding: 110px 0;
  background: #f8fbff;
}

.mens-strength__inner {
  width: min(1200px, 90%);
  margin: 0 auto;
}

.mens-strength__head {
  text-align: center;
  margin: 0 auto 60px;
}

.mens-strength__label {
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  margin-bottom: 14px;
}

.mens-strength__head h2 {
  margin: 0 0 22px;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
  color: #1c2539;
}

.mens-strength__head p {
  color: #526776;
  font-size: 16px;
  line-height: 2;
}

.mens-strength__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.mens-strength-card {
  padding: 40px;
  background: #fff;
  border-radius: 22px;
  border: 1px solid #dbe9f7;
  transition: 0.3s;
}

.mens-strength-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0, 82, 159, 0.08);
}

.mens-strength-card h3 {
  margin: 0 0 14px;
  color: #1c2539;
  font-size: 24px;
  line-height: 1.5;
}

.mens-strength-card p {
  margin: 0;
  color: #526776;
  line-height: 1.9;
}

@media (max-width: 768px) {
  .mens-strength {
    padding: 70px 0;
  }

  .mens-strength__head {
    margin-bottom: 40px;
  }

  .mens-strength__head h2 {
    font-size: clamp(30px, 4vw, 40px);
    font-weight: 700;
  }

  .mens-strength__grid {
    grid-template-columns: 1fr;
  }

  .mens-strength-card {
    padding: 28px 24px;
  }

  .mens-strength-card h3 {
    font-size: 20px;
  }
}

/* CTA */
.mens-cta {
  position: relative;
  overflow: hidden;
  padding: 120px 0;
  background:
    linear-gradient(rgba(18, 28, 43, 0.78), rgba(18, 28, 43, 0.78)),
    url("../../assets/img/lineup/facecare/mens-skincare/cta-bg.webp");
  background-size: cover;
  background-position: center;
}

.mens-cta__inner {
  width: min(900px, 90%);
  margin: 0 auto;
  text-align: center;
}

.mens-cta__label {
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.14em;
  margin-bottom: 18px;
}

.mens-cta h2 {
  margin: 0 0 24px;
  color: #fff;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
}

.mens-cta__lead {
  max-width: 760px;
  margin: 0 auto 40px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 16px;
  line-height: 2;
}

.mens-cta__buttons {
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}

.mens-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 320px;
  padding: 18px 30px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  transition: 0.3s;
}

.mens-cta__btn--primary {
  background: #00529f;
  color: #fff;
}

.mens-cta__btn--primary:hover {
  background: #003f7c;
}

.mens-cta__btn--secondary {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(8px);
}

.mens-cta__btn--secondary:hover {
  background: rgba(255, 255, 255, 0.2);
}

@media (max-width: 768px) {
  .mens-cta {
    padding: 80px 0;
  }

  .mens-cta h2 {
    font-size: clamp(30px, 4vw, 40px);
    font-weight: 700;
  }

  .mens-cta__lead {
    font-size: 15px;
  }

  .mens-cta__btn {
    width: 100%;
    min-width: auto;
  }
}

/* lineup/facecare/genderless-skincare/ */
/* FV */
.genderless-fv {
  position: relative;
  overflow: hidden;
  padding: 150px 0 100px;
  background:
    radial-gradient(
      circle at 15% 15%,
      rgba(226, 236, 250, 0.9) 0,
      rgba(226, 236, 250, 0) 35%
    ),
    linear-gradient(135deg, #f7fbff 0%, #ffffff 55%, #f8fbff 100%);
}

.genderless-fv__inner {
  width: min(1200px, 90%);
  margin: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: center;
}

.genderless-fv__label {
  margin-bottom: 20px;
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.genderless-fv__title {
  margin-bottom: 24px;
  color: #1f2f3f;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.4;
}

.genderless-fv__lead {
  margin-bottom: 36px;
  color: #556270;
  line-height: 2;
}

.genderless-fv__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.genderless-fv__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 28px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  transition: 0.3s;
}

.genderless-fv__btn--primary {
  background: #00529f;
  color: #fff;
}

.genderless-fv__btn--primary:hover {
  background: #003f7c;
}

.genderless-fv__btn--secondary {
  background: #fff;
  color: #00529f;
  border: 1px solid #00529f;
}

.genderless-fv__btn--secondary:hover {
  background: #f5f9ff;
}

.genderless-fv__visual {
  position: relative;
}

.genderless-fv__image {
  overflow: hidden;
  border-radius: 36px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.12);
}

.genderless-fv__image img {
  width: 100%;
  display: block;
  aspect-ratio: 5 / 6;
  object-fit: cover;
}

.genderless-fv__card {
  position: absolute;
  right: -20px;
  bottom: 40px;
  padding: 28px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(12px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
  max-width: 320px;
}

.genderless-fv__card span {
  display: block;
  margin-bottom: 14px;
  color: #00529f;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.genderless-fv__card ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

.genderless-fv__card li {
  position: relative;
  padding-left: 22px;
  color: #253746;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.7;
}

.genderless-fv__card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #00529f;
}

@media (max-width: 900px) {
  .genderless-fv {
    padding: 130px 0 80px;
  }

  .genderless-fv__inner {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .genderless-fv__card {
    position: static;
    max-width: none;
    margin-top: 20px;
  }
}

@media (max-width: 600px) {
  .genderless-fv__buttons {
    flex-direction: column;
  }

  .genderless-fv__btn {
    width: 100%;
  }

  .genderless-fv__image img {
    aspect-ratio: 4 / 5;
  }
}

/* WHY GENDERLESS SKINCARE */
.genderless-why {
  padding: 120px 0;
  background: #fff;
}

.genderless-why__inner {
  width: min(1200px, 90%);
  margin: auto;
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 80px;
}

.genderless-why__content {
  position: sticky;
  top: 120px;
  align-self: start;
}

.genderless-why__label {
  margin-bottom: 16px;
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.genderless-why__content h2 {
  margin-bottom: 24px;
  color: #1f2f3f;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
}

.genderless-why__content p {
  margin-bottom: 20px;
  color: #556270;
  line-height: 2;
}

.genderless-why__message {
  margin-top: 36px;
  padding: 28px;
  border-radius: 20px;
  background: #f7fbff;
  border-left: 4px solid #00529f;
  color: #1f2f3f;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.8;
}

.genderless-why__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.genderless-why-card {
  padding: 36px;
  border-radius: 24px;
  background: #fff;
  border: 1px solid rgba(0, 82, 159, 0.08);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05);
  transition: 0.3s;
}

.genderless-why-card:hover {
  transform: translateY(-4px);
}

.genderless-why-card span {
  display: inline-block;
  margin-bottom: 14px;
  color: #00529f;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.genderless-why-card h3 {
  margin-bottom: 14px;
  color: #253746;
  font-size: 22px;
  line-height: 1.5;
}

.genderless-why-card p {
  color: #5a6670;
  line-height: 1.9;
}

@media (max-width: 900px) {
  .genderless-why {
    padding: 80px 0;
  }

  .genderless-why__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .genderless-why__content {
    position: static;
  }
}

@media (max-width: 600px) {
  .genderless-why__grid {
    grid-template-columns: 1fr;
  }

  .genderless-why-card {
    padding: 28px;
  }

  .genderless-why-card h3 {
    font-size: 20px;
  }

  .genderless-why__message {
    font-size: 18px;
  }
}

/* BRAND TYPE */
.genderless-brand {
  padding: 120px 0;
  background: #f7fbff;
}

.genderless-brand__inner {
  width: min(1200px, 90%);
  margin: auto;
}

.genderless-brand__head {
  margin: 0 auto 60px;
  text-align: center;
}

.genderless-brand__label {
  margin-bottom: 16px;
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.genderless-brand__head h2 {
  margin-bottom: 24px;
  color: #1f2f3f;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
}

.genderless-brand__head p {
  color: #556270;
  line-height: 2;
}

.genderless-brand__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}

.genderless-brand-card {
  overflow: hidden;
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
  transition: 0.3s;
}

.genderless-brand-card:hover {
  transform: translateY(-6px);
}

.genderless-brand-card img {
  width: 100%;
  display: block;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.genderless-brand-card__content {
  padding: 30px;
}

.genderless-brand-card span {
  display: inline-block;
  margin-bottom: 12px;
  color: #00529f;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.genderless-brand-card h3 {
  margin-bottom: 14px;
  color: #253746;
  font-size: 24px;
  line-height: 1.5;
}

.genderless-brand-card p {
  color: #5a6670;
  line-height: 1.9;
}

@media (max-width: 768px) {
  .genderless-brand {
    padding: 80px 0;
  }

  .genderless-brand__grid {
    grid-template-columns: 1fr;
  }

  .genderless-brand-card__content {
    padding: 24px;
  }

  .genderless-brand-card h3 {
    font-size: 22px;
  }
}

/* PRODUCT SERIES */
.genderless-series {
  padding: 120px 0;
  background: #fff;
}

.genderless-series__inner {
  width: min(1200px, 90%);
  margin: auto;
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 70px;
  align-items: center;
}

.genderless-series__visual {
  overflow: hidden;
  border-radius: 34px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.12);
}

.genderless-series__visual img {
  display: block;
  width: 100%;
  aspect-ratio: 5 / 6;
  object-fit: cover;
}

.genderless-series__label {
  margin-bottom: 16px;
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.genderless-series__content h2 {
  margin-bottom: 24px;
  color: #1f2f3f;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
}

.genderless-series__lead {
  margin-bottom: 36px;
  color: #556270;
  line-height: 2;
}

.genderless-series__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.genderless-series__list article {
  padding: 26px;
  border-radius: 22px;
  background: #f7fbff;
  border: 1px solid rgba(0, 82, 159, 0.08);
}

.genderless-series__list span {
  display: inline-block;
  margin-bottom: 10px;
  color: #00529f;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.genderless-series__list h3 {
  margin-bottom: 10px;
  color: #253746;
  font-size: 22px;
}

.genderless-series__list p {
  color: #5a6670;
  line-height: 1.8;
}

@media (max-width: 900px) {
  .genderless-series {
    padding: 80px 0;
  }

  .genderless-series__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .genderless-series__visual img {
    aspect-ratio: 16 / 10;
  }
}

@media (max-width: 600px) {
  .genderless-series__list {
    grid-template-columns: 1fr;
  }

  .genderless-series__list article {
    padding: 22px;
  }
}

/* CONSULTATION */
.genderless-consultation {
  padding: 120px 0;
  background: #f7fbff;
}

.genderless-consultation__inner {
  width: min(1200px, 90%);
  margin: auto;
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 70px;
  align-items: start;
}

.genderless-consultation__visual {
  position: sticky;
  top: 120px;
  overflow: hidden;
  border-radius: 32px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.12);
}

.genderless-consultation__visual img {
  width: 100%;
  display: block;
  aspect-ratio: 5 / 4;
  object-fit: cover;
}

.genderless-consultation__label {
  margin-bottom: 16px;
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.genderless-consultation__content h2 {
  margin-bottom: 22px;
  color: #1f2f3f;
  font-size: clamp(30px, 4vw, 36px);
  font-weight: 700;
  line-height: 1.5;
}

.genderless-consultation__lead {
  margin-bottom: 34px;
  color: #556270;
  line-height: 2;
}

.genderless-consultation__list {
  display: grid;
  gap: 14px;
}

.genderless-consultation-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 20px 22px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
}

.genderless-consultation-item span {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #00529f;
  position: relative;
}

.genderless-consultation-item span::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 5px;
  width: 6px;
  height: 10px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
}

.genderless-consultation-item p {
  margin: 0;
  color: #2d3b47;
  font-weight: 600;
  line-height: 1.8;
}

@media (max-width: 900px) {
  .genderless-consultation {
    padding: 80px 0;
  }

  .genderless-consultation__inner {
    grid-template-columns: 1fr;
  }

  .genderless-consultation__visual {
    position: static;
  }
}

/* WHY QBI WORLD */
.genderless-strength {
  padding: 120px 0;
  background: #fff;
}

.genderless-strength__inner {
  width: min(1100px, 90%);
  margin: auto;
}

.genderless-strength__head {
  margin: 0 auto 70px;
  text-align: center;
}

.genderless-strength__label {
  margin-bottom: 16px;
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.genderless-strength__head h2 {
  margin-bottom: 24px;
  color: #1f2f3f;
  font-size: clamp(30px, 4vw, 38px);
  font-weight: 700;
  line-height: 1.5;
}

.genderless-strength__head p {
  color: #556270;
  line-height: 2;
}

.genderless-strength__timeline {
  position: relative;
  max-width: 900px;
  margin: auto;
}

.genderless-strength__timeline::before {
  content: "";
  position: absolute;
  left: 28px;
  top: 20px;
  bottom: 20px;
  width: 2px;
  background: linear-gradient(
    to bottom,
    rgba(0, 82, 159, 0.25),
    rgba(0, 82, 159, 0.08)
  );
}

.genderless-step {
  position: relative;
  display: flex;
  gap: 30px;
  padding-bottom: 40px;
}

.genderless-step:last-child {
  padding-bottom: 0;
}

.genderless-step__number {
  position: relative;
  z-index: 2;
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #00529f;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
}

.genderless-step__content {
  flex: 1;
  padding: 30px;
  border-radius: 24px;
  background: #fff;
  border: 1px solid rgba(0, 82, 159, 0.08);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05);
}

.genderless-step__content span {
  display: inline-block;
  margin-bottom: 10px;
  color: #00529f;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.genderless-step__content h3 {
  margin-bottom: 14px;
  color: #253746;
  font-size: 24px;
}

.genderless-step__content p {
  color: #5a6670;
  line-height: 1.9;
}

@media (max-width: 768px) {
  .genderless-strength {
    padding: 80px 0;
  }

  .genderless-step {
    gap: 18px;
  }

  .genderless-step__number {
    width: 46px;
    height: 46px;
    font-size: 12px;
  }

  .genderless-strength__timeline::before {
    left: 22px;
  }

  .genderless-step__content {
    padding: 24px;
  }

  .genderless-step__content h3 {
    font-size: 22px;
  }
}

/* CTA */
.genderless-cta {
  position: relative;
  overflow: hidden;
  padding: 120px 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.1)),
    url("../../assets/img/lineup/facecare/genderless-skincare/cta-bg.webp");
  background-size: cover;
  background-position: center;
}

.genderless-cta__inner {
  width: min(900px, 90%);
  margin: auto;
  text-align: center;
  padding: 60px 30px;
  border-radius: 32px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 20px 50px rgba(0, 82, 159, 0.08);
}

.genderless-cta__label {
  margin-bottom: 16px;
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.genderless-cta h2 {
  margin-bottom: 24px;
  color: #1f2f3f;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
}

.genderless-cta__text {
  max-width: 720px;
  margin: 0 auto 40px;
  color: #42515d;
  line-height: 2;
}

.genderless-cta__buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
}

.genderless-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 280px;
  padding: 18px 30px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  transition: 0.3s;
}

.genderless-cta__btn--primary {
  background: #00529f;
  color: #fff;
}

.genderless-cta__btn--primary:hover {
  background: #003f7c;
  transform: translateY(-2px);
}

.genderless-cta__btn--secondary {
  background: rgba(255, 255, 255, 0.9);
  color: #00529f;
  border: 1px solid rgba(0, 82, 159, 0.15);
}

.genderless-cta__btn--secondary:hover {
  background: #fff;
  transform: translateY(-2px);
}

@media (max-width: 768px) {
  .genderless-cta {
    padding: 80px 0;
  }

  .genderless-cta__inner {
    padding: 40px 24px;
  }

  .genderless-cta__buttons {
    flex-direction: column;
  }

  .genderless-cta__btn {
    width: 100%;
    min-width: auto;
  }
}

/* /lineup/facecare/salon-skincare/ */
/* Salon Skincare FV */
.salon-fv {
  position: relative;
  overflow: hidden;
  padding: 160px 0 92px;
  background:
    radial-gradient(
      circle at 88% 18%,
      rgba(173, 214, 255, 0.34) 0%,
      rgba(173, 214, 255, 0) 34%
    ),
    radial-gradient(
      circle at 76% 82%,
      rgba(220, 235, 245, 0.72) 0%,
      rgba(220, 235, 245, 0) 40%
    ),
    linear-gradient(135deg, #f8fbff 0%, #edf4fb 58%, #ffffff 100%);
}

.salon-fv__bg-text {
  position: absolute;
  right: -60px;
  bottom: 18px;
  color: rgba(0, 82, 159, 0.055);
  font-size: clamp(60px, 9vw, 140px);
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}

.salon-fv__inner {
  position: relative;
  z-index: 1;
  width: min(1200px, 90%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.84fr 1.16fr;
  gap: 58px;
  align-items: center;
}

.salon-fv__content {
  max-width: 570px;
}

.salon-fv__label {
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  margin-bottom: 24px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #d8e7f7;
  border-radius: 999px;
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 8px 24px rgba(0, 82, 159, 0.06);
}

.salon-fv__title {
  margin: 0 0 24px;
  color: #1f2f45;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.48;
  letter-spacing: 0.02em;
}

.salon-fv__lead {
  margin: 0 0 30px;
  color: #526776;
  font-size: 17px;
  line-height: 2;
}

.salon-fv__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 0 0 36px;
}

.salon-fv__tags li {
  display: inline-flex;
  align-items: center;
  padding: 10px 16px;
  background: #fff;
  border: 1px solid #dbe9f7;
  border-radius: 999px;
  color: #333;
  font-size: 14px;
  font-weight: 600;
}

.salon-fv__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.salon-fv__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 250px;
  padding: 18px 30px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.3s ease;
}

.salon-fv__btn--primary {
  background: #00529f;
  color: #fff;
  box-shadow: 0 14px 28px rgba(0, 82, 159, 0.18);
}

.salon-fv__btn--primary:hover {
  background: #003f7c;
  transform: translateY(-2px);
}

.salon-fv__btn--secondary {
  background: rgba(255, 255, 255, 0.86);
  color: #00529f;
  border: 1px solid #00529f;
}

.salon-fv__btn--secondary:hover {
  background: #f5f9ff;
  transform: translateY(-2px);
}

.salon-fv__visual {
  position: relative;
}

.salon-fv__image {
  position: relative;
  overflow: hidden;
  border-radius: 30px;
  box-shadow: 0 26px 64px rgba(0, 82, 159, 0.16);
}

.salon-fv__image::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    135deg,
    rgba(0, 82, 159, 0.08),
    rgba(255, 255, 255, 0)
  );
  pointer-events: none;
}

.salon-fv__image img {
  width: 100%;
  aspect-ratio: 16 / 11;
  display: block;
  object-fit: cover;
}

.salon-fv__floating {
  position: absolute;
  z-index: 2;
  width: 230px;
  padding: 18px 20px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(216, 231, 247, 0.9);
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(0, 82, 159, 0.12);
  backdrop-filter: blur(10px);
}

.salon-fv__floating span {
  display: inline-block;
  margin-bottom: 6px;
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.salon-fv__floating p {
  margin: 0;
  color: #333;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
}

.salon-fv__floating--top {
  top: 28px;
  left: -34px;
}

.salon-fv__floating--bottom {
  right: -24px;
  bottom: 32px;
}

@media (max-width: 1024px) {
  .salon-fv__inner {
    grid-template-columns: 1fr;
    gap: 44px;
  }

  .salon-fv__content {
    max-width: 720px;
  }

  .salon-fv__title {
    font-size: clamp(30px, 4vw, 40px);
    font-weight: 700;
  }

  .salon-fv__visual {
    max-width: 760px;
  }
}

@media (max-width: 768px) {
  .salon-fv {
    padding: 120px 0 66px;
  }

  .salon-fv__inner {
    width: min(100% - 40px, 1200px);
    gap: 34px;
  }

  .salon-fv__title {
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 700;
    line-height: 1.55;
  }

  .salon-fv__lead {
    font-size: 15px;
    line-height: 1.9;
  }

  .salon-fv__tags {
    gap: 10px;
    margin-bottom: 30px;
  }

  .salon-fv__tags li {
    font-size: 13px;
    padding: 9px 13px;
  }

  .salon-fv__buttons {
    flex-direction: column;
  }

  .salon-fv__btn {
    width: 100%;
    min-width: auto;
    padding: 17px 22px;
  }

  .salon-fv__image {
    border-radius: 22px;
  }

  .salon-fv__image img {
    aspect-ratio: 4 / 3;
  }

  .salon-fv__floating {
    position: static;
    width: 100%;
    margin-top: 12px;
  }

  .salon-fv__bg-text {
    display: none;
  }
}

/* FOR SALON OWNER */
.salon-owner {
  position: relative;
  overflow: hidden;
  padding: 115px 0;
  background: #fff;
}

.salon-owner::before {
  content: "";
  position: absolute;
  right: -180px;
  top: 80px;
  width: 480px;
  height: 480px;
  background: radial-gradient(
    circle,
    rgba(0, 82, 159, 0.08) 0%,
    rgba(0, 82, 159, 0) 70%
  );
  pointer-events: none;
}

.salon-owner__inner {
  position: relative;
  z-index: 1;
  width: min(1200px, 90%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: 76px;
  align-items: center;
}

.salon-owner__visual {
  position: relative;
  min-height: 620px;
  border-radius: 30px;
  overflow: hidden;
  box-shadow: 0 26px 60px rgba(0, 82, 159, 0.14);
}

.salon-owner__visual::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0) 45%,
      rgba(0, 43, 84, 0.28) 100%
    ),
    linear-gradient(135deg, rgba(0, 82, 159, 0.08), rgba(255, 255, 255, 0));
  pointer-events: none;
}

.salon-owner__visual img {
  width: 100%;
  height: 100%;
  min-height: 620px;
  display: block;
  object-fit: cover;
}

.salon-owner__badge {
  position: absolute;
  z-index: 2;
  left: 28px;
  right: 28px;
  bottom: 28px;
  padding: 22px 24px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 20px;
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 42px rgba(0, 82, 159, 0.12);
}

.salon-owner__badge span {
  display: inline-block;
  margin-bottom: 8px;
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.salon-owner__badge p {
  margin: 0;
  color: #22364d;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.7;
}

.salon-owner__label {
  margin: 0 0 14px;
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.salon-owner__content h2 {
  margin: 0 0 22px;
  color: #222;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
}

.salon-owner__lead {
  margin: 0 0 44px;
  color: #555;
  font-size: 16px;
  line-height: 2;
}

.salon-owner__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.salon-owner-card {
  position: relative;
  overflow: hidden;
  padding: 26px 26px 24px;
  background: #f8fbff;
  border: 1px solid #dbe9f7;
  border-radius: 20px;
  transition: all 0.3s ease;
}

.salon-owner-card::before {
  content: "";
  position: absolute;
  right: -42px;
  top: -42px;
  width: 110px;
  height: 110px;
  background: rgba(0, 82, 159, 0.06);
  border-radius: 50%;
  transition: all 0.3s ease;
}

.salon-owner-card:hover {
  transform: translateY(-4px);
  background: #fff;
  box-shadow: 0 16px 36px rgba(0, 82, 159, 0.09);
}

.salon-owner-card:hover::before {
  transform: scale(1.22);
  background: rgba(0, 82, 159, 0.09);
}

.salon-owner-card span {
  display: inline-flex;
  margin-bottom: 14px;
  padding: 7px 13px;
  background: #fff;
  border: 1px solid #dbe9f7;
  border-radius: 999px;
  color: #00529f;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.salon-owner-card h3 {
  position: relative;
  z-index: 1;
  margin: 0 0 10px;
  color: #222;
  font-size: 20px;
  line-height: 1.5;
  font-weight: 700;
}

.salon-owner-card p {
  position: relative;
  z-index: 1;
  margin: 0;
  color: #555;
  font-size: 14px;
  line-height: 1.9;
}

@media (max-width: 1024px) {
  .salon-owner__inner {
    grid-template-columns: 1fr;
    gap: 54px;
  }

  .salon-owner__visual {
    min-height: 460px;
  }

  .salon-owner__visual img {
    min-height: 460px;
  }
}

@media (max-width: 768px) {
  .salon-owner {
    padding: 72px 0;
  }

  .salon-owner__inner {
    width: min(100% - 40px, 1200px);
    gap: 42px;
  }

  .salon-owner__visual {
    min-height: auto;
    border-radius: 24px;
  }

  .salon-owner__visual img {
    min-height: auto;
    aspect-ratio: 4 / 3;
  }

  .salon-owner__badge {
    position: static;
    margin-top: 14px;
    padding: 20px;
    background: #f8fbff;
    border: 1px solid #dbe9f7;
    box-shadow: none;
  }

  .salon-owner__content h2 {
    font-size: clamp(26px, 4vw, 40px);
    font-weight: 700;
  }

  .salon-owner__lead {
    margin-bottom: 34px;
    font-size: 15px;
    line-height: 1.9;
  }

  .salon-owner__list {
    grid-template-columns: 1fr;
  }

  .salon-owner-card {
    padding: 24px;
  }

  .salon-owner-card h3 {
    font-size: 18px;
  }
}

/* SALON PRODUCT PLANNING */
.salon-plan {
  position: relative;
  overflow: hidden;
  padding: 115px 0;
  background: #f8fbff;
}

.salon-plan::before {
  content: "";
  position: absolute;
  left: -180px;
  top: 140px;
  width: 520px;
  height: 520px;
  background: radial-gradient(
    circle,
    rgba(0, 82, 159, 0.08) 0%,
    rgba(0, 82, 159, 0) 70%
  );
  pointer-events: none;
}

.salon-plan__inner {
  position: relative;
  z-index: 1;
  width: min(1200px, 90%);
  margin: 0 auto;
}

.salon-plan__head {
  margin-bottom: 58px;
}

.salon-plan__label {
  margin: 0 0 14px;
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.salon-plan__head h2 {
  margin: 0 0 22px;
  color: #222;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
}

.salon-plan__head p {
  margin: 0;
  color: #555;
  font-size: 16px;
  line-height: 2;
}

.salon-plan__grid {
  display: grid;
  grid-template-columns: 1.12fr 0.88fr 0.88fr;
  gap: 24px;
  align-items: stretch;
}

.salon-plan-card {
  overflow: hidden;
  background: #fff;
  border: 1px solid #dbe9f7;
  border-radius: 24px;
  box-shadow: 0 10px 28px rgba(0, 82, 159, 0.05);
  transition: all 0.3s ease;
}

.salon-plan-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 42px rgba(0, 82, 159, 0.1);
}

.salon-plan-card--large {
  grid-row: span 2;
}

.salon-plan-card__image {
  overflow: hidden;
  aspect-ratio: 16 / 10;
}

.salon-plan-card--large .salon-plan-card__image {
  aspect-ratio: 4 / 5;
}

.salon-plan-card__image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.salon-plan-card:hover .salon-plan-card__image img {
  transform: scale(1.05);
}

.salon-plan-card__body {
  padding: 28px;
}

.salon-plan-card__body span {
  display: inline-flex;
  margin-bottom: 14px;
  padding: 7px 13px;
  background: #eef6ff;
  border-radius: 999px;
  color: #00529f;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.salon-plan-card__body h3 {
  margin: 0 0 12px;
  color: #222;
  font-size: 22px;
  line-height: 1.5;
  font-weight: 700;
}

.salon-plan-card__body p {
  margin: 0;
  color: #555;
  font-size: 15px;
  line-height: 1.9;
}

.salon-plan-card--large .salon-plan-card__body {
  padding: 34px;
}

.salon-plan-card--large .salon-plan-card__body h3 {
  font-size: 26px;
}

@media (max-width: 1024px) {
  .salon-plan__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .salon-plan-card--large {
    grid-row: auto;
    grid-column: span 2;
  }

  .salon-plan-card--large .salon-plan-card__image {
    aspect-ratio: 16 / 8;
  }
}

@media (max-width: 768px) {
  .salon-plan {
    padding: 72px 0;
  }

  .salon-plan__inner {
    width: min(100% - 40px, 1200px);
  }

  .salon-plan__head {
    margin-bottom: 40px;
  }

  .salon-plan__head h2 {
    font-size: clamp(30px, 4vw, 40px);
    font-weight: 700;
  }

  .salon-plan__head p {
    font-size: 15px;
    line-height: 1.9;
  }

  .salon-plan__grid {
    grid-template-columns: 1fr;
  }

  .salon-plan-card--large {
    grid-column: auto;
  }

  .salon-plan-card--large .salon-plan-card__image,
  .salon-plan-card__image {
    aspect-ratio: 4 / 3;
  }

  .salon-plan-card__body,
  .salon-plan-card--large .salon-plan-card__body {
    padding: 24px;
  }

  .salon-plan-card__body h3,
  .salon-plan-card--large .salon-plan-card__body h3 {
    font-size: 20px;
  }
}

/* WHY SALON BRAND */
.salon-brand {
  position: relative;
  overflow: hidden;
  padding: 120px 0;
  background:
    radial-gradient(
      circle at 88% 16%,
      rgba(173, 214, 255, 0.28) 0%,
      rgba(173, 214, 255, 0) 34%
    ),
    linear-gradient(135deg, #ffffff 0%, #f8fbff 54%, #edf4fb 100%);
}

.salon-brand::before {
  content: "SALON BRAND";
  position: absolute;
  right: -34px;
  bottom: 34px;
  color: rgba(0, 82, 159, 0.045);
  font-size: clamp(58px, 10vw, 136px);
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}

.salon-brand__inner {
  position: relative;
  z-index: 1;
  width: min(1080px, 90%);
  margin: 0 auto;
}

.salon-brand__head {
  margin-bottom: 64px;
}

.salon-brand__label {
  margin: 0 0 14px;
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.salon-brand__head h2 {
  margin: 0 0 22px;
  color: #222;
  font-size: clamp(30px, 4vw, 40px);
  line-height: 1.5;
  font-weight: 700;
}

.salon-brand__head p {
  margin: 0;
  color: #555;
  font-size: 16px;
  line-height: 2;
}

.salon-brand__timeline {
  position: relative;
  display: grid;
  gap: 24px;
  padding-left: 38px;
}

.salon-brand__timeline::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 18px;
  bottom: 18px;
  width: 2px;
  background: linear-gradient(180deg, #00529f 0%, rgba(0, 82, 159, 0.16) 100%);
}

.salon-brand-item {
  position: relative;
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 24px;
  align-items: start;
}

.salon-brand-item__marker {
  position: relative;
  z-index: 2;
  width: 22px;
  height: 22px;
  margin-top: 32px;
  background: #00529f;
  border: 6px solid #fff;
  border-radius: 50%;
  box-shadow:
    0 0 0 1px #dbe9f7,
    0 10px 24px rgba(0, 82, 159, 0.18);
}

.salon-brand-item__body {
  position: relative;
  overflow: hidden;
  padding: 34px 38px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #dbe9f7;
  border-radius: 24px;
  box-shadow: 0 12px 34px rgba(0, 82, 159, 0.06);
  transition: all 0.3s ease;
}

.salon-brand-item__body::before {
  content: "";
  position: absolute;
  right: -44px;
  top: -44px;
  width: 130px;
  height: 130px;
  background: rgba(0, 82, 159, 0.05);
  border-radius: 50%;
  transition: all 0.3s ease;
}

.salon-brand-item__body:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 44px rgba(0, 82, 159, 0.1);
}

.salon-brand-item__body:hover::before {
  transform: scale(1.2);
  background: rgba(0, 82, 159, 0.08);
}

.salon-brand-item__body span {
  position: relative;
  z-index: 1;
  display: inline-flex;
  margin-bottom: 12px;
  padding: 7px 13px;
  background: #eef6ff;
  border-radius: 999px;
  color: #00529f;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.salon-brand-item__body h3 {
  position: relative;
  z-index: 1;
  margin: 0 0 12px;
  color: #222;
  font-size: 24px;
  line-height: 1.5;
  font-weight: 700;
}

.salon-brand-item__body p {
  position: relative;
  z-index: 1;
  margin: 0;
  color: #555;
  font-size: 15px;
  line-height: 1.9;
}

@media (max-width: 768px) {
  .salon-brand {
    padding: 76px 0;
  }

  .salon-brand::before {
    display: none;
  }

  .salon-brand__inner {
    width: min(100% - 40px, 1080px);
  }

  .salon-brand__head {
    margin-bottom: 42px;
  }

  .salon-brand__head h2 {
    font-size: clamp(30px, 4vw, 40px);
    font-weight: 700;
  }

  .salon-brand__head p {
    font-size: 15px;
    line-height: 1.9;
  }

  .salon-brand__timeline {
    padding-left: 0;
    gap: 18px;
  }

  .salon-brand__timeline::before {
    display: none;
  }

  .salon-brand-item {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .salon-brand-item__marker {
    display: none;
  }

  .salon-brand-item__body {
    padding: 26px 24px;
    border-radius: 20px;
  }

  .salon-brand-item__body h3 {
    font-size: 20px;
  }

  .salon-brand-item__body p {
    font-size: 14px;
  }
}

/* SALON CONSULTATION */
.sc-consultation {
  position: relative;
  overflow: hidden;
  padding: 110px 0;
  background: #fff;
}

.sc-consultation::before {
  content: "";
  position: absolute;
  right: -160px;
  top: 90px;
  width: 460px;
  height: 460px;
  background: radial-gradient(
    circle,
    rgba(0, 82, 159, 0.08) 0%,
    rgba(0, 82, 159, 0) 70%
  );
  pointer-events: none;
}

.sc-consultation__inner {
  position: relative;
  z-index: 1;
  width: min(1120px, 90%);
  margin: 0 auto;
}

.sc-consultation__head {
  margin: 0 auto 58px;
  text-align: center;
}

.sc-consultation__label {
  margin: 0 0 14px;
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.sc-consultation__title {
  margin: 0 0 22px;
  color: #222;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
}

.sc-consultation__text {
  margin: 0;
  color: #555;
  font-size: 16px;
  line-height: 2;
}

.sc-consultation__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 70px;
}

.sc-consultation__card {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 112px;
  padding: 28px;
  background: #f8fbff;
  border: 1px solid #dbe9f7;
  border-radius: 22px;
  transition: all 0.3s ease;
}

.sc-consultation__card:hover {
  transform: translateY(-4px);
  background: #fff;
  box-shadow: 0 16px 36px rgba(0, 82, 159, 0.09);
}

.sc-consultation__icon {
  flex-shrink: 0;
  width: 58px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #eef6ff;
  border: 1px solid #dbe9f7;
  border-radius: 50%;
  font-size: 26px;
  line-height: 1;
}

.sc-consultation__card-text {
  margin: 0;
  color: #222;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.7;
  writing-mode: horizontal-tb;
}

@media (max-width: 1024px) {
  .sc-consultation__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .sc-consultation {
    padding: 72px 0;
  }

  .sc-consultation__inner {
    width: min(100% - 40px, 1120px);
  }

  .sc-consultation__head {
    margin-bottom: 40px;
    text-align: left;
  }

  .sc-consultation__title {
    font-size: 30px;
  }

  .sc-consultation__text {
    font-size: 15px;
    line-height: 1.9;
  }

  .sc-consultation__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .sc-consultation__card {
    min-height: auto;
    padding: 22px;
    border-radius: 18px;
  }

  .sc-consultation__icon {
    width: 52px;
    height: 52px;
    font-size: 24px;
  }

  .sc-consultation__card-text {
    font-size: 15px;
  }
}

/* WHY QBI WORLD */
.sc-strength {
  position: relative;
  overflow: hidden;
  padding: 120px 0;
  background: #f8fbff;
}

.sc-strength::before {
  content: "";
  position: absolute;
  right: -180px;
  bottom: -180px;
  width: 520px;
  height: 520px;
  background: radial-gradient(
    circle,
    rgba(0, 82, 159, 0.09) 0%,
    rgba(0, 82, 159, 0) 70%
  );
  pointer-events: none;
}

.sc-strength__inner {
  position: relative;
  z-index: 1;
  width: min(1200px, 90%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.86fr 1.14fr;
  gap: 72px;
  align-items: start;
}

.sc-strength__content {
  position: sticky;
  top: 120px;
}

.sc-strength__label {
  margin: 0 0 14px;
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.sc-strength__title {
  margin: 0 0 22px;
  color: #222;
  font-size: clamp(30px, 4vw, 38px);
  font-weight: 700;
  line-height: 1.5;
}

.sc-strength__text {
  margin: 0;
  color: #555;
  font-size: 16px;
  line-height: 2;
}

.sc-strength__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.sc-strength__card {
  position: relative;
  overflow: hidden;
  min-height: 250px;
  padding: 24px 22px;
  background: #fff;
  border: 1px solid #dbe9f7;
  border-radius: 24px;
  box-shadow: 0 10px 28px rgba(0, 82, 159, 0.05);
  transition: all 0.3s ease;
}

.sc-strength__card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 34px;
  width: 4px;
  height: 68px;
  background: #00529f;
  border-radius: 0 999px 999px 0;
}

.sc-strength__card::after {
  content: "";
  position: absolute;
  right: -44px;
  top: -44px;
  width: 126px;
  height: 126px;
  background: rgba(0, 82, 159, 0.05);
  border-radius: 50%;
  transition: all 0.3s ease;
}

.sc-strength__card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 42px rgba(0, 82, 159, 0.1);
}

.sc-strength__card:hover::after {
  transform: scale(1.22);
  background: rgba(0, 82, 159, 0.08);
}

.sc-strength__tag {
  position: relative;
  z-index: 1;
  display: inline-flex;
  margin-bottom: 16px;
  padding: 7px 13px;
  background: #eef6ff;
  border-radius: 999px;
  color: #00529f;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.sc-strength__card-title {
  position: relative;
  z-index: 1;
  margin: 0 0 14px;
  color: #222;
  font-size: 18px;
  line-height: 1.5;
  font-weight: 700;
}

.sc-strength__card-text {
  position: relative;
  z-index: 1;
  margin: 0;
  color: #555;
  font-size: 15px;
  line-height: 1.9;
}

@media (max-width: 1024px) {
  .sc-strength__inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .sc-strength__content {
    position: static;
  }
}

@media (max-width: 768px) {
  .sc-strength {
    padding: 76px 0;
  }

  .sc-strength__inner {
    width: min(100% - 40px, 1200px);
    gap: 40px;
  }

  .sc-strength__title {
    font-size: clamp(30px, 4vw, 40px);
    font-weight: 700;
  }

  .sc-strength__text {
    font-size: 15px;
    line-height: 1.9;
  }

  .sc-strength__grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .sc-strength__card {
    min-height: auto;
    padding: 28px 24px;
    border-radius: 20px;
  }

  .sc-strength__card-title {
    font-size: 16px;
  }

  .sc-strength__card-text {
    font-size: 14px;
  }
}

/* CTA */
.salon-cta {
  position: relative;
  overflow: hidden;
  padding: 120px 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.88)),
    url("../../assets/img/lineup/facecare/salon-skincare/cta-bg.webp");
  background-size: cover;
  background-position: center;
}

.salon-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(0, 82, 159, 0.08), transparent 35%),
    radial-gradient(circle at 80% 80%, rgba(0, 82, 159, 0.08), transparent 35%);
}

.salon-cta__inner {
  position: relative;
  z-index: 1;
  width: min(900px, 90%);
  margin: auto;
  text-align: center;
  background: rgba(255, 255, 255, 0);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 32px;
  padding: 70px 60px;
  box-shadow: 0 20px 50px rgba(0, 82, 159, 0.08);
}

.salon-cta__label {
  margin-bottom: 16px;
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.salon-cta h2 {
  margin-bottom: 24px;
  color: #222;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
}

.salon-cta__text {
  max-width: 700px;
  margin: 0 auto 40px;
  color: #555;
  font-size: 16px;
  line-height: 2;
}

.salon-cta__buttons {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.salon-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 280px;
  padding: 18px 30px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 700;
  transition: 0.3s;
}

.salon-cta__btn--primary {
  background: #00529f;
  color: #fff;
}

.salon-cta__btn--primary:hover {
  background: #003f7c;
  transform: translateY(-3px);
}

.salon-cta__btn--secondary {
  background: #fff;
  color: #00529f;
  border: 1px solid #00529f;
}

.salon-cta__btn--secondary:hover {
  background: #f7fbff;
  transform: translateY(-3px);
}

@media (max-width: 768px) {
  .salon-cta {
    padding: 80px 0;
  }

  .salon-cta__inner {
    padding: 50px 24px;
    border-radius: 24px;
  }

  .salon-cta h2 {
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 700;
  }

  .salon-cta__text {
    font-size: 15px;
    line-height: 1.9;
  }

  .salon-cta__btn {
    width: 100%;
    min-width: auto;
  }
}

/* /lineup/facecare/moisturizing/ */
/* Moisturizing Skincare FV */
.moisturizing-fv {
  position: relative;
  overflow: hidden;
  padding: 160px 0 95px;
  background:
    radial-gradient(
      circle at 82% 18%,
      rgba(173, 214, 255, 0.45) 0%,
      rgba(173, 214, 255, 0) 34%
    ),
    radial-gradient(
      circle at 70% 86%,
      rgba(255, 240, 220, 0.58) 0%,
      rgba(255, 240, 220, 0) 40%
    ),
    linear-gradient(135deg, #f8fbff 0%, #edf5fc 58%, #ffffff 100%);
}

.moisturizing-fv__bg-text {
  position: absolute;
  right: -50px;
  bottom: 18px;
  color: rgba(0, 82, 159, 0.055);
  font-size: clamp(60px, 10vw, 150px);
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}

.moisturizing-fv__inner {
  position: relative;
  z-index: 1;
  width: min(1200px, 90%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.86fr 1.14fr;
  gap: 58px;
  align-items: center;
}

.moisturizing-fv__content {
  max-width: 570px;
}

.moisturizing-fv__label {
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  margin-bottom: 24px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid #d8e7f7;
  border-radius: 999px;
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 8px 24px rgba(0, 82, 159, 0.06);
}

.moisturizing-fv__title {
  margin: 0 0 24px;
  color: #1f2f45;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.48;
  letter-spacing: 0.02em;
}

.moisturizing-fv__lead {
  margin: 0 0 30px;
  color: #526776;
  font-size: 17px;
  line-height: 2;
}

.moisturizing-fv__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 0 0 36px;
}

.moisturizing-fv__tags li {
  display: inline-flex;
  align-items: center;
  padding: 10px 16px;
  background: #fff;
  border: 1px solid #dbe9f7;
  border-radius: 999px;
  color: #333;
  font-size: 14px;
  font-weight: 600;
}

.moisturizing-fv__tags li::before {
  content: "✓";
  margin-right: 7px;
  color: #00529f;
  font-weight: 700;
}

.moisturizing-fv__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.moisturizing-fv__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 260px;
  padding: 18px 30px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.3s ease;
}

.moisturizing-fv__btn--primary {
  background: #00529f;
  color: #fff;
  box-shadow: 0 14px 28px rgba(0, 82, 159, 0.18);
}

.moisturizing-fv__btn--primary:hover {
  background: #003f7c;
  transform: translateY(-2px);
}

.moisturizing-fv__btn--secondary {
  background: rgba(255, 255, 255, 0.9);
  color: #00529f;
  border: 1px solid #00529f;
}

.moisturizing-fv__btn--secondary:hover {
  background: #f5f9ff;
  transform: translateY(-2px);
}

.moisturizing-fv__visual {
  position: relative;
}

.moisturizing-fv__image {
  position: relative;
  overflow: hidden;
  border-radius: 30px;
  box-shadow: 0 26px 64px rgba(0, 82, 159, 0.16);
}

.moisturizing-fv__image::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    135deg,
    rgba(0, 82, 159, 0.08),
    rgba(255, 255, 255, 0) 55%
  );
  pointer-events: none;
}

.moisturizing-fv__image img {
  width: 100%;
  aspect-ratio: 16 / 13;
  display: block;
  object-fit: cover;
}

.moisturizing-fv__card {
  position: absolute;
  z-index: 2;
  width: 220px;
  padding: 18px 20px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(216, 231, 247, 0.9);
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(0, 82, 159, 0.12);
  backdrop-filter: blur(10px);
}

.moisturizing-fv__card span {
  display: inline-block;
  margin-bottom: 6px;
  color: #00529f;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.moisturizing-fv__card p {
  margin: 0;
  color: #333;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
}

@media (max-width: 1024px) {
  .moisturizing-fv__inner {
    grid-template-columns: 1fr;
    gap: 44px;
  }

  .moisturizing-fv__content {
    max-width: 740px;
  }

  .moisturizing-fv__title {
    font-size: clamp(30px, 4vw, 40px);
    font-weight: 700;
  }

  .moisturizing-fv__visual {
    max-width: 760px;
  }
}

@media (max-width: 768px) {
  .moisturizing-fv {
    padding: 120px 0 66px;
  }

  .moisturizing-fv__inner {
    width: min(100% - 40px, 1200px);
    gap: 34px;
  }

  .moisturizing-fv__title {
    font-size: clamp(30px, 4vw, 40px);
    font-weight: 700;
    line-height: 1.55;
  }

  .moisturizing-fv__lead {
    font-size: 15px;
    line-height: 1.9;
  }

  .moisturizing-fv__tags {
    gap: 10px;
    margin-bottom: 30px;
  }

  .moisturizing-fv__tags li {
    font-size: 13px;
    padding: 9px 13px;
  }

  .moisturizing-fv__buttons {
    flex-direction: column;
  }

  .moisturizing-fv__btn {
    width: 100%;
    min-width: auto;
    padding: 17px 22px;
  }

  .moisturizing-fv__image {
    border-radius: 22px;
  }

  .moisturizing-fv__image img {
    aspect-ratio: 4 / 3;
  }

  .moisturizing-fv__card {
    position: static;
    width: 100%;
    margin-top: 12px;
  }

  .moisturizing-fv__bg-text {
    display: none;
  }
}

/* HIGH MOISTURE BRAND */
.moisturizing-brand {
  padding: 110px 0;
  background: #fff;
}

.moisturizing-brand__inner {
  width: min(1200px, 90%);
  margin: 0 auto;
}

.moisturizing-brand__head {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 70px;
  align-items: center;
  margin-bottom: 54px;
}

.moisturizing-brand__text {
  max-width: 620px;
}

.moisturizing-brand__label {
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  margin-bottom: 14px;
}

.moisturizing-brand__text h2 {
  margin: 0 0 22px;
  color: #222;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
}

.moisturizing-brand__text p {
  margin: 0;
  color: #555;
  font-size: 16px;
  line-height: 2;
}

.moisturizing-brand__image {
  position: relative;
  overflow: hidden;
  border-radius: 26px;
  box-shadow: 0 22px 54px rgba(0, 82, 159, 0.12);
}

.moisturizing-brand__image::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    135deg,
    rgba(0, 82, 159, 0.08),
    rgba(255, 255, 255, 0) 55%
  );
  pointer-events: none;
}

.moisturizing-brand__image img {
  width: 100%;
  aspect-ratio: 16 / 10;
  display: block;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.moisturizing-brand__image:hover img {
  transform: scale(1.04);
}

.moisturizing-brand__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.moisturizing-brand-card {
  position: relative;
  overflow: hidden;
  padding: 34px 28px;
  background: #f8fbff;
  border: 1px solid #dbe9f7;
  border-radius: 22px;
  transition: all 0.3s ease;
}

.moisturizing-brand-card::after {
  content: "";
  position: absolute;
  right: -36px;
  bottom: -36px;
  width: 120px;
  height: 120px;
  background: rgba(0, 82, 159, 0.05);
  border-radius: 50%;
}

.moisturizing-brand-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(0, 82, 159, 0.08);
}

.moisturizing-brand-card__icon {
  position: relative;
  z-index: 1;
  width: 62px;
  height: 62px;
  margin-bottom: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid #dbe9f7;
  border-radius: 50%;
  font-size: 28px;
  box-shadow: 0 10px 22px rgba(0, 82, 159, 0.06);
}

.moisturizing-brand-card h3 {
  position: relative;
  z-index: 1;
  margin: 0 0 14px;
  color: #222;
  font-size: 21px;
  line-height: 1.5;
  font-weight: 700;
}

.moisturizing-brand-card p {
  position: relative;
  z-index: 1;
  margin: 0;
  color: #555;
  font-size: 15px;
  line-height: 1.9;
}

@media (max-width: 1024px) {
  .moisturizing-brand__head {
    grid-template-columns: 1fr;
    gap: 44px;
  }

  .moisturizing-brand__text {
    max-width: 760px;
  }

  .moisturizing-brand__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .moisturizing-brand {
    padding: 70px 0;
  }

  .moisturizing-brand__inner {
    width: min(100% - 40px, 1200px);
  }

  .moisturizing-brand__head {
    gap: 32px;
    margin-bottom: 38px;
  }

  .moisturizing-brand__text h2 {
    font-size: clamp(30px, 4vw, 40px);
    font-weight: 700;
  }

  .moisturizing-brand__text p {
    font-size: 15px;
    line-height: 1.9;
  }

  .moisturizing-brand__image {
    border-radius: 22px;
  }

  .moisturizing-brand__image img {
    aspect-ratio: 4 / 3;
  }

  .moisturizing-brand__grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .moisturizing-brand-card {
    padding: 28px 24px;
  }

  .moisturizing-brand-card h3 {
    font-size: 19px;
  }
}

/* WHY HIGH MOISTURE */
.moisturizing-reason {
  padding: 110px 0;
  background:
    radial-gradient(
      circle at 12% 18%,
      rgba(173, 214, 255, 0.24) 0%,
      rgba(173, 214, 255, 0) 34%
    ),
    linear-gradient(135deg, #f8fbff 0%, #edf5fc 58%, #ffffff 100%);
}

.moisturizing-reason__inner {
  width: min(1200px, 90%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 72px;
  align-items: start;
}

.moisturizing-reason__heading {
  position: sticky;
  top: 120px;
}

.moisturizing-reason__label {
  margin-bottom: 14px;
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.moisturizing-reason__heading h2 {
  margin: 0 0 22px;
  color: #222;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
}

.moisturizing-reason__heading p {
  margin: 0;
  color: #555;
  font-size: 16px;
  line-height: 2;
}

.moisturizing-reason__points {
  display: grid;
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 30px 0 0;
}

.moisturizing-reason__points li {
  position: relative;
  padding: 13px 18px 13px 44px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #dbe9f7;
  border-radius: 999px;
  color: #333;
  font-size: 15px;
  font-weight: 600;
  box-shadow: 0 8px 22px rgba(0, 82, 159, 0.04);
}

.moisturizing-reason__points li::before {
  content: "✓";
  position: absolute;
  left: 19px;
  top: 50%;
  transform: translateY(-50%);
  color: #00529f;
  font-weight: 700;
}

.moisturizing-reason__list {
  display: grid;
  gap: 24px;
}

.moisturizing-reason-card {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 24px;
  padding: 34px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid #dbe9f7;
  border-radius: 24px;
  box-shadow: 0 10px 28px rgba(0, 82, 159, 0.04);
  transition: all 0.3s ease;
}

.moisturizing-reason-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 42px rgba(0, 82, 159, 0.09);
}

.moisturizing-reason-card__icon {
  width: 62px;
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #eef6ff;
  border: 1px solid #dbe9f7;
  border-radius: 50%;
  font-size: 28px;
  box-shadow: 0 10px 22px rgba(0, 82, 159, 0.06);
}

.moisturizing-reason-card__tag {
  display: inline-block;
  margin: 0 0 10px;
  color: #00529f;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.moisturizing-reason-card h3 {
  margin: 0 0 12px;
  color: #222;
  font-size: 22px;
  line-height: 1.5;
  font-weight: 700;
}

.moisturizing-reason-card p {
  margin: 0;
  color: #555;
  font-size: 15px;
  line-height: 1.9;
}

@media (max-width: 1024px) {
  .moisturizing-reason__inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .moisturizing-reason__heading {
    position: static;
  }
}

@media (max-width: 768px) {
  .moisturizing-reason {
    padding: 70px 0;
  }

  .moisturizing-reason__inner {
    width: min(100% - 40px, 1200px);
    gap: 38px;
  }

  .moisturizing-reason__heading h2 {
    font-size: clamp(30px, 4vw, 40px);
    font-weight: 700;
  }

  .moisturizing-reason__heading p {
    font-size: 15px;
    line-height: 1.9;
  }

  .moisturizing-reason__points li {
    border-radius: 16px;
    line-height: 1.6;
  }

  .moisturizing-reason-card {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 26px 24px;
    border-radius: 20px;
  }

  .moisturizing-reason-card__icon {
    width: 56px;
    height: 56px;
    font-size: 25px;
  }

  .moisturizing-reason-card h3 {
    font-size: 19px;
  }

  .moisturizing-reason-card p {
    font-size: 14px;
  }
}

/* PRODUCT PLANNING */
.moisturizing-plan {
  padding: 110px 0;
  background: #fff;
}

.moisturizing-plan__inner {
  width: min(1200px, 90%);
  margin: 0 auto;
}

.moisturizing-plan__heading {
  margin-bottom: 60px;
}

.moisturizing-plan__label {
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: 14px;
}

.moisturizing-plan__heading h2 {
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 22px;
  color: #222;
}

.moisturizing-plan__heading p {
  font-size: 16px;
  line-height: 2;
  color: #555;
}

.moisturizing-plan__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}

.moisturizing-plan-card {
  overflow: hidden;
  background: #fff;
  border: 1px solid #dbe9f7;
  border-radius: 24px;
  transition: 0.3s;
}

.moisturizing-plan-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0, 82, 159, 0.08);
}

.moisturizing-plan-card__image {
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.moisturizing-plan-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: 0.5s;
}

.moisturizing-plan-card:hover img {
  transform: scale(1.05);
}

.moisturizing-plan-card__body {
  padding: 28px;
}

.moisturizing-plan-card__tag {
  display: inline-block;
  margin-bottom: 14px;
  padding: 8px 14px;
  background: #eef6ff;
  color: #00529f;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.moisturizing-plan-card__body h3 {
  font-size: 24px;
  line-height: 1.5;
  margin-bottom: 14px;
}

.moisturizing-plan-card__body p {
  font-size: 15px;
  line-height: 1.9;
  color: #555;
}

@media (max-width: 768px) {
  .moisturizing-plan {
    padding: 70px 0;
  }

  .moisturizing-plan__heading h2 {
    font-size: clamp(30px, 4vw, 40px);
    font-weight: 700;
  }

  .moisturizing-plan__grid {
    grid-template-columns: 1fr;
  }

  .moisturizing-plan-card__body {
    padding: 24px;
  }

  .moisturizing-plan-card__body h3 {
    font-size: 20px;
  }
}

/* MOISTURIZING INGREDIENTS */
.moisture-ingredients {
  padding: 110px 0;
  background: #f8fbff;
}

.moisture-ingredients__inner {
  width: min(1200px, 90%);
  margin: 0 auto;
}

.moisture-ingredients__head {
  margin: 0 auto 60px;
  text-align: center;
}

.moisture-ingredients__label {
  display: inline-block;
  margin-bottom: 14px;
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.moisture-ingredients__head h2 {
  margin-bottom: 22px;
  color: #222;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
}

.moisture-ingredients__head p {
  color: #555;
  font-size: 16px;
  line-height: 2;
}

.moisture-ingredients__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.ingredient-card {
  padding: 34px 28px;
  background: #fff;
  border: 1px solid #dbe9f7;
  border-radius: 22px;
  transition: 0.3s;
}

.ingredient-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(0, 82, 159, 0.08);
}

.ingredient-card__icon {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  background: #eef6ff;
  border: 1px solid #dbe9f7;
  border-radius: 50%;
  font-size: 28px;
}

.ingredient-card h3 {
  margin-bottom: 14px;
  color: #222;
  font-size: 22px;
  line-height: 1.5;
}

.ingredient-card p {
  color: #555;
  font-size: 15px;
  line-height: 1.9;
}

@media (max-width: 1024px) {
  .moisture-ingredients__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .moisture-ingredients {
    padding: 70px 0;
  }

  .moisture-ingredients__head {
    margin-bottom: 40px;
    text-align: left;
  }

  .moisture-ingredients__head h2 {
    font-size: clamp(30px, 4vw, 40px);
    font-weight: 700;
  }

  .moisture-ingredients__head p {
    font-size: 15px;
    line-height: 1.9;
  }

  .moisture-ingredients__grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .ingredient-card {
    padding: 28px 24px;
  }

  .ingredient-card h3 {
    font-size: 20px;
  }
}

/* CONSULTATION */
.moisturizing-consultation {
  padding: 110px 0;
  background: #fff;
}

.moisturizing-consultation__inner {
  width: min(1200px, 90%);
  margin: 0 auto;
}

.moisturizing-consultation__head {
  text-align: center;
  margin: 0 auto 60px;
}

.moisturizing-consultation__label {
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: 14px;
}

.moisturizing-consultation__head h2 {
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 20px;
  color: #222;
}

.moisturizing-consultation__head p {
  font-size: 16px;
  line-height: 2;
  color: #555;
}

.moisturizing-consultation__content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.moisturizing-consultation__image {
  overflow: hidden;
  border-radius: 24px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
}

.moisturizing-consultation__image img {
  width: 100%;
  display: block;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.moisturizing-consultation__list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.consultation-item {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 22px 24px;
  background: #f8fbff;
  border: 1px solid #dbe9f7;
  border-radius: 18px;
  transition: 0.3s;
}

.consultation-item:hover {
  transform: translateX(6px);
}

.consultation-item span {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #00529f;
  color: #fff;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 700;
}

.consultation-item p {
  font-size: 17px;
  font-weight: 600;
  color: #222;
  line-height: 1.6;
}

@media (max-width: 1024px) {
  .moisturizing-consultation__content {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .moisturizing-consultation {
    padding: 70px 0;
  }

  .moisturizing-consultation__head {
    text-align: left;
    margin-bottom: 40px;
  }

  .moisturizing-consultation__head h2 {
    font-size: clamp(30px, 4vw, 40px);
    font-weight: 700;
  }

  .moisturizing-consultation__head p {
    font-size: 15px;
    line-height: 1.9;
  }

  .consultation-item {
    padding: 18px;
  }

  .consultation-item p {
    font-size: 15px;
  }
}

/* WHY QBI WORLD */
.moisturizing-strength {
  position: relative;
  padding: 120px 0;
  background:
    radial-gradient(
      circle at 18% 18%,
      rgba(173, 214, 255, 0.24) 0%,
      rgba(173, 214, 255, 0) 34%
    ),
    linear-gradient(135deg, #f8fbff 0%, #edf5fc 58%, #ffffff 100%);
}

.moisturizing-strength__inner {
  width: min(1200px, 90%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 72px;
  align-items: start;
}

.moisturizing-strength__message {
  max-width: 560px;
  position: sticky;
  top: 120px;
  align-self: start;
}

.moisturizing-strength__label {
  margin-bottom: 14px;
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.moisturizing-strength__message h2 {
  margin: 0 0 22px;
  color: #222;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.45;
}

.moisturizing-strength__message > p {
  margin: 0 0 34px;
  color: #555;
  font-size: 16px;
  line-height: 2;
}

.moisturizing-strength__box {
  position: relative;
  padding: 32px 34px;
  background: #00529f;
  color: #fff;
  border-radius: 24px;
  font-size: 25px;
  font-weight: 700;
  line-height: 1.7;
  box-shadow: 0 20px 42px rgba(0, 82, 159, 0.18);
}

.moisturizing-strength__box::after {
  content: "";
  position: absolute;
  right: 28px;
  bottom: -18px;
  width: 72px;
  height: 72px;
  background: rgba(255, 255, 255, 0.14);
  border-radius: 50%;
}

.moisturizing-strength__list {
  display: grid;
  gap: 20px;
}

.moisturizing-strength-item {
  padding: 28px 30px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid #dbe9f7;
  border-radius: 22px;
  box-shadow: 0 10px 28px rgba(0, 82, 159, 0.04);
  transition: 0.3s;
}

.moisturizing-strength-item:hover {
  transform: translateX(6px);
  box-shadow: 0 18px 42px rgba(0, 82, 159, 0.09);
}

.moisturizing-strength-item span {
  display: inline-block;
  margin-bottom: 10px;
  color: #00529f;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.moisturizing-strength-item h3 {
  margin: 0 0 10px;
  color: #222;
  font-size: 22px;
  line-height: 1.5;
  font-weight: 700;
}

.moisturizing-strength-item p {
  margin: 0;
  color: #555;
  font-size: 15px;
  line-height: 1.9;
}

@media (max-width: 1024px) {
  .moisturizing-strength__inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .moisturizing-strength__message {
    max-width: 760px;
    position: static;
  }
}

@media (max-width: 768px) {
  .moisturizing-strength {
    padding: 70px 0;
  }

  .moisturizing-strength__inner {
    width: min(100% - 40px, 1200px);
    gap: 38px;
  }

  .moisturizing-strength__message h2 {
    font-size: clamp(30px, 4vw, 40px);
    font-weight: 700;
  }

  .moisturizing-strength__message > p {
    font-size: 15px;
    line-height: 1.9;
  }

  .moisturizing-strength__box {
    padding: 26px 24px;
    border-radius: 20px;
    font-size: 21px;
  }

  .moisturizing-strength-item {
    padding: 24px;
  }

  .moisturizing-strength-item:hover {
    transform: translateY(-3px);
  }

  .moisturizing-strength-item h3 {
    font-size: 19px;
  }

  .moisturizing-strength-item p {
    font-size: 14px;
  }
}

/* CTA */
.moisturizing-cta {
  position: relative;
  overflow: hidden;
  padding: 120px 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)),
    url("../../assets/img/lineup/facecare/moisturizing/cta-bg.webp");
  background-size: cover;
  background-position: center;
}

.moisturizing-cta__inner {
  position: relative;
  z-index: 1;
  width: min(900px, 90%);
  margin: auto;
  text-align: center;
  background: rgba(255, 255, 255, 0);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 32px;
  padding: 50px 24px;
  box-shadow: 0 20px 50px rgba(0, 82, 159, 0.08);
}

.moisturizing-cta__label {
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  margin-bottom: 16px;
}

.moisturizing-cta h2 {
  margin-bottom: 24px;
  color: #222;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
}

.moisturizing-cta__text {
  max-width: 760px;
  margin: 0 auto 40px;
  color: #555;
  font-size: 16px;
  line-height: 2;
}

.moisturizing-cta__buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px;
}

.moisturizing-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 320px;
  padding: 18px 32px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  transition: 0.3s;
}

.moisturizing-cta__btn--primary {
  background: #00529f;
  color: #fff;
}

.moisturizing-cta__btn--primary:hover {
  background: #003f7c;
}

.moisturizing-cta__btn--secondary {
  background: #fff;
  color: #00529f;
  border: 1px solid #00529f;
}

.moisturizing-cta__btn--secondary:hover {
  background: #f5f9ff;
}

@media (max-width: 768px) {
  .moisturizing-cta {
    padding: 80px 0;
  }

  .moisturizing-cta h2 {
    font-size: clamp(30px, 4vw, 40px);
    font-weight: 700;
  }

  .moisturizing-cta__text {
    font-size: 15px;
    line-height: 1.9;
  }

  .moisturizing-cta__buttons {
    flex-direction: column;
  }

  .moisturizing-cta__btn {
    min-width: auto;
    width: 100%;
  }
}
/* /lineup/facecare/aging-care/ */
/* Aging Care OEM FV */
.aging-fv {
  position: relative;
  overflow: hidden;
  padding: 160px 0 100px;
  background:
    radial-gradient(
      circle at 80% 18%,
      rgba(224, 199, 154, 0.28) 0%,
      rgba(224, 199, 154, 0) 34%
    ),
    radial-gradient(
      circle at 12% 85%,
      rgba(173, 214, 255, 0.28) 0%,
      rgba(173, 214, 255, 0) 38%
    ),
    linear-gradient(135deg, #f8fbff 0%, #eef6ff 54%, #fffaf4 100%);
}

.aging-fv__bg-text {
  position: absolute;
  right: -40px;
  bottom: 18px;
  color: rgba(0, 82, 159, 0.055);
  font-size: clamp(58px, 10vw, 148px);
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}

.aging-fv__inner {
  position: relative;
  z-index: 1;
  width: min(1200px, 90%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.88fr 1.12fr;
  gap: 62px;
  align-items: center;
}

.aging-fv__content {
  max-width: 590px;
}

.aging-fv__label {
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  margin-bottom: 24px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid #d8e7f7;
  border-radius: 999px;
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 8px 24px rgba(0, 82, 159, 0.06);
}

.aging-fv__title {
  margin: 0 0 24px;
  color: #1f2f45;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.02em;
}

.aging-fv__lead {
  margin: 0 0 30px;
  color: #526776;
  font-size: 17px;
  line-height: 2;
}

.aging-fv__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 0 0 36px;
}

.aging-fv__tags li {
  display: inline-flex;
  align-items: center;
  padding: 10px 16px;
  background: #fff;
  border: 1px solid #dbe9f7;
  border-radius: 999px;
  color: #333;
  font-size: 14px;
  font-weight: 600;
}

.aging-fv__tags li::before {
  content: "✓";
  margin-right: 7px;
  color: #00529f;
  font-weight: 700;
}

.aging-fv__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.aging-fv__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 260px;
  padding: 18px 30px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.3s ease;
}

.aging-fv__btn--primary {
  background: #00529f;
  color: #fff;
  box-shadow: 0 14px 28px rgba(0, 82, 159, 0.18);
}

.aging-fv__btn--primary:hover {
  background: #003f7c;
  transform: translateY(-2px);
}

.aging-fv__btn--secondary {
  background: rgba(255, 255, 255, 0.92);
  color: #00529f;
  border: 1px solid #00529f;
}

.aging-fv__btn--secondary:hover {
  background: #f5f9ff;
  transform: translateY(-2px);
}

.aging-fv__visual {
  position: relative;
}

.aging-fv__image {
  position: relative;
  overflow: hidden;
  border-radius: 32px;
  box-shadow: 0 28px 70px rgba(0, 82, 159, 0.15);
}

.aging-fv__image::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(135deg, rgba(0, 82, 159, 0.1), rgba(255, 255, 255, 0) 52%),
    linear-gradient(0deg, rgba(255, 250, 244, 0.18), rgba(255, 255, 255, 0) 50%);
  pointer-events: none;
}

.aging-fv__image img {
  width: 100%;
  aspect-ratio: 16 / 13;
  display: block;
  object-fit: cover;
}

.aging-fv__note {
  position: absolute;
  left: -28px;
  bottom: 34px;
  z-index: 2;
  width: 245px;
  padding: 20px 22px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(216, 231, 247, 0.95);
  border-radius: 20px;
  box-shadow: 0 18px 42px rgba(0, 82, 159, 0.13);
  backdrop-filter: blur(10px);
}

.aging-fv__note span {
  display: inline-block;
  margin-bottom: 7px;
  color: #00529f;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.aging-fv__note p {
  margin: 0;
  color: #222;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.7;
}

@media (max-width: 1024px) {
  .aging-fv__inner {
    grid-template-columns: 1fr;
    gap: 46px;
  }

  .aging-fv__content {
    max-width: 760px;
  }

  .aging-fv__visual {
    max-width: 760px;
  }
}

@media (max-width: 768px) {
  .aging-fv {
    padding: 120px 0 70px;
  }

  .aging-fv__inner {
    width: min(100% - 40px, 1200px);
    gap: 34px;
  }

  .aging-fv__title {
    font-size: clamp(30px, 4vw, 40px);
    font-weight: 700;
    line-height: 1.55;
  }

  .aging-fv__lead {
    font-size: 15px;
    line-height: 1.9;
  }

  .aging-fv__tags {
    gap: 10px;
    margin-bottom: 30px;
  }

  .aging-fv__tags li {
    padding: 9px 13px;
    font-size: 13px;
  }

  .aging-fv__buttons {
    flex-direction: column;
  }

  .aging-fv__btn {
    width: 100%;
    min-width: auto;
    padding: 17px 22px;
  }

  .aging-fv__image {
    border-radius: 22px;
  }

  .aging-fv__image img {
    aspect-ratio: 4 / 3;
  }

  .aging-fv__note {
    position: static;
    width: 100%;
    margin-top: 14px;
  }

  .aging-fv__bg-text {
    display: none;
  }
}

/* AGING CARE BRAND */
.aging-brand {
  padding: 110px 0;
  background: #fff;
}

.aging-brand__inner {
  width: min(1200px, 90%);
  margin: 0 auto;
}

.aging-brand__head {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: 70px;
  align-items: center;
  margin-bottom: 56px;
}

.aging-brand__text {
  max-width: 620px;
}

.aging-brand__label {
  margin-bottom: 14px;
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.aging-brand__text h2 {
  margin: 0 0 22px;
  color: #222;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
}

.aging-brand__text p {
  margin: 0;
  color: #555;
  font-size: 16px;
  line-height: 2;
}

.aging-brand__image {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  box-shadow: 0 24px 58px rgba(0, 82, 159, 0.12);
}

.aging-brand__image::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(135deg, rgba(0, 82, 159, 0.08), rgba(255, 255, 255, 0) 54%),
    linear-gradient(0deg, rgba(255, 250, 244, 0.2), rgba(255, 255, 255, 0) 55%);
  pointer-events: none;
}

.aging-brand__image img {
  width: 100%;
  aspect-ratio: 16 / 10;
  display: block;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.aging-brand__image:hover img {
  transform: scale(1.04);
}

.aging-brand__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.aging-brand-card {
  position: relative;
  overflow: hidden;
  padding: 32px 26px;
  background: linear-gradient(145deg, #ffffff 0%, #f8fbff 62%, #fffaf4 100%);
  border: 1px solid #dbe9f7;
  border-radius: 22px;
  transition: all 0.3s ease;
}

.aging-brand-card::after {
  content: "";
  position: absolute;
  right: -38px;
  bottom: -38px;
  width: 126px;
  height: 126px;
  background: rgba(224, 199, 154, 0.16);
  border-radius: 50%;
}

.aging-brand-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 38px rgba(0, 82, 159, 0.08);
}

.aging-brand-card__tag {
  position: relative;
  z-index: 1;
  display: inline-block;
  margin-bottom: 16px;
  color: #00529f;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.aging-brand-card h3 {
  position: relative;
  z-index: 1;
  margin: 0 0 14px;
  color: #222;
  font-size: 21px;
  line-height: 1.5;
  font-weight: 700;
}

.aging-brand-card p {
  position: relative;
  z-index: 1;
  margin: 0;
  color: #555;
  font-size: 15px;
  line-height: 1.9;
}

@media (max-width: 1024px) {
  .aging-brand__head {
    grid-template-columns: 1fr;
    gap: 44px;
  }

  .aging-brand__text {
    max-width: 760px;
  }

  .aging-brand__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .aging-brand {
    padding: 70px 0;
  }

  .aging-brand__inner {
    width: min(100% - 40px, 1200px);
  }

  .aging-brand__head {
    gap: 32px;
    margin-bottom: 40px;
  }

  .aging-brand__text h2 {
    font-size: clamp(30px, 4vw, 40px);
    font-weight: 700;
  }

  .aging-brand__text p {
    font-size: 15px;
    line-height: 1.9;
  }

  .aging-brand__image {
    border-radius: 22px;
  }

  .aging-brand__image img {
    aspect-ratio: 4 / 3;
  }

  .aging-brand__grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .aging-brand-card {
    padding: 28px 24px;
  }

  .aging-brand-card h3 {
    font-size: 19px;
  }
}

/* WHY AGING CARE */
.aging-reason {
  position: relative;
  padding: 115px 0;
  background:
    radial-gradient(
      circle at 12% 16%,
      rgba(173, 214, 255, 0.24) 0%,
      rgba(173, 214, 255, 0) 34%
    ),
    radial-gradient(
      circle at 88% 82%,
      rgba(224, 199, 154, 0.24) 0%,
      rgba(224, 199, 154, 0) 36%
    ),
    linear-gradient(135deg, #f8fbff 0%, #eef6ff 58%, #fffaf4 100%);
}

.aging-reason__inner {
  width: min(1200px, 90%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 72px;
  align-items: start;
}

.aging-reason__heading {
  position: sticky;
  top: 120px;
}

.aging-reason__label {
  margin-bottom: 14px;
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.aging-reason__heading h2 {
  margin: 0 0 22px;
  color: #222;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
}

.aging-reason__heading p {
  margin: 0;
  color: #555;
  font-size: 16px;
  line-height: 2;
}

.aging-reason__points {
  display: grid;
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 32px 0 0;
}

.aging-reason__points li {
  position: relative;
  padding: 14px 18px 14px 44px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #dbe9f7;
  border-radius: 999px;
  color: #333;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.7;
  box-shadow: 0 8px 22px rgba(0, 82, 159, 0.04);
}

.aging-reason__points li::before {
  content: "✓";
  position: absolute;
  left: 19px;
  top: 50%;
  transform: translateY(-50%);
  color: #00529f;
  font-weight: 700;
}

.aging-reason__list {
  display: grid;
  gap: 24px;
}

.aging-reason-card {
  position: relative;
  overflow: hidden;
  padding: 34px 36px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid #dbe9f7;
  border-radius: 24px;
  box-shadow: 0 10px 28px rgba(0, 82, 159, 0.04);
  transition: all 0.3s ease;
}

.aging-reason-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 28px;
  width: 4px;
  height: calc(100% - 56px);
  background: linear-gradient(180deg, #00529f 0%, #e0c79a 100%);
  border-radius: 999px;
}

.aging-reason-card::after {
  content: "";
  position: absolute;
  right: -42px;
  bottom: -42px;
  width: 128px;
  height: 128px;
  background: rgba(224, 199, 154, 0.13);
  border-radius: 50%;
}

.aging-reason-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 42px rgba(0, 82, 159, 0.09);
}

.aging-reason-card__tag {
  position: relative;
  z-index: 1;
  display: inline-block;
  margin-bottom: 12px;
  color: #00529f;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.aging-reason-card h3 {
  position: relative;
  z-index: 1;
  margin: 0 0 12px;
  color: #222;
  font-size: 23px;
  line-height: 1.5;
  font-weight: 700;
}

.aging-reason-card p {
  position: relative;
  z-index: 1;
  margin: 0;
  color: #555;
  font-size: 15px;
  line-height: 1.9;
}

@media (max-width: 1024px) {
  .aging-reason__inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .aging-reason__heading {
    position: static;
  }
}

@media (max-width: 768px) {
  .aging-reason {
    padding: 70px 0;
  }

  .aging-reason__inner {
    width: min(100% - 40px, 1200px);
    gap: 38px;
  }

  .aging-reason__heading h2 {
    font-size: clamp(30px, 4vw, 40px);
    font-weight: 700;
  }

  .aging-reason__heading p {
    font-size: 15px;
    line-height: 1.9;
  }

  .aging-reason__points {
    margin-top: 26px;
  }

  .aging-reason__points li {
    border-radius: 16px;
    font-size: 14px;
  }

  .aging-reason-card {
    padding: 28px 24px 28px 28px;
    border-radius: 20px;
  }

  .aging-reason-card::before {
    top: 24px;
    height: calc(100% - 48px);
  }

  .aging-reason-card h3 {
    font-size: 20px;
  }

  .aging-reason-card p {
    font-size: 14px;
  }
}

/* PRODUCT PLANNING */
.aging-plan {
  padding: 110px 0;
  background: #fff;
}

.aging-plan__inner {
  width: min(1200px, 90%);
  margin: 0 auto;
}

.aging-plan__heading {
  margin-bottom: 60px;
}

.aging-plan__label {
  margin-bottom: 14px;
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.aging-plan__heading h2 {
  margin: 0 0 22px;
  color: #222;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
}

.aging-plan__heading p {
  margin: 0;
  color: #555;
  font-size: 16px;
  line-height: 2;
}

.aging-plan__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}

.aging-plan-card {
  overflow: hidden;
  background: #fff;
  border: 1px solid #dbe9f7;
  border-radius: 26px;
  transition: 0.3s ease;
  box-shadow: 0 10px 28px rgba(0, 82, 159, 0.04);
}

.aging-plan-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 44px rgba(0, 82, 159, 0.09);
}

.aging-plan-card__image {
  overflow: hidden;
  aspect-ratio: 16 / 10;
}

.aging-plan-card__image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: 0.6s ease;
}

.aging-plan-card:hover img {
  transform: scale(1.05);
}

.aging-plan-card__body {
  padding: 30px;
  background: linear-gradient(145deg, #ffffff 0%, #f8fbff 72%, #fffaf4 100%);
}

.aging-plan-card__tag {
  display: inline-block;
  margin: 0 0 14px;
  padding: 8px 14px;
  background: #eef6ff;
  color: #00529f;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.aging-plan-card__body h3 {
  margin: 0 0 14px;
  color: #222;
  font-size: 24px;
  line-height: 1.5;
  font-weight: 700;
}

.aging-plan-card__body p {
  margin: 0;
  color: #555;
  font-size: 15px;
  line-height: 1.9;
}

@media (max-width: 768px) {
  .aging-plan {
    padding: 70px 0;
  }

  .aging-plan__inner {
    width: min(100% - 40px, 1200px);
  }

  .aging-plan__heading {
    margin-bottom: 40px;
  }

  .aging-plan__heading h2 {
    font-size: clamp(30px, 4vw, 40px);
    font-weight: 700;
  }

  .aging-plan__heading p {
    font-size: 15px;
    line-height: 1.9;
  }

  .aging-plan__grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .aging-plan-card {
    border-radius: 22px;
  }

  .aging-plan-card__image {
    aspect-ratio: 4 / 3;
  }

  .aging-plan-card__body {
    padding: 24px;
  }

  .aging-plan-card__body h3 {
    font-size: 20px;
  }
}

/* AGING CARE INGREDIENTS */
.aging-ingredients {
  padding: 110px 0;
  background: #f8fbff;
}

.aging-ingredients__inner {
  width: min(1200px, 90%);
  margin: 0 auto;
}

.aging-ingredients__head {
  margin: 0 auto 60px;
  text-align: center;
}

.aging-ingredients__label {
  display: inline-block;
  margin-bottom: 14px;
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.aging-ingredients__head h2 {
  margin: 0 0 22px;
  color: #222;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
}

.aging-ingredients__head p {
  margin: 0;
  color: #555;
  font-size: 16px;
  line-height: 2;
}

.aging-ingredients__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.aging-ingredient-card {
  position: relative;
  overflow: hidden;
  padding: 34px 28px;
  background: linear-gradient(145deg, #ffffff 0%, #f8fbff 68%, #fffaf4 100%);
  border: 1px solid #dbe9f7;
  border-radius: 22px;
  transition: 0.3s ease;
  box-shadow: 0 10px 26px rgba(0, 82, 159, 0.04);
}

.aging-ingredient-card::after {
  content: "";
  position: absolute;
  right: -42px;
  bottom: -42px;
  width: 126px;
  height: 126px;
  background: rgba(224, 199, 154, 0.13);
  border-radius: 50%;
}

.aging-ingredient-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 38px rgba(0, 82, 159, 0.08);
}

.aging-ingredient-card__tag {
  position: relative;
  z-index: 1;
  display: inline-block;
  margin-bottom: 16px;
  padding: 7px 13px;
  background: #eef6ff;
  color: #00529f;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.aging-ingredient-card h3 {
  position: relative;
  z-index: 1;
  margin: 0 0 14px;
  color: #222;
  font-size: 22px;
  line-height: 1.5;
  font-weight: 700;
}

.aging-ingredient-card p {
  position: relative;
  z-index: 1;
  margin: 0;
  color: #555;
  font-size: 15px;
  line-height: 1.9;
}

.aging-ingredients__note {
  margin: 42px auto 0;
  max-width: 860px;
  padding: 22px 28px;
  background: #fff;
  border: 1px solid #dbe9f7;
  border-radius: 18px;
}

.aging-ingredients__note p {
  margin: 0;
  color: #555;
  font-size: 14px;
  line-height: 1.9;
}

@media (max-width: 1024px) {
  .aging-ingredients__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .aging-ingredients {
    padding: 70px 0;
  }

  .aging-ingredients__inner {
    width: min(100% - 40px, 1200px);
  }

  .aging-ingredients__head {
    margin-bottom: 40px;
    text-align: left;
  }

  .aging-ingredients__head h2 {
    font-size: clamp(30px, 4vw, 40px);
    font-weight: 700;
  }

  .aging-ingredients__head p {
    font-size: 15px;
    line-height: 1.9;
  }

  .aging-ingredients__grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .aging-ingredient-card {
    padding: 28px 24px;
  }

  .aging-ingredient-card h3 {
    font-size: 20px;
  }

  .aging-ingredients__note {
    margin-top: 32px;
    padding: 20px;
  }
}

/* CONSULTATION */
.aging-consultation {
  padding: 110px 0;
  background: #fff;
}

.aging-consultation__inner {
  width: min(1200px, 90%);
  margin: 0 auto;
}

.aging-consultation__heading {
  margin-bottom: 60px;
}

.aging-consultation__label {
  margin-bottom: 14px;
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.aging-consultation__heading h2 {
  margin: 0 0 22px;
  color: #222;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
}

.aging-consultation__heading p {
  margin: 0;
  color: #555;
  font-size: 16px;
  line-height: 2;
}

.aging-consultation__content {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 56px;
  align-items: start;
}

.aging-consultation__image {
  position: sticky;
  top: 120px;
  overflow: hidden;
  border-radius: 28px;
  box-shadow: 0 24px 60px rgba(0, 82, 159, 0.12);
}

.aging-consultation__image img {
  width: 100%;
  display: block;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.aging-consultation__list {
  display: grid;
  gap: 18px;
}

.aging-consultation-item {
  padding: 28px 30px;
  background: #fff;
  border: 1px solid #dbe9f7;
  border-radius: 22px;
  transition: 0.3s;
}

.aging-consultation-item:hover {
  transform: translateX(6px);
  box-shadow: 0 16px 36px rgba(0, 82, 159, 0.08);
}

.aging-consultation-item h3 {
  margin: 0 0 10px;
  color: #222;
  font-size: 22px;
  line-height: 1.5;
}

.aging-consultation-item p {
  margin: 0;
  color: #555;
  font-size: 15px;
  line-height: 1.9;
}

@media (max-width: 1024px) {
  .aging-consultation__content {
    grid-template-columns: 1fr;
  }

  .aging-consultation__image {
    position: static;
  }

  .aging-consultation__image img {
    aspect-ratio: 16 / 10;
  }
}

@media (max-width: 768px) {
  .aging-consultation {
    padding: 70px 0;
  }

  .aging-consultation__inner {
    width: min(100% - 40px, 1200px);
  }

  .aging-consultation__heading {
    margin-bottom: 40px;
  }

  .aging-consultation__heading h2 {
    font-size: clamp(30px, 4vw, 40px);
    font-weight: 700;
  }

  .aging-consultation__content {
    gap: 30px;
  }

  .aging-consultation__image {
    border-radius: 22px;
  }

  .aging-consultation-item {
    padding: 24px;
  }

  .aging-consultation-item h3 {
    font-size: 18px;
  }
}

/* WHY QBI WORLD */
.aging-strength {
  position: relative;
  padding: 120px 0;
  background:
    radial-gradient(
      circle at 18% 18%,
      rgba(173, 214, 255, 0.24) 0%,
      rgba(173, 214, 255, 0) 34%
    ),
    radial-gradient(
      circle at 88% 82%,
      rgba(224, 199, 154, 0.22) 0%,
      rgba(224, 199, 154, 0) 38%
    ),
    linear-gradient(135deg, #f8fbff 0%, #eef6ff 58%, #fffaf4 100%);
}

.aging-strength__inner {
  width: min(1200px, 90%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 72px;
  align-items: start;
}

.aging-strength__message {
  max-width: 560px;
  position: sticky;
  top: 120px;
  align-self: start;
}

.aging-strength__label {
  margin-bottom: 14px;
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.aging-strength__message h2 {
  margin: 0 0 22px;
  color: #222;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
}

.aging-strength__message > p {
  margin: 0 0 34px;
  color: #555;
  font-size: 16px;
  line-height: 2;
}

.aging-strength__box {
  position: relative;
  overflow: hidden;
  padding: 32px 34px;
  background: #00529f;
  color: #fff;
  border-radius: 24px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.7;
  box-shadow: 0 20px 42px rgba(0, 82, 159, 0.18);
}

.aging-strength__box::after {
  content: "";
  position: absolute;
  right: -24px;
  bottom: -28px;
  width: 110px;
  height: 110px;
  background: rgba(224, 199, 154, 0.28);
  border-radius: 50%;
}

.aging-strength__list {
  display: grid;
  gap: 20px;
}

.aging-strength-item {
  position: relative;
  overflow: hidden;
  padding: 28px 30px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid #dbe9f7;
  border-radius: 22px;
  box-shadow: 0 10px 28px rgba(0, 82, 159, 0.04);
  transition: 0.3s ease;
}

.aging-strength-item::after {
  content: "";
  position: absolute;
  right: -42px;
  bottom: -42px;
  width: 126px;
  height: 126px;
  background: rgba(224, 199, 154, 0.12);
  border-radius: 50%;
}

.aging-strength-item:hover {
  transform: translateX(6px);
  box-shadow: 0 18px 42px rgba(0, 82, 159, 0.09);
}

.aging-strength-item span {
  position: relative;
  z-index: 1;
  display: inline-block;
  margin-bottom: 10px;
  color: #00529f;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.aging-strength-item h3 {
  position: relative;
  z-index: 1;
  margin: 0 0 10px;
  color: #222;
  font-size: 22px;
  line-height: 1.5;
  font-weight: 700;
}

.aging-strength-item p {
  position: relative;
  z-index: 1;
  margin: 0;
  color: #555;
  font-size: 15px;
  line-height: 1.9;
}

@media (max-width: 1024px) {
  .aging-strength__inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .aging-strength__message {
    max-width: 760px;
    position: static;
  }
}

@media (max-width: 768px) {
  .aging-strength {
    padding: 70px 0;
  }

  .aging-strength__inner {
    width: min(100% - 40px, 1200px);
    gap: 38px;
  }

  .aging-strength__message h2 {
    font-size: clamp(30px, 4vw, 40px);
    font-weight: 700;
  }

  .aging-strength__message > p {
    font-size: 15px;
    line-height: 1.9;
  }

  .aging-strength__box {
    padding: 26px 24px;
    border-radius: 20px;
    font-size: 21px;
  }

  .aging-strength-item {
    padding: 24px;
  }

  .aging-strength-item:hover {
    transform: translateY(-3px);
  }

  .aging-strength-item h3 {
    font-size: 19px;
  }

  .aging-strength-item p {
    font-size: 14px;
  }
}

/* CTA */
.aging-cta {
  position: relative;
  overflow: hidden;
  padding: 120px 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)),
    url("../../assets/img/lineup/facecare/aging-care/cta-bg.webp");
  background-size: cover;
  background-position: center;
}

.aging-cta__inner {
  position: relative;
  z-index: 1;
  width: min(900px, 90%);
  margin: auto;
  text-align: center;
  background: rgba(255, 255, 255, 0);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 32px;
  padding: 50px 24px;
  box-shadow: 0 20px 50px rgba(0, 82, 159, 0.08);
}

.aging-cta__label {
  margin-bottom: 16px;
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.aging-cta h2 {
  margin: 0 0 24px;
  color: #222;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
}

.aging-cta__text {
  max-width: 700px;
  margin: 0 auto 36px;
  color: #222;
  font-size: 16px;
  line-height: 2;
}

.aging-cta__buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
}

.aging-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 280px;
  padding: 18px 30px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  transition: 0.3s ease;
}

.aging-cta__btn--primary {
  background: #00529f;
  color: #fff;
}

.aging-cta__btn--primary:hover {
  background: #003f7c;
}

.aging-cta__btn--secondary {
  background: #fff;
  color: #00529f;
  border: 1px solid #00529f;
}

.aging-cta__btn--secondary:hover {
  background: #f5f9ff;
}

@media (max-width: 768px) {
  .aging-cta {
    padding: 70px 0;
  }

  .aging-cta__inner {
    width: min(100% - 40px, 1200px);
    padding: 50px 24px;
  }

  .aging-cta h2 {
    font-size: clamp(30px, 4vw, 40px);
    font-weight: 700;
  }

  .aging-cta__text {
    font-size: 15px;
    line-height: 1.9;
  }

  .aging-cta__buttons {
    flex-direction: column;
  }

  .aging-cta__btn {
    width: 100%;
    min-width: auto;
  }
}

/* lineup/bodycare/body-cream/ */
/* FV */
.bodycream-fv {
  position: relative;
  overflow: hidden;
  padding: 140px 0 100px;
  background:
    radial-gradient(
      circle at 12% 18%,
      rgba(255, 236, 224, 0.9) 0,
      rgba(255, 236, 224, 0) 34%
    ),
    radial-gradient(
      circle at 88% 20%,
      rgba(220, 238, 255, 0.9) 0,
      rgba(220, 238, 255, 0) 32%
    ),
    linear-gradient(135deg, #f7fbff 0%, #ffffff 48%, #fff8f3 100%);
}

.bodycream-fv::after {
  content: "BODY CREAM";
  position: absolute;
  right: -34px;
  bottom: 28px;
  font-size: clamp(76px, 13vw, 180px);
  font-weight: 800;
  letter-spacing: 0.04em;
  color: rgba(0, 82, 159, 0.045);
  line-height: 1;
  pointer-events: none;
}

.bodycream-fv__inner {
  position: relative;
  z-index: 1;
  width: min(1200px, 90%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  align-items: center;
  gap: 66px;
}

.bodycream-fv__content {
  max-width: 620px;
}

.bodycream-fv__label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.bodycream-fv__label::before {
  content: "";
  width: 34px;
  height: 1px;
  background: #00529f;
}

.bodycream-fv__title {
  margin: 0 0 24px;
  color: #1f2f3f;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.38;
  letter-spacing: 0.03em;
}

.bodycream-fv__lead {
  margin: 0 0 28px;
  color: #4a5560;
  font-size: 16px;
  line-height: 2;
}

.bodycream-fv__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 34px;
  padding: 0;
  list-style: none;
}

.bodycream-fv__tags li {
  padding: 9px 15px;
  border: 1px solid rgba(0, 82, 159, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.76);
  color: #28506f;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 10px 24px rgba(0, 82, 159, 0.06);
}

.bodycream-fv__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.bodycream-fv__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 28px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: 0.25s ease;
}

.bodycream-fv__btn--primary {
  background: #00529f;
  color: #fff;
  box-shadow: 0 14px 28px rgba(0, 82, 159, 0.22);
}

.bodycream-fv__btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 34px rgba(0, 82, 159, 0.28);
}

.bodycream-fv__btn--secondary {
  background: rgba(255, 255, 255, 0.82);
  color: #00529f;
  border: 1px solid rgba(0, 82, 159, 0.22);
}

.bodycream-fv__btn--secondary:hover {
  background: #fff;
  transform: translateY(-2px);
}

.bodycream-fv__visual {
  position: relative;
}

.bodycream-fv__image {
  position: relative;
  overflow: hidden;
  border-radius: 36px;
  box-shadow: 0 28px 60px rgba(37, 62, 84, 0.16);
}

.bodycream-fv__image::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0) 42%,
      rgba(255, 255, 255, 0.24) 100%
    ),
    linear-gradient(90deg, rgba(0, 30, 60, 0.1), rgba(0, 30, 60, 0) 42%);
}

.bodycream-fv__image img {
  display: block;
  width: 100%;
  aspect-ratio: 5 / 3.8;
  object-fit: cover;
}

.bodycream-fv__note {
  position: absolute;
  width: 236px;
  padding: 18px 20px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 38px rgba(37, 62, 84, 0.14);
}

.bodycream-fv__note span {
  display: block;
  margin-bottom: 6px;
  color: #00529f;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.bodycream-fv__note p {
  margin: 0;
  color: #2d3b47;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
}

.bodycream-fv__note--top {
  top: 30px;
  right: -28px;
}

.bodycream-fv__note--bottom {
  left: -30px;
  bottom: 36px;
}

@media (max-width: 900px) {
  .bodycream-fv {
    padding: 110px 0 72px;
  }

  .bodycream-fv__inner {
    grid-template-columns: 1fr;
    gap: 42px;
  }

  .bodycream-fv__content {
    max-width: none;
  }

  .bodycream-fv__lead {
    font-size: 15px;
  }

  .bodycream-fv__visual {
    max-width: 640px;
    margin: 0 auto;
  }
}

@media (max-width: 600px) {
  .bodycream-fv {
    padding: 96px 0 56px;
  }

  .bodycream-fv__title {
    font-size: clamp(30px, 4vw, 40px);
    font-weight: 700;
  }

  .bodycream-fv__buttons {
    flex-direction: column;
  }

  .bodycream-fv__btn {
    width: 100%;
  }

  .bodycream-fv__note {
    position: static;
    width: auto;
    margin-top: 12px;
  }

  .bodycream-fv__note--top,
  .bodycream-fv__note--bottom {
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
  }

  .bodycream-fv__image {
    border-radius: 24px;
  }
}

/* BODY CREAM MARKET */
.bodycream-market {
  position: relative;
  padding: 110px 0;
  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
}

.bodycream-market__inner {
  position: relative;
  z-index: 1;
  width: min(1200px, 90%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 72px;
  align-items: start;
}

.bodycream-market__visual {
  overflow: hidden;
  border-radius: 34px;
  box-shadow: 0 28px 60px rgba(37, 62, 84, 0.14);
  position: sticky;
  top: 120px;
  align-self: start;
}

.bodycream-market__visual img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.bodycream-market__label {
  margin: 0 0 16px;
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.bodycream-market__content h2 {
  margin: 0 0 24px;
  color: #1f2f3f;
  font-size: clamp(30px, 4vw, 38px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.03em;
}

.bodycream-market__lead {
  margin: 0 0 34px;
  color: #4e5d68;
  font-size: 15px;
  line-height: 2;
}

.bodycream-market__list {
  display: grid;
  gap: 16px;
}

.bodycream-market-item {
  position: relative;
  padding: 24px 28px 24px 32px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 82, 159, 0.1);
  box-shadow: 0 14px 34px rgba(37, 62, 84, 0.07);
  transition: 0.25s ease;
}

.bodycream-market-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 24px;
  bottom: 24px;
  width: 4px;
  border-radius: 999px;
  background: #00529f;
}

.bodycream-market-item:hover {
  transform: translateX(4px);
  box-shadow: 0 20px 44px rgba(37, 62, 84, 0.11);
}

.bodycream-market-item span {
  display: inline-block;
  margin-bottom: 8px;
  color: #00529f;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.bodycream-market-item h3 {
  margin: 0 0 8px;
  color: #253746;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.55;
}

.bodycream-market-item p {
  margin: 0;
  color: #5a6670;
  font-size: 14px;
  line-height: 1.9;
}

@media (max-width: 900px) {
  .bodycream-market {
    padding: 78px 0;
  }

  .bodycream-market__inner {
    grid-template-columns: 1fr;
    gap: 44px;
  }

  .bodycream-market__visual {
    max-width: 620px;
    margin: 0 auto;
    position: static;
  }

  .bodycream-market__visual img {
    aspect-ratio: 16 / 10;
  }
}

@media (max-width: 600px) {
  .bodycream-market {
    padding: 64px 0;
  }

  .bodycream-market__visual {
    border-radius: 24px;
  }

  .bodycream-market__visual img {
    aspect-ratio: 4 / 5;
  }

  .bodycream-market-item {
    padding: 22px 22px 22px 26px;
    border-radius: 20px;
  }

  .bodycream-market-item h3 {
    font-size: 18px;
  }
}

/* BODY CREAM BRAND */
.bodycream-brand {
  padding: 100px 0;
  background: #fff;
}

.bodycream-brand__inner {
  width: min(1200px, 90%);
  margin: auto;
}

.bodycream-brand__head {
  max-width: 900px;
  margin: 0 auto 60px;
  text-align: center;
}

.bodycream-brand__label {
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  margin-bottom: 16px;
}

.bodycream-brand__head h2 {
  margin-bottom: 24px;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
  color: #1f2f3f;
}

.bodycream-brand__head p {
  color: #5a6670;
  line-height: 2;
}

.bodycream-brand__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
}

.bodycream-brand-card {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  min-height: 380px;
  grid-column: span 5;
}

.bodycream-brand-card--large {
  grid-column: span 7;
}

.bodycream-brand-card--wide {
  grid-column: span 7;
}

.bodycream-brand-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bodycream-brand-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 20%,
    rgba(0, 0, 0, 0.58) 100%
  );
}

.bodycream-brand-card__content {
  position: absolute;
  left: 32px;
  right: 32px;
  bottom: 30px;
  z-index: 2;
  color: #fff;
}

.bodycream-brand-card__content span {
  display: block;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.bodycream-brand-card__content h3 {
  margin-bottom: 12px;
  font-size: 28px;
  line-height: 1.5;
  color: #fff;
}

.bodycream-brand-card__content p {
  margin: 0;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.92);
}

@media (max-width: 900px) {
  .bodycream-brand {
    padding: 80px 0;
  }

  .bodycream-brand__grid {
    grid-template-columns: 1fr;
  }

  .bodycream-brand-card,
  .bodycream-brand-card--large,
  .bodycream-brand-card--wide {
    grid-column: auto;
    min-height: 320px;
  }

  .bodycream-brand__head h2 {
    font-size: clamp(30px, 4vw, 40px);
    font-weight: 700;
  }
}

@media (max-width: 600px) {
  .bodycream-brand-card {
    min-height: 280px;
    border-radius: 22px;
  }

  .bodycream-brand-card__content {
    left: 24px;
    right: 24px;
    bottom: 22px;
  }

  .bodycream-brand-card__content h3 {
    font-size: 22px;
  }
}

/* WHY BODY CREAM */
.bodycream-why {
  position: relative;
  overflow: hidden;
  padding: 110px 0;
  background:
    radial-gradient(
      circle at 50% 48%,
      rgba(255, 236, 224, 0.72) 0,
      rgba(255, 236, 224, 0) 34%
    ),
    linear-gradient(135deg, #f7fbff 0%, #ffffff 52%, #fff8f3 100%);
}

.bodycream-why__inner {
  width: min(1200px, 90%);
  margin: 0 auto;
}

.bodycream-why__head {
  max-width: 820px;
  margin: 0 auto 72px;
  text-align: center;
}

.bodycream-why__label {
  margin: 0 0 16px;
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.bodycream-why__head h2 {
  margin: 0 0 24px;
  color: #1f2f3f;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.03em;
}

.bodycream-why__head p {
  margin: 0;
  color: #4e5d68;
  font-size: 15px;
  line-height: 2;
}

.bodycream-why__circle {
  position: relative;
  width: min(980px, 100%);
  min-height: 720px;
  margin: 0 auto;
}

.bodycream-why__circle::before {
  content: "";
  position: absolute;
  inset: 90px;
  border: 1px solid rgba(0, 82, 159, 0.14);
  border-radius: 50%;
}

.bodycream-why__circle::after {
  content: "";
  position: absolute;
  inset: 190px;
  border: 1px dashed rgba(0, 82, 159, 0.18);
  border-radius: 50%;
}

.bodycream-why__center {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: 310px;
  height: 310px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.94),
    rgba(247, 251, 255, 0.94)
  );
  border: 1px solid rgba(0, 82, 159, 0.12);
  box-shadow: 0 28px 60px rgba(37, 62, 84, 0.13);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #1f2f3f;
  text-align: center;
  padding: 34px;
}

.bodycream-why__center span {
  display: block;
  margin-bottom: 14px;
  color: #00529f;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.bodycream-why__center p {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.7;
}

.bodycream-why-item {
  position: absolute;
  z-index: 3;
  width: 330px;
  padding: 28px 30px;
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 82, 159, 0.1);
  box-shadow: 0 18px 42px rgba(37, 62, 84, 0.09);
  backdrop-filter: blur(10px);
  transition: 0.25s ease;
}

.bodycream-why-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 52px rgba(37, 62, 84, 0.13);
}

.bodycream-why-item span {
  display: inline-block;
  margin-bottom: 10px;
  color: #00529f;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.bodycream-why-item h3 {
  margin: 0 0 12px;
  color: #253746;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.55;
}

.bodycream-why-item p {
  margin: 0;
  color: #5a6670;
  font-size: 14px;
  line-height: 1.9;
}

.bodycream-why-item--top {
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}

.bodycream-why-item--right {
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.bodycream-why-item--bottom {
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
}

.bodycream-why-item--left {
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.bodycream-why-item--top:hover,
.bodycream-why-item--bottom:hover {
  transform: translateX(-50%) translateY(-4px);
}

.bodycream-why-item--right:hover,
.bodycream-why-item--left:hover {
  transform: translateY(-50%) translateY(-4px);
}

@media (max-width: 1000px) {
  .bodycream-why__circle {
    min-height: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .bodycream-why__circle::before,
  .bodycream-why__circle::after {
    display: none;
  }

  .bodycream-why__center,
  .bodycream-why-item,
  .bodycream-why-item--top,
  .bodycream-why-item--right,
  .bodycream-why-item--bottom,
  .bodycream-why-item--left {
    position: static;
    width: auto;
    height: auto;
    transform: none;
  }

  .bodycream-why__center {
    border-radius: 28px;
    padding: 34px 28px;
  }

  .bodycream-why__center p {
    font-size: 22px;
  }

  .bodycream-why-item:hover,
  .bodycream-why-item--top:hover,
  .bodycream-why-item--right:hover,
  .bodycream-why-item--bottom:hover,
  .bodycream-why-item--left:hover {
    transform: translateY(-4px);
  }
}

@media (max-width: 600px) {
  .bodycream-why {
    padding: 64px 0;
  }

  .bodycream-why__head {
    margin-bottom: 42px;
    text-align: left;
  }

  .bodycream-why__center {
    padding: 28px 24px;
    border-radius: 24px;
  }

  .bodycream-why__center p {
    font-size: 19px;
  }

  .bodycream-why-item {
    padding: 26px 24px;
    border-radius: 22px;
  }

  .bodycream-why-item h3 {
    font-size: 19px;
  }
}

/* PRODUCT PLANNING */
.bodycream-planning {
  padding: 110px 0;
  background: #fff;
}

.bodycream-planning__inner {
  width: min(1200px, 90%);
  margin: auto;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 80px;
  align-items: start;
}

.bodycream-planning__visual {
  position: sticky;
  top: 120px;
  overflow: hidden;
  border-radius: 32px;
  box-shadow: 0 24px 60px rgba(37, 62, 84, 0.12);
}

.bodycream-planning__visual img {
  width: 100%;
  display: block;
  aspect-ratio: 4/5;
  object-fit: cover;
}

.bodycream-planning__label {
  margin-bottom: 16px;
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.bodycream-planning__content h2 {
  margin-bottom: 24px;
  color: #1f2f3f;
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
}

.bodycream-planning__lead {
  margin-bottom: 42px;
  color: #5a6670;
  line-height: 2;
}

.bodycream-planning-item {
  padding: 32px;
  border-radius: 24px;
  background: #f8fbfe;
  border: 1px solid rgba(0, 82, 159, 0.08);
  margin-bottom: 18px;
  transition: 0.25s;
}

.bodycream-planning-item:hover {
  transform: translateX(4px);
  box-shadow: 0 16px 40px rgba(37, 62, 84, 0.08);
}

.bodycream-planning-item span {
  display: inline-block;
  margin-bottom: 10px;
  color: #00529f;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.bodycream-planning-item h3 {
  margin-bottom: 12px;
  color: #253746;
  font-size: 24px;
  line-height: 1.5;
}

.bodycream-planning-item p {
  margin: 0;
  color: #5a6670;
  line-height: 1.9;
}

@media (max-width: 900px) {
  .bodycream-planning {
    padding: 80px 0;
  }

  .bodycream-planning__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .bodycream-planning__visual {
    position: static;
  }
}

@media (max-width: 600px) {
  .bodycream-planning {
    padding: 64px 0;
  }

  .bodycream-planning-item {
    padding: 24px;
  }

  .bodycream-planning-item h3 {
    font-size: 20px;
  }
}

/* CONSULTATION */
.bodycream-consultation {
  position: relative;
  overflow: visible;
  padding: 110px 0;
  background:
    radial-gradient(
      circle at 85% 15%,
      rgba(255, 231, 216, 0.45),
      transparent 25%
    ),
    linear-gradient(135deg, #f7fbff 0%, #ffffff 50%, #fff8f3 100%);
}

.bodycream-consultation__inner {
  position: relative;
  z-index: 1;
  width: min(1200px, 90%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: 76px;
  align-items: start;
}

.bodycream-consultation__visual {
  align-self: start;
  position: sticky;
  top: 120px;
  overflow: hidden;
  border-radius: 34px;
  box-shadow: 0 28px 60px rgba(37, 62, 84, 0.14);
}

.bodycream-consultation__visual img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 6;
  object-fit: cover;
}

.bodycream-consultation__label {
  margin: 0 0 16px;
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.bodycream-consultation__content h2 {
  margin: 0 0 24px;
  color: #1f2f3f;
  font-size: clamp(30px, 4vw, 38px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.03em;
}

.bodycream-consultation__lead {
  margin: 0 0 38px;
  color: #4e5d68;
  font-size: 15px;
  line-height: 2;
}

.bodycream-consultation__list {
  display: grid;
  gap: 16px;
}

.bodycream-consultation-item {
  position: relative;
  padding: 28px 30px 28px 34px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 82, 159, 0.1);
  box-shadow: 0 14px 34px rgba(37, 62, 84, 0.07);
  transition: 0.25s ease;
}

.bodycream-consultation-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 28px;
  bottom: 28px;
  width: 4px;
  border-radius: 999px;
  background: #00529f;
}

.bodycream-consultation-item:hover {
  transform: translateX(4px);
  box-shadow: 0 20px 44px rgba(37, 62, 84, 0.11);
}

.bodycream-consultation-item span {
  display: inline-block;
  margin-bottom: 9px;
  color: #00529f;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.bodycream-consultation-item h3 {
  margin: 0 0 10px;
  color: #253746;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.55;
}

.bodycream-consultation-item p {
  margin: 0;
  color: #5a6670;
  font-size: 14px;
  line-height: 1.9;
}

@media (max-width: 900px) {
  .bodycream-consultation {
    padding: 78px 0;
  }

  .bodycream-consultation__inner {
    grid-template-columns: 1fr;
    gap: 44px;
  }

  .bodycream-consultation__visual {
    position: static;
    max-width: 620px;
    margin: 0 auto;
  }

  .bodycream-consultation__visual img {
    aspect-ratio: 16 / 10;
  }
}

@media (max-width: 600px) {
  .bodycream-consultation {
    padding: 64px 0;
  }

  .bodycream-consultation__visual {
    border-radius: 24px;
  }

  .bodycream-consultation__visual img {
    aspect-ratio: 4 / 5;
  }

  .bodycream-consultation-item {
    padding: 24px 24px 24px 28px;
    border-radius: 22px;
  }

  .bodycream-consultation-item h3 {
    font-size: 19px;
  }
}

/* WHY QBI WORLD */
.bodycream-strength {
  position: relative;
  padding: 110px 0;
  background: #fff;
}

.bodycream-strength__inner {
  width: min(1200px, 90%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 86px;
  align-items: start;
}

.bodycream-strength__message {
  position: sticky;
  top: 120px;
}

.bodycream-strength__label {
  margin: 0 0 16px;
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.bodycream-strength__message h2 {
  margin: 0 0 24px;
  color: #1f2f3f;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: 0.03em;
}

.bodycream-strength__message > p {
  margin: 0 0 32px;
  color: #4e5d68;
  font-size: 15px;
  line-height: 2;
}

.bodycream-strength__box {
  padding: 28px;
  border-radius: 24px;
  background: linear-gradient(135deg, #f7fbff 0%, #ffffff 100%);
  border-left: 4px solid #00529f;
  box-shadow: 0 18px 40px rgba(37, 62, 84, 0.08);
  color: #1f2f3f;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.7;
}

.bodycream-strength__timeline {
  position: relative;
  display: grid;
  gap: 24px;
}

.bodycream-strength__timeline::before {
  content: "";
  position: absolute;
  left: 24px;
  top: 24px;
  bottom: 24px;
  width: 1px;
  background: rgba(0, 82, 159, 0.22);
}

.bodycream-strength-item {
  position: relative;
  margin-left: 56px;
  padding: 34px 38px;
  border-radius: 28px;
  background: linear-gradient(135deg, #f8fbfe 0%, #ffffff 100%);
  border: 1px solid rgba(0, 82, 159, 0.09);
  box-shadow: 0 18px 42px rgba(37, 62, 84, 0.07);
  transition: 0.25s ease;
}

.bodycream-strength-item::before {
  content: "";
  position: absolute;
  left: -44px;
  top: 38px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #00529f;
  box-shadow:
    0 0 0 8px rgba(0, 82, 159, 0.1),
    0 10px 24px rgba(0, 82, 159, 0.22);
}

.bodycream-strength-item:hover {
  transform: translateX(4px);
  box-shadow: 0 24px 52px rgba(37, 62, 84, 0.11);
}

.bodycream-strength-item span {
  display: inline-block;
  margin-bottom: 10px;
  color: #00529f;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.bodycream-strength-item h3 {
  margin: 0 0 12px;
  color: #253746;
  font-size: 23px;
  font-weight: 700;
  line-height: 1.55;
}

.bodycream-strength-item p {
  margin: 0;
  color: #5a6670;
  font-size: 14px;
  line-height: 1.9;
}

@media (max-width: 900px) {
  .bodycream-strength {
    padding: 78px 0;
  }

  .bodycream-strength__inner {
    grid-template-columns: 1fr;
    gap: 44px;
  }

  .bodycream-strength__message {
    position: static;
  }
}

@media (max-width: 600px) {
  .bodycream-strength {
    padding: 64px 0;
  }

  .bodycream-strength__message h2 {
    font-size: clamp(30px, 4vw, 40px);
    font-weight: 700;
  }

  .bodycream-strength__box {
    padding: 24px;
    border-radius: 22px;
    font-size: 18px;
  }

  .bodycream-strength__timeline::before {
    left: 12px;
  }

  .bodycream-strength-item {
    margin-left: 34px;
    padding: 28px 24px;
    border-radius: 22px;
  }

  .bodycream-strength-item::before {
    left: -30px;
    top: 34px;
    width: 14px;
    height: 14px;
    box-shadow:
      0 0 0 6px rgba(0, 82, 159, 0.1),
      0 8px 20px rgba(0, 82, 159, 0.2);
  }

  .bodycream-strength-item h3 {
    font-size: 20px;
  }
}

/* CTA */
.bodycream-cta {
  position: relative;
  overflow: hidden;
  padding: 120px 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.1)),
    url("../../assets/img/lineup/bodycare/body-cream/cta-bg.webp");
  background-size: cover;
  background-position: center;
}

.bodycream-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      circle at 18% 20%,
      rgba(255, 236, 224, 0.46),
      transparent 34%
    ),
    radial-gradient(
      circle at 85% 80%,
      rgba(220, 238, 255, 0.42),
      transparent 32%
    );
  pointer-events: none;
}

.bodycream-cta__inner {
  width: min(900px, 90%);
  margin: auto;
  text-align: center;
  padding: 60px 30px;
  border-radius: 32px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 20px 50px rgba(0, 82, 159, 0.08);
}

.bodycream-cta__label {
  margin: 0 0 16px;
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.bodycream-cta h2 {
  margin: 0 0 24px;
  color: #222;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.03em;
}

.bodycream-cta__text {
  max-width: 720px;
  margin: 0 auto 36px;
  color: #333;
  font-size: 16px;
  line-height: 2;
}

.bodycream-cta__buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
}

.bodycream-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 300px;
  min-height: 56px;
  padding: 0 30px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  transition: 0.25s ease;
}

.bodycream-cta__btn--primary {
  background: #00529f;
  color: #fff;
  box-shadow: 0 14px 30px rgba(0, 82, 159, 0.22);
}

.bodycream-cta__btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 36px rgba(0, 82, 159, 0.28);
}

.bodycream-cta__btn--secondary {
  background: #fff;
  color: #00529f;
  border: 1px solid rgba(0, 82, 159, 0.24);
}

.bodycream-cta__btn--secondary:hover {
  background: #f7fbff;
  transform: translateY(-2px);
}

@media (max-width: 768px) {
  .bodycream-cta {
    padding: 78px 0;
  }

  .bodycream-cta__inner {
    width: min(100% - 40px, 900px);
    padding: 44px 24px;
    border-radius: 28px;
  }

  .bodycream-cta__text {
    font-size: 15px;
    line-height: 1.9;
  }

  .bodycream-cta__buttons {
    flex-direction: column;
  }

  .bodycream-cta__btn {
    width: 100%;
    min-width: auto;
  }
}

/* /lineup/bodycare/body-cream/ */
/* FV */
.bodysoap-fv {
  position: relative;
  overflow: hidden;
  padding: 150px 0 110px;
  background:
    radial-gradient(
      circle at 12% 18%,
      rgba(226, 236, 250, 0.95) 0,
      rgba(226, 236, 250, 0) 34%
    ),
    linear-gradient(135deg, #f7fbff 0%, #ffffff 56%, #f8fbff 100%);
}

.bodysoap-fv::after {
  content: "BODY SOAP";
  position: absolute;
  right: -20px;
  bottom: 20px;
  color: rgba(0, 82, 159, 0.045);
  font-size: clamp(72px, 10vw, 150px);
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1;
  pointer-events: none;
}

.bodysoap-fv__inner {
  position: relative;
  z-index: 1;
  width: min(1200px, 90%);
  margin: auto;
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 72px;
  align-items: center;
}

.bodysoap-fv__label {
  margin-bottom: 18px;
  color: #00529f;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.bodysoap-fv__title {
  margin-bottom: 24px;
  color: #1f2f3f;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.38;
  letter-spacing: 0.02em;
}

.bodysoap-fv__lead {
  margin-bottom: 30px;
  color: #4e5d68;
  line-height: 2;
}

.bodysoap-fv__features {
  display: grid;
  gap: 12px;
  margin-bottom: 36px;
}

.bodysoap-fv__feature {
  display: flex;
  align-items: center;
  gap: 12px;
}

.bodysoap-fv__feature span {
  position: relative;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #00529f;
}

.bodysoap-fv__feature span::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 5px;
  width: 6px;
  height: 10px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
}

.bodysoap-fv__feature p {
  margin: 0;
  color: #2d3b47;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.7;
}

.bodysoap-fv__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.bodysoap-fv__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 28px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  transition: 0.3s;
}

.bodysoap-fv__btn--primary {
  background: #00529f;
  color: #fff;
  box-shadow: 0 14px 28px rgba(0, 82, 159, 0.18);
}

.bodysoap-fv__btn--primary:hover {
  background: #003f7c;
  transform: translateY(-2px);
}

.bodysoap-fv__btn--secondary {
  background: #fff;
  color: #00529f;
  border: 1px solid #00529f;
}

.bodysoap-fv__btn--secondary:hover {
  background: #f5f9ff;
  transform: translateY(-2px);
}

.bodysoap-fv__visual {
  position: relative;
}

.bodysoap-fv__visual::before {
  content: "";
  position: absolute;
  inset: 34px -24px -24px 34px;
  border-radius: 36px;
  background: rgba(0, 82, 159, 0.07);
  z-index: -1;
}

.bodysoap-fv__image {
  overflow: hidden;
  border-radius: 34px;
  background: #fff;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.12);
}

.bodysoap-fv__image img {
  display: block;
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
}

@media (max-width: 900px) {
  .bodysoap-fv {
    padding: 130px 0 80px;
  }

  .bodysoap-fv__inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .bodysoap-fv__visual::before {
    inset: 24px -14px -14px 24px;
  }

  .bodysoap-fv__image img {
    aspect-ratio: 16 / 11;
  }
}

@media (max-width: 600px) {
  .bodysoap-fv {
    padding: 120px 0 70px;
  }

  .bodysoap-fv__title {
    font-size: clamp(30px, 4vw, 40px);
    font-weight: 700;
  }

  .bodysoap-fv__lead {
    font-size: 15px;
  }

  .bodysoap-fv__feature p {
    font-size: 14px;
  }

  .bodysoap-fv__buttons {
    flex-direction: column;
  }

  .bodysoap-fv__btn {
    width: 100%;
  }

  .bodysoap-fv__visual::before {
    display: none;
  }

  .bodysoap-fv__image {
    border-radius: 24px;
  }
}

/* WHY BODY SOAP BRAND */
.bodysoap-why {
  padding: 120px 0;
  background: #fff;
}

.bodysoap-why__inner {
  width: min(1200px, 90%);
  margin: auto;
}

.bodysoap-why__head {
  max-width: 760px;
  margin: 0 auto 60px;
  text-align: center;
}

.bodysoap-why__label {
  margin-bottom: 16px;
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.bodysoap-why__head h2 {
  margin-bottom: 24px;
  color: #1f2f3f;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
}

.bodysoap-why__head p {
  color: #556270;
  line-height: 2;
}

.bodysoap-why__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.bodysoap-why-card {
  padding: 42px 36px;
  border-radius: 28px;
  background: #fff;
  border: 1px solid rgba(0, 82, 159, 0.08);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.05);
  transition: 0.3s;
}

.bodysoap-why-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
}

.bodysoap-why-card__icon {
  margin-bottom: 24px;
  font-size: 38px;
  line-height: 1;
}

.bodysoap-why-card h3 {
  margin-bottom: 16px;
  color: #253746;
  font-size: 24px;
  line-height: 1.5;
}

.bodysoap-why-card p {
  color: #5a6670;
  line-height: 1.9;
}

@media (max-width: 900px) {
  .bodysoap-why {
    padding: 80px 0;
  }

  .bodysoap-why__grid {
    grid-template-columns: 1fr;
  }

  .bodysoap-why-card {
    padding: 32px;
  }
}

/* BODY SOAP CONCEPT */
.bodysoap-concept {
  padding: 120px 0;
  background: #f7fbff;
}

.bodysoap-concept__inner {
  width: min(1200px, 90%);
  margin: auto;
}

.bodysoap-concept__head {
  max-width: 760px;
  margin: 0 auto 60px;
  text-align: center;
}

.bodysoap-concept__label {
  margin-bottom: 16px;
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.bodysoap-concept__head h2 {
  margin-bottom: 24px;
  color: #1f2f3f;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
}

.bodysoap-concept__head p {
  color: #556270;
  line-height: 2;
}

.bodysoap-concept__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}

.bodysoap-concept-card {
  overflow: hidden;
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.06);
  transition: 0.3s;
}

.bodysoap-concept-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.1);
}

.bodysoap-concept-card img {
  width: 100%;
  display: block;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.bodysoap-concept-card__body {
  padding: 30px;
}

.bodysoap-concept-card span {
  display: inline-block;
  margin-bottom: 12px;
  color: #00529f;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.bodysoap-concept-card h3 {
  margin-bottom: 14px;
  color: #253746;
  font-size: 24px;
  line-height: 1.5;
}

.bodysoap-concept-card p {
  color: #5a6670;
  line-height: 1.9;
}

@media (max-width: 768px) {
  .bodysoap-concept {
    padding: 80px 0;
  }

  .bodysoap-concept__grid {
    grid-template-columns: 1fr;
  }

  .bodysoap-concept-card__body {
    padding: 24px;
  }

  .bodysoap-concept-card h3 {
    font-size: 21px;
  }
}

/* FRAGRANCE DESIGN */
.bodysoap-fragrance {
  padding: 120px 0;
  background: #fff;
}

.bodysoap-fragrance__inner {
  width: min(1200px, 90%);
  margin: auto;
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 70px;
  align-items: start;
}

.bodysoap-fragrance__image {
  position: sticky;
  top: 120px;
  overflow: hidden;
  border-radius: 32px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.12);
}

.bodysoap-fragrance__image img {
  width: 100%;
  display: block;
  aspect-ratio: 5 / 6;
  object-fit: cover;
}

.bodysoap-fragrance__label {
  margin-bottom: 16px;
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.bodysoap-fragrance__content h2 {
  margin-bottom: 24px;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
  color: #1f2f3f;
}

.bodysoap-fragrance__lead {
  margin-bottom: 36px;
  color: #556270;
  line-height: 2;
}

.bodysoap-fragrance__list {
  display: grid;
  gap: 18px;
}

.bodysoap-fragrance-item {
  padding: 26px;
  border-radius: 20px;
  background: #f7fbff;
}

.bodysoap-fragrance-item span {
  display: inline-block;
  margin-bottom: 10px;
  color: #00529f;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.bodysoap-fragrance-item h3 {
  margin-bottom: 10px;
  font-size: 22px;
  color: #253746;
}

.bodysoap-fragrance-item p {
  color: #5a6670;
  line-height: 1.8;
}

.bodysoap-fragrance__message {
  margin-top: 30px;
  padding: 28px;
  border-radius: 24px;
  background: #00529f;
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.8;
}

@media (max-width: 900px) {
  .bodysoap-fragrance {
    padding: 80px 0;
  }

  .bodysoap-fragrance__inner {
    grid-template-columns: 1fr;
  }

  .bodysoap-fragrance__image {
    position: static;
  }
}

/* CONTINUOUS USE */
.bodysoap-use {
  padding: 120px 0;
  background: #f7fbff;
}

.bodysoap-use__inner {
  width: min(1200px, 90%);
  margin: auto;
}

.bodysoap-use__head {
  max-width: 900px;
  margin-bottom: 56px;
}

.bodysoap-use__label {
  margin-bottom: 16px;
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.bodysoap-use__head h2 {
  margin-bottom: 24px;
  color: #1f2f3f;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
}

.bodysoap-use__head p {
  color: #556270;
  line-height: 2;
}

.bodysoap-use__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.bodysoap-use-card {
  padding: 38px 34px;
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.06);
}

.bodysoap-use-card span {
  display: inline-block;
  margin-bottom: 14px;
  color: #00529f;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.bodysoap-use-card h3 {
  margin-bottom: 14px;
  color: #253746;
  font-size: 23px;
  line-height: 1.5;
}

.bodysoap-use-card p {
  color: #5a6670;
  line-height: 1.9;
}

@media (max-width: 900px) {
  .bodysoap-use {
    padding: 80px 0;
  }

  .bodysoap-use__grid {
    grid-template-columns: 1fr;
  }

  .bodysoap-use-card {
    padding: 30px;
  }
}

/* CONSULTATION */
.bodysoap-consultation {
  padding: 120px 0;
  background: #fff;
}

.bodysoap-consultation__inner {
  width: min(1200px, 90%);
  margin: auto;
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 70px;
  align-items: center;
}

.bodysoap-consultation__visual {
  position: sticky;
  top: 120px;
  overflow: hidden;
  border-radius: 32px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.12);
  align-self: start;
}

.bodysoap-consultation__visual img {
  width: 100%;
  display: block;
  aspect-ratio: 6 / 4;
  object-fit: cover;
}

.bodysoap-consultation__label {
  margin-bottom: 16px;
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.bodysoap-consultation__content h2 {
  margin-bottom: 22px;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
  color: #1f2f3f;
}

.bodysoap-consultation__lead {
  margin-bottom: 34px;
  color: #556270;
  line-height: 2;
}

.bodysoap-consultation__list {
  display: grid;
  gap: 14px;
}

.bodysoap-consultation-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 20px 22px;
  border-radius: 18px;
  background: #f7fbff;
  box-shadow: 0 10px 25px rgba(0, 82, 159, 0.05);
}

.bodysoap-consultation-item span {
  position: relative;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 3px;
  border-radius: 50%;
  background: #00529f;
}

.bodysoap-consultation-item span::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 5px;
  width: 6px;
  height: 10px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
}

.bodysoap-consultation-item p {
  margin: 0;
  color: #2d3b47;
  font-weight: 600;
  line-height: 1.8;
}

@media (max-width: 900px) {
  .bodysoap-consultation {
    padding: 80px 0;
  }

  .bodysoap-consultation__inner {
    grid-template-columns: 1fr;
    gap: 42px;
  }

  .bodysoap-consultation__visual img {
    aspect-ratio: 16 / 10;
  }

  .bodysoap-consultation__visual {
    position: static;
  }
}

@media (max-width: 600px) {
  .bodysoap-consultation-item {
    padding: 18px;
  }

  .bodysoap-consultation-item p {
    font-size: 14px;
  }
}

/* BODY CARE SERIES */
.bodysoap-series {
  padding: 120px 0;
  background: linear-gradient(180deg, #f7fbff 0%, #ffffff 100%);
}

.bodysoap-series__inner {
  width: min(1200px, 90%);
  margin: auto;
}

.bodysoap-series__head {
  max-width: 820px;
  margin: 0 auto 58px;
  text-align: center;
}

.bodysoap-series__label {
  margin-bottom: 16px;
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.bodysoap-series__head h2 {
  margin-bottom: 24px;
  color: #1f2f3f;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
}

.bodysoap-series__head p {
  color: #556270;
  line-height: 2;
}

.bodysoap-series__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.bodysoap-series-card {
  display: block;
  overflow: hidden;
  border-radius: 26px;
  background: #fff;
  text-decoration: none;
  border: 1px solid rgba(0, 82, 159, 0.08);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.06);
  transition: 0.3s;
}

.bodysoap-series-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 24px 54px rgba(0, 0, 0, 0.1);
}

.bodysoap-series-card img {
  width: 100%;
  display: block;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.bodysoap-series-card__body {
  padding: 24px;
}

.bodysoap-series-card span {
  display: inline-block;
  margin-bottom: 10px;
  color: #00529f;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.bodysoap-series-card h3 {
  margin-bottom: 12px;
  color: #253746;
  font-size: 19px;
  line-height: 1.5;
}

.bodysoap-series-card p {
  margin-bottom: 16px;
  color: #5a6670;
  font-size: 14px;
  line-height: 1.8;
}

.bodysoap-series-card em {
  color: #00529f;
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
}

@media (max-width: 1000px) {
  .bodysoap-series__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .bodysoap-series {
    padding: 80px 0;
  }

  .bodysoap-series__head {
    text-align: left;
    margin-bottom: 38px;
  }

  .bodysoap-series__grid {
    grid-template-columns: 1fr;
  }

  .bodysoap-series-card__body {
    padding: 22px;
  }
}

/* WHY QBI WORLD */
.bodysoap-strength {
  padding: 120px 0;
  background: #fff;
}

.bodysoap-strength__inner {
  width: min(1200px, 90%);
  margin: auto;
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 80px;
}

.bodysoap-strength__message {
  position: sticky;
  top: 120px;
  align-self: start;
}

.bodysoap-strength__label {
  margin-bottom: 16px;
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.bodysoap-strength__message h2 {
  margin-bottom: 24px;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
  color: #1f2f3f;
}

.bodysoap-strength__message > p {
  margin-bottom: 32px;
  color: #556270;
  line-height: 2;
}

.bodysoap-strength__box {
  padding: 28px;
  border-radius: 24px;
  background: #f7fbff;
  border-left: 4px solid #00529f;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.8;
  color: #1f2f3f;
}

.bodysoap-strength__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}

.bodysoap-strength-item {
  padding: 36px;
  border-radius: 24px;
  background: #fff;
  border: 1px solid rgba(0, 82, 159, 0.08);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05);
  transition: 0.3s;
}

.bodysoap-strength-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.08);
}

.bodysoap-strength-item span {
  display: inline-block;
  margin-bottom: 14px;
  color: #00529f;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.bodysoap-strength-item h3 {
  margin-bottom: 14px;
  font-size: 22px;
  line-height: 1.5;
  color: #253746;
}

.bodysoap-strength-item p {
  color: #5a6670;
  line-height: 1.9;
}

@media (max-width: 900px) {
  .bodysoap-strength {
    padding: 80px 0;
  }

  .bodysoap-strength__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .bodysoap-strength__message {
    position: static;
  }
}

@media (max-width: 600px) {
  .bodysoap-strength__list {
    grid-template-columns: 1fr;
  }

  .bodysoap-strength-item {
    padding: 28px;
  }

  .bodysoap-strength-item h3 {
    font-size: 20px;
  }

  .bodysoap-strength__box {
    padding: 22px;
    font-size: 18px;
  }
}

/* CTA */
.bodysoap-cta {
  position: relative;
  overflow: hidden;
  padding: 120px 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.2)),
    url("../../assets/img/lineup/bodycare/body-soap/cta-bg.webp");
  background-size: cover;
  background-position: center 40%;
}

.bodysoap-cta__inner {
  width: min(900px, 90%);
  margin: auto;
  text-align: center;
  padding: 60px 30px;
  border-radius: 32px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 20px 50px rgba(0, 82, 159, 0.08);
}

.bodysoap-cta__label {
  margin-bottom: 16px;
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.bodysoap-cta h2 {
  margin-bottom: 24px;
  color: #1f2f3f;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
}

.bodysoap-cta__text {
  max-width: 700px;
  margin: 0 auto 40px;
  color: #556270;
  line-height: 2;
}

.bodysoap-cta__buttons {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.bodysoap-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 280px;
  padding: 18px 32px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  transition: 0.3s;
}

.bodysoap-cta__btn--primary {
  background: #00529f;
  color: #fff;
}

.bodysoap-cta__btn--primary:hover {
  background: #003f7c;
  transform: translateY(-2px);
}

.bodysoap-cta__btn--secondary {
  background: rgba(255, 255, 255, 0.9);
  color: #00529f;
  border: 1px solid rgba(0, 82, 159, 0.15);
}

.bodysoap-cta__btn--secondary:hover {
  background: #fff;
  transform: translateY(-2px);
}

@media (max-width: 768px) {
  .bodysoap-cta {
    padding: 80px 0;
  }

  .bodysoap-cta__inner {
    padding: 40px 24px;
  }

  .bodysoap-cta__buttons {
    flex-direction: column;
  }

  .bodysoap-cta__btn {
    width: 100%;
    min-width: auto;
  }
}

/* /lineup/bodycare/deodorant/ */
/* FV */
.deodorant-fv {
  position: relative;
  overflow: hidden;
  padding: 140px 0 100px;
  background:
    radial-gradient(
      circle at 12% 18%,
      rgba(220, 238, 255, 0.9) 0,
      rgba(220, 238, 255, 0) 34%
    ),
    radial-gradient(
      circle at 88% 20%,
      rgba(220, 255, 240, 0.7) 0,
      rgba(220, 255, 240, 0) 32%
    ),
    linear-gradient(135deg, #f7fbff 0%, #ffffff 55%, #f7fffc 100%);
}

.deodorant-fv::after {
  content: "FRESH";
  position: absolute;
  right: -30px;
  bottom: 30px;
  font-size: clamp(80px, 13vw, 180px);
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1;
  color: rgba(0, 82, 159, 0.045);
  pointer-events: none;
}

.deodorant-fv__inner {
  position: relative;
  z-index: 1;
  width: min(1200px, 90%);
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
}

.deodorant-fv__content {
  flex: 0.9;
}

.deodorant-fv__label {
  display: inline-block;
  margin-bottom: 20px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.15em;

  color: #00529f;
}

.deodorant-fv__title {
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.35;
  color: #222;
  margin-bottom: 28px;
}

.deodorant-fv__lead {
  font-size: 17px;
  line-height: 2;
  color: #555;
  margin-bottom: 35px;
}

.deodorant-fv__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 40px;
}

.deodorant-fv__tags li {
  list-style: none;
  padding: 10px 16px;
  background: #fff;
  border-radius: 999px;
  font-size: 14px;
  color: #00529f;
  border: 1px solid rgba(0, 82, 159, 0.15);
  box-shadow: 0 10px 24px rgba(0, 82, 159, 0.06);
}

.deodorant-fv__buttons {
  display: flex;
  gap: 15px;
}

.deodorant-fv__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 58px;
  padding: 0 30px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  transition: 0.3s;
}

.deodorant-fv__btn--primary {
  background: #00529f;
  color: #fff;
}

.deodorant-fv__btn--primary:hover {
  opacity: 0.85;
}

.deodorant-fv__btn--secondary {
  background: #fff;
  color: #00529f;
  border: 1px solid #d9e6f3;
}

.deodorant-fv__visual {
  position: relative;
  flex: 1.1;
}

.deodorant-fv__visual::before {
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;
  right: -40px;
  top: -40px;
  border-radius: 50%;
  background: radial-gradient(rgba(0, 82, 159, 0.12), transparent 70%);
  z-index: -1;
}

.deodorant-fv__visual img {
  width: 100%;
  display: block;
  border-radius: 28px;
  box-shadow: 0 28px 60px rgba(37, 62, 84, 0.15);
}

@media (max-width: 768px) {
  .deodorant-fv {
    padding: 80px 0;
  }

  .deodorant-fv::after {
    font-size: 80px;
    right: -10px;
    bottom: 10px;
  }

  .deodorant-fv__inner {
    flex-direction: column;
    gap: 50px;
  }

  .deodorant-fv__buttons {
    flex-direction: column;
  }

  .deodorant-fv__lead {
    font-size: 15px;
  }

  .deodorant-fv__visual::before {
    display: none;
  }
}

/* DEODORANT MARKET */
.deodorant-market {
  padding: 110px 0;
  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
}

.deodorant-market__inner {
  width: min(1200px, 90%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 80px;
}

.deodorant-market__head {
  position: sticky;
  top: 120px;
  align-self: start;
}

.deodorant-market__label {
  margin-bottom: 16px;
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.deodorant-market__head h2 {
  margin-bottom: 24px;
  color: #222;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
}

.deodorant-market__head p {
  color: #555;
  line-height: 2;
}

.deodorant-market__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.deodorant-market-card {
  padding: 36px;
  background: #fff;
  border-radius: 24px;
  border: 1px solid rgba(0, 82, 159, 0.08);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05);
  transition: 0.3s;
}

.deodorant-market-card:hover {
  transform: translateY(-4px);
}

.deodorant-market-card span {
  display: inline-block;
  margin-bottom: 12px;
  color: #00529f;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.deodorant-market-card h3 {
  margin-bottom: 14px;
  color: #222;
  font-size: 22px;
  line-height: 1.5;
}

.deodorant-market-card p {
  color: #666;
  line-height: 1.9;
}

@media (max-width: 768px) {
  .deodorant-market {
    padding: 80px 0;
  }

  .deodorant-market__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .deodorant-market__head {
    position: static;
  }

  .deodorant-market__grid {
    grid-template-columns: 1fr;
  }

  .deodorant-market-card {
    padding: 28px;
  }
}

/* BRAND TYPE */
.deodorant-brand {
  padding: 110px 0;
  background: #fff;
}

.deodorant-brand__inner {
  width: min(1200px, 90%);
  margin: 0 auto;
}

.deodorant-brand__heading {
  margin: 0 auto 60px;
  text-align: center;
}

.deodorant-brand__label {
  margin-bottom: 16px;
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.deodorant-brand__heading h2 {
  margin-bottom: 24px;
  color: #222;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
}

.deodorant-brand__heading p {
  color: #555;
  line-height: 2;
}

.deodorant-brand__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}

.deodorant-brand-card {
  overflow: hidden;
  background: #fff;
  border-radius: 28px;
  border: 1px solid rgba(0, 82, 159, 0.08);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.05);
  transition: 0.3s;
}

.deodorant-brand-card:hover {
  transform: translateY(-6px);
}

.deodorant-brand-card__image {
  overflow: hidden;
}

.deodorant-brand-card__image img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: 0.5s;
}

.deodorant-brand-card:hover .deodorant-brand-card__image img {
  transform: scale(1.05);
}

.deodorant-brand-card__content {
  padding: 30px;
}

.deodorant-brand-card__content span {
  display: inline-block;
  margin-bottom: 12px;
  color: #00529f;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.deodorant-brand-card__content h3 {
  margin-bottom: 14px;
  color: #222;
  font-size: 24px;
  line-height: 1.5;
}

.deodorant-brand-card__content p {
  color: #666;
  line-height: 1.9;
}

@media (max-width: 768px) {
  .deodorant-brand {
    padding: 80px 0;
  }

  .deodorant-brand__grid {
    grid-template-columns: 1fr;
  }

  .deodorant-brand-card__content {
    padding: 24px;
  }

  .deodorant-brand-card__content h3 {
    font-size: 20px;
  }
}

/* CONTINUOUS USE */
.deodorant-business {
  padding: 110px 0;
  background: #f7fbff;
}

.deodorant-business__inner {
  width: min(1200px, 90%);
  margin: 0 auto;
}

.deodorant-business__head {
  margin-bottom: 60px;
}

.deodorant-business__label {
  margin-bottom: 16px;
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.deodorant-business__head h2 {
  margin-bottom: 24px;
  color: #222;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
}

.deodorant-business__head p {
  color: #555;
  line-height: 2;
}

.deodorant-business__visual {
  position: relative;
  overflow: hidden;
  margin-bottom: 50px;
  border-radius: 30px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
}

.deodorant-business__visual img {
  width: 100%;
  aspect-ratio: 16 / 6;
  object-fit: cover;
  display: block;
}

.deodorant-business__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.45) 0%,
    rgba(0, 0, 0, 0.1) 50%,
    rgba(0, 0, 0, 0) 100%
  );
}

.deodorant-business__message {
  position: absolute;
  left: 40px;
  bottom: 40px;
  z-index: 2;
  max-width: 500px;
  color: #fff;
}

.deodorant-business__message span {
  display: block;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.deodorant-business__message p {
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.5;
  font-weight: 700;
}

.deodorant-business__points {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(0, 82, 159, 0.15);
  border-bottom: 1px solid rgba(0, 82, 159, 0.15);
}

.deodorant-business-point {
  padding: 30px;
  border-right: 1px solid rgba(0, 82, 159, 0.15);
}

.deodorant-business-point:first-child {
  border-left: 1px solid rgba(0, 82, 159, 0.15);
}

.deodorant-business-point span {
  display: block;
  margin-bottom: 12px;
  color: #00529f;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.deodorant-business-point h3 {
  margin-bottom: 12px;
  color: #222;
  font-size: 20px;
  line-height: 1.5;
}

.deodorant-business-point p {
  color: #666;
  line-height: 1.8;
}

@media (max-width: 768px) {
  .deodorant-business {
    padding: 80px 0;
  }

  .deodorant-business__visual img {
    aspect-ratio: 4 / 3;
  }

  .deodorant-business__points {
    grid-template-columns: 1fr;
  }

  .deodorant-business-point {
    border-left: 1px solid rgba(0, 82, 159, 0.15);
  }
}

/* PRODUCT PLANNING */
.deodorant-planning {
  padding: 110px 0;
  background: linear-gradient(135deg, #f7fbff 0%, #ffffff 55%, #f7fffc 100%);
}

.deodorant-planning__inner {
  width: min(1180px, 90%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 70px;
  align-items: start;
}

.deodorant-planning__content {
  position: sticky;
  top: 120px;
  align-self: start;
}

.deodorant-planning__label {
  margin-bottom: 16px;
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.deodorant-planning__content h2 {
  margin-bottom: 24px;
  color: #222;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
}

.deodorant-planning__content > p {
  color: #555;
  line-height: 2;
}

.deodorant-planning__box {
  margin-top: 35px;
  padding: 28px;
  background: #fff;
  border-radius: 24px;
  border: 1px solid rgba(0, 82, 159, 0.08);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05);
}

.deodorant-planning__box span {
  display: block;
  margin-bottom: 10px;
  color: #00529f;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.deodorant-planning__box p {
  color: #333;
  font-weight: 600;
  line-height: 1.9;
}

.deodorant-planning__list {
  display: grid;
  gap: 20px;
}

.deodorant-planning-item {
  position: relative;
  padding: 34px 38px;
  background: #fff;
  border-radius: 24px;
  border: 1px solid rgba(0, 82, 159, 0.08);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05);
  transition: 0.3s;
}

.deodorant-planning-item:hover {
  transform: translateX(5px);
}

.deodorant-planning-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 25px;
  bottom: 25px;
  width: 4px;
  background: #00529f;
}

.deodorant-planning-item span {
  display: inline-block;
  margin-bottom: 10px;
  color: #00529f;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.deodorant-planning-item h3 {
  margin-bottom: 12px;
  font-size: 22px;
  line-height: 1.5;
}

.deodorant-planning-item p {
  color: #666;
  line-height: 1.9;
}

@media (max-width: 768px) {
  .deodorant-planning {
    padding: 80px 0;
  }

  .deodorant-planning__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .deodorant-planning__content {
    position: static;
  }

  .deodorant-planning-item {
    padding: 28px;
  }
}

/* CONSULTATION */
.deodorant-consultation {
  padding: 110px 0;
  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
}

.deodorant-consultation__inner {
  width: min(1180px, 90%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 70px;
  align-items: stretch;
}

.deodorant-consultation__visual {
  overflow: hidden;
  border-radius: 32px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.08);
}

.deodorant-consultation__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.deodorant-consultation__label {
  margin-bottom: 16px;
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.deodorant-consultation__content h2 {
  margin-bottom: 24px;
  color: #222;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
}

.deodorant-consultation__lead {
  margin-bottom: 34px;

  color: #555;
  line-height: 2;
}

.deodorant-consultation__list {
  display: grid;
  gap: 14px;
}

.deodorant-consultation-item {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 14px;
  align-items: start;
  padding: 20px 22px;
  background: #fff;
  border-radius: 18px;
  border: 1px solid rgba(0, 82, 159, 0.08);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.04);
  transition: 0.3s;
}

.deodorant-consultation-item:hover {
  transform: translateX(4px);
}

.deodorant-consultation-item span {
  position: relative;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(0, 82, 159, 0.1);
}

.deodorant-consultation-item span::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 5px;
  width: 6px;
  height: 10px;
  border-right: 2px solid #00529f;
  border-bottom: 2px solid #00529f;
  transform: rotate(45deg);
}

.deodorant-consultation-item p {
  margin: 0;
  color: #333;
  font-weight: 600;
  line-height: 1.8;
}

@media (max-width: 768px) {
  .deodorant-consultation {
    padding: 80px 0;
  }

  .deodorant-consultation__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

/* WHY QBI WORLD */
.deodorant-strength {
  padding: 110px 0;
  background: #fff;
}

.deodorant-strength__inner {
  width: min(1180px, 90%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 80px;
  align-items: start;
}

.deodorant-strength__message {
  position: sticky;
  top: 120px;
}

.deodorant-strength__label {
  margin-bottom: 16px;
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.deodorant-strength__message h2 {
  margin-bottom: 24px;
  color: #222;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
}

.deodorant-strength__message > p {
  margin-bottom: 32px;
  color: #555;
  line-height: 2;
}

.deodorant-strength__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}

.deodorant-strength-item {
  padding: 36px;
  background: #fff;
  border-radius: 24px;
  border: 1px solid rgba(0, 82, 159, 0.08);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05);
  transition: 0.3s;
}

.deodorant-strength-item:hover {
  transform: translateY(-4px);
}

.deodorant-strength-item span {
  display: inline-block;
  margin-bottom: 14px;
  color: #00529f;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.deodorant-strength-item h3 {
  margin-bottom: 14px;
  color: #222;
  font-size: 22px;
  line-height: 1.5;
}

.deodorant-strength-item p {
  color: #666;
  line-height: 1.9;
}

@media (max-width: 768px) {
  .deodorant-strength {
    padding: 80px 0;
  }

  .deodorant-strength__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .deodorant-strength__message {
    position: static;
  }

  .deodorant-strength__list {
    grid-template-columns: 1fr;
  }

  .deodorant-strength-item {
    padding: 28px;
  }
}

/* CTA */
.deodorant-cta {
  position: relative;
  overflow: hidden;
  padding: 120px 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.1)),
    url("../../assets/img/lineup/bodycare/deodorant/cta-bg.webp");
  background-size: cover;
  background-position: center;
}

.deodorant-cta__inner {
  width: min(900px, 90%);
  margin: auto;
  text-align: center;
  padding: 60px 30px;
  border-radius: 32px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 20px 50px rgba(0, 82, 159, 0.08);
}

.deodorant-cta__label {
  margin-bottom: 16px;
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.deodorant-cta h2 {
  margin: 0 0 24px;
  color: #222;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
}

.deodorant-cta__text {
  max-width: 720px;
  margin: 0 auto 36px;
  color: #333;
  font-size: 16px;
  line-height: 2;
}

.deodorant-cta__buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
}

.deodorant-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 320px;
  padding: 18px 32px;
  border-radius: 12px;
  text-decoration: none;
  font-size: 16px;
  font-weight: 700;
  transition: 0.3s;
}

.deodorant-cta__btn--primary {
  background: #00529f;
  color: #fff;
}

.deodorant-cta__btn--primary:hover {
  background: #003f7c;
}

.deodorant-cta__btn--secondary {
  background: #fff;
  color: #00529f;
  border: 1px solid #00529f;
}

.deodorant-cta__btn--secondary:hover {
  background: #f5f9ff;
}

@media (max-width: 768px) {
  .deodorant-cta {
    padding: 80px 0;
  }

  .deodorant-cta__inner {
    width: min(100% - 40px, 1200px);
    padding: 50px 24px;
  }

  .deodorant-cta h2 {
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 700;
  }

  .deodorant-cta__text {
    font-size: 15px;
    line-height: 1.9;
  }

  .deodorant-cta__buttons {
    flex-direction: column;
  }

  .deodorant-cta__btn {
    width: 100%;
    min-width: auto;
  }
}

/* /lineup/bodycare/femcare/ */
/* FV */
.femcare-fv {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  background: url("../../assets/img/lineup/bodycare/femcare/fv.webp");
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.femcare-fv__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.9) 0%,
    rgba(255, 255, 255, 0.7) 40%,
    rgba(255, 255, 255, 0.1) 100%
  );
}

.femcare-fv__inner {
  position: relative;
  z-index: 2;
  width: min(1200px, 90%);
  margin: auto;
  display: grid;
  grid-template-columns: 1fr 350px;
  gap: 60px;
  align-items: center;
}

.femcare-fv__content {
  max-width: 650px;
}

.femcare-fv__label {
  margin-bottom: 16px;
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.femcare-fv__title {
  margin-bottom: 24px;
  color: #1f2f3f;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.35;
}

.femcare-fv__lead {
  margin-bottom: 28px;
  color: #4f5d69;
  line-height: 2;
  font-size: 16px;
}

.femcare-fv__buttons {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.femcare-fv__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 28px;
  text-decoration: none;
  border-radius: 999px;
  font-weight: 700;
}

.femcare-fv__btn--primary {
  background: #00529f;
  color: #fff;
}

.femcare-fv__btn--secondary {
  background: #fff;
  color: #00529f;
  border: 1px solid #00529f;
}

.femcare-fv__features {
  display: grid;
  gap: 12px;
  margin-bottom: 36px;
}

.femcare-fv__feature {
  display: flex;
  align-items: center;
  gap: 12px;
}

.femcare-fv__feature span {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #00529f;
  position: relative;
  flex-shrink: 0;
}

.femcare-fv__feature span::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 5px;
  width: 6px;
  height: 10px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
}

.femcare-fv__feature p {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #2d3b47;
}

@media (max-width: 768px) {
  .femcare-fv {
    min-height: auto;
    padding: 120px 0 80px;
  }

  .femcare-fv__inner {
    grid-template-columns: 1fr;
  }

  .femcare-fv__buttons {
    flex-direction: column;
  }

  .femcare-fv__btn {
    width: 100%;
  }
}

/* FEMCARE MARKET */
.femcare-market {
  padding: 120px 0;
  background: #fff;
}

.femcare-market__inner {
  width: min(1200px, 90%);
  margin: auto;
  display: grid;
  grid-template-columns: 1fr 520px;
  gap: 80px;
  align-items: center;
}

.femcare-market__label {
  margin-bottom: 16px;
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.femcare-market h2 {
  margin-bottom: 28px;
  color: #1f2f3f;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.4;
}

.femcare-market__content {
  position: sticky;
  top: 120px;
  align-self: start;
}

.femcare-market__content p {
  color: #55636f;
  line-height: 2;
}

.femcare-market__message {
  margin-top: 36px;
  padding: 28px;
  border-left: 4px solid #00529f;
  background: #f7fbff;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.7;
  color: #1f2f3f;
}

.femcare-market__cards {
  display: grid;
  gap: 20px;
}

.femcare-market-card {
  padding: 34px;
  border-radius: 28px;
  background: #fff;
  border: 1px solid rgba(0, 82, 159, 0.08);
  box-shadow: 0 20px 50px rgba(0, 82, 159, 0.06);
}

.femcare-market-card span {
  display: block;
  margin-bottom: 10px;
  color: #00529f;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.femcare-market-card h3 {
  margin-bottom: 12px;
  color: #1f2f3f;
  font-size: 24px;
}

.femcare-market-card p {
  margin: 0;
  color: #55636f;
  line-height: 1.9;
}

@media (max-width: 768px) {
  .femcare-market {
    padding: 80px 0;
  }

  .femcare-market__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .femcare-market__content {
    position: static;
  }

  .femcare-market h2 {
    font-size: clamp(30px, 4vw, 40px);
    font-weight: 700;
  }

  .femcare-market__message {
    padding: 22px;
    font-size: 18px;
  }

  .femcare-market-card {
    padding: 24px;
    border-radius: 20px;
  }

  .femcare-market-card h3 {
    font-size: 20px;
  }
}

/* FEMCARE BRAND */
.femcare-brand {
  padding: 110px 0;
  background: linear-gradient(180deg, #f7fbff 0%, #ffffff 100%);
}

.femcare-brand__inner {
  width: min(1180px, 90%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 80px;
  align-items: start;
}

.femcare-brand__left {
  position: sticky;
  top: 120px;
  align-self: start;
}

.femcare-brand__visual {
  overflow: hidden;
  border-radius: 32px;
  box-shadow: 0 24px 60px rgba(37, 62, 84, 0.12);
}

.femcare-brand__visual img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.femcare-brand__caption {
  margin-top: 24px;
}

.femcare-brand__label {
  margin-bottom: 14px;
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.femcare-brand__caption h2 {
  margin-bottom: 18px;
  color: #1f2f3f;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
}

.femcare-brand__caption p {
  margin: 0;
  color: #55636f;
  line-height: 2;
  font-size: 15px;
}

.femcare-brand__list {
  display: grid;
  gap: 22px;
}

.femcare-brand-card {
  position: relative;
  padding: 34px 36px;
  border-radius: 28px;
  background: #fff;
  border: 1px solid rgba(0, 82, 159, 0.08);
  box-shadow: 0 18px 40px rgba(37, 62, 84, 0.06);
  transition: 0.25s ease;
}

.femcare-brand-card:hover {
  transform: translateX(4px);
  box-shadow: 0 24px 52px rgba(37, 62, 84, 0.1);
}

.femcare-brand-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 30px;
  bottom: 30px;
  width: 4px;
  border-radius: 999px;
  background: #00529f;
}

.femcare-brand-card span {
  display: inline-block;
  margin-bottom: 12px;
  color: #00529f;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.femcare-brand-card h3 {
  margin: 0 0 12px;
  color: #1f2f3f;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.5;
}

.femcare-brand-card p {
  margin: 0;
  color: #5a6670;
  font-size: 14px;
  line-height: 1.9;
}

@media (max-width: 900px) {
  .femcare-brand {
    padding: 80px 0;
  }

  .femcare-brand__inner {
    grid-template-columns: 1fr;
    gap: 42px;
  }

  .femcare-brand__left {
    position: static;
  }

  .femcare-brand__visual {
    max-width: 620px;
    margin: 0 auto;
  }

  .femcare-brand__visual img {
    aspect-ratio: 16 / 10;
  }
}

/* mobile */
@media (max-width: 600px) {
  .femcare-brand {
    padding: 64px 0;
  }

  .femcare-brand__visual {
    border-radius: 24px;
  }

  .femcare-brand__caption h2 {
    font-size: clamp(30px, 4vw, 40px);
    font-weight: 700;
  }

  .femcare-brand-card {
    padding: 28px 24px;
    border-radius: 22px;
  }

  .femcare-brand-card h3 {
    font-size: 20px;
  }
}

/* PRODUCT PLANNING */
.femcare-planning {
  padding: 110px 0;
  background: #fff;
}

.femcare-planning__inner {
  width: min(1180px, 90%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 80px;
  align-items: start;
}

.femcare-planning__label {
  margin: 0 0 16px;
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.femcare-planning__content {
  position: sticky;
  top: 120px;
  align-self: start;
}

.femcare-planning__content h2 {
  margin: 0 0 24px;
  color: #1f2f3f;
  font-size: clamp(30px, 4vw, 42px);
  line-height: 1.5;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.femcare-planning__content > p {
  margin: 0;
  color: #4e5d68;
  font-size: 15px;
  line-height: 2;
}

.femcare-planning__note {
  margin-top: 34px;
  padding: 28px;
  border-radius: 24px;
  background: #f7fbff;
  border-left: 4px solid #00529f;
}

.femcare-planning__note span {
  display: block;
  margin-bottom: 10px;
  color: #00529f;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.femcare-planning__note p {
  margin: 0;
  color: #1f2f3f;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.9;
}

.femcare-planning__visual {
  position: relative;
}

.femcare-planning__visual > img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 8;
  object-fit: cover;
  border-radius: 34px;
  box-shadow: 0 24px 60px rgba(37, 62, 84, 0.12);
  margin-bottom: 26px;
}

.femcare-planning__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.femcare-planning-card {
  padding: 28px;
  border-radius: 24px;
  background: #fff;
  border: 1px solid rgba(0, 82, 159, 0.08);
  box-shadow: 0 16px 36px rgba(37, 62, 84, 0.06);
  transition: 0.25s ease;
}

.femcare-planning-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 46px rgba(37, 62, 84, 0.1);
}

.femcare-planning-card span {
  display: inline-block;
  margin-bottom: 10px;
  color: #00529f;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.femcare-planning-card h3 {
  margin: 0 0 12px;
  color: #1f2f3f;
  font-size: 21px;
  line-height: 1.5;
}

.femcare-planning-card p {
  margin: 0;
  color: #5a6670;
  font-size: 14px;
  line-height: 1.9;
}

@media (max-width: 900px) {
  .femcare-planning {
    padding: 80px 0;
  }

  .femcare-planning__inner {
    grid-template-columns: 1fr;
    gap: 42px;
  }

  .femcare-planning__content {
    position: static;
  }

  .femcare-planning__visual > img {
    aspect-ratio: 16 / 10;
  }
}

@media (max-width: 600px) {
  .femcare-planning {
    padding: 64px 0;
  }

  .femcare-planning__note {
    padding: 24px;
    border-radius: 22px;
  }

  .femcare-planning__visual > img {
    border-radius: 24px;
    aspect-ratio: 4 / 3;
  }

  .femcare-planning__grid {
    grid-template-columns: 1fr;
  }

  .femcare-planning-card {
    padding: 26px 24px;
    border-radius: 22px;
  }

  .femcare-planning-card h3 {
    font-size: 19px;
  }
}

/* CONTINUOUS PURCHASE */
.femcare-continuous {
  position: relative;
  padding: 110px 0;
  background: #f7fbff;
  overflow: hidden;
}

.femcare-continuous__inner {
  position: relative;
  z-index: 1;
  width: min(1180px, 90%);
  margin: 0 auto;
}

.femcare-continuous__head {
  margin-bottom: 56px;
}

.femcare-continuous__label {
  margin: 0 0 16px;
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.femcare-continuous__head h2 {
  margin: 0 0 24px;
  color: #1f2f3f;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.03em;
}

.femcare-continuous__head p {
  margin: 0;
  color: #4e5d68;
  font-size: 15px;
  line-height: 2;
}

.femcare-continuous__visual {
  position: relative;
  overflow: hidden;
  margin-bottom: 46px;
  border-radius: 34px;
  box-shadow: 0 24px 60px rgba(37, 62, 84, 0.12);
}

.femcare-continuous__visual img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 6.4;
  object-fit: cover;
}

.femcare-continuous__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(0, 30, 60, 0.42) 0%,
    rgba(0, 30, 60, 0.18) 42%,
    rgba(0, 30, 60, 0) 100%
  );
}

.femcare-continuous__message {
  position: absolute;
  z-index: 1;
  left: 46px;
  bottom: 40px;
  max-width: 560px;
  color: #fff;
}

.femcare-continuous__message span {
  display: block;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.femcare-continuous__message p {
  margin: 0;
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: 0.03em;
}

.femcare-continuous__points {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(0, 82, 159, 0.16);
  border-bottom: 1px solid rgba(0, 82, 159, 0.16);
}

.femcare-continuous-point {
  padding: 30px 26px;
  border-right: 1px solid rgba(0, 82, 159, 0.16);
}

.femcare-continuous-point:first-child {
  border-left: 1px solid rgba(0, 82, 159, 0.16);
}

.femcare-continuous-point span {
  display: block;
  margin-bottom: 12px;
  color: #00529f;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.femcare-continuous-point h3 {
  margin: 0 0 12px;
  color: #253746;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.55;
}

.femcare-continuous-point p {
  margin: 0;
  color: #5a6670;
  font-size: 14px;
  line-height: 1.85;
}

@media (max-width: 900px) {
  .femcare-continuous {
    padding: 78px 0;
  }

  .femcare-continuous__head {
    margin-bottom: 42px;
  }

  .femcare-continuous__visual {
    margin-bottom: 36px;
    border-radius: 28px;
  }

  .femcare-continuous__visual img {
    aspect-ratio: 16 / 9;
  }

  .femcare-continuous__message {
    left: 30px;
    bottom: 30px;
    max-width: 420px;
  }

  .femcare-continuous__points {
    grid-template-columns: repeat(2, 1fr);
  }

  .femcare-continuous-point:nth-child(2) {
    border-right: 1px solid rgba(0, 82, 159, 0.16);
  }

  .femcare-continuous-point:nth-child(3),
  .femcare-continuous-point:nth-child(4) {
    border-top: 1px solid rgba(0, 82, 159, 0.16);
  }
}

@media (max-width: 600px) {
  .femcare-continuous {
    padding: 64px 0;
  }

  .femcare-continuous__visual {
    border-radius: 24px;
  }

  .femcare-continuous__visual img {
    aspect-ratio: 4 / 3;
  }

  .femcare-continuous__visual::after {
    background: linear-gradient(
      180deg,
      rgba(0, 30, 60, 0.05) 0%,
      rgba(0, 30, 60, 0.62) 100%
    );
  }

  .femcare-continuous__message {
    left: 22px;
    right: 22px;
    bottom: 22px;
    max-width: none;
  }

  .femcare-continuous__message p {
    font-size: 22px;
  }

  .femcare-continuous__points {
    grid-template-columns: 1fr;
  }

  .femcare-continuous-point,
  .femcare-continuous-point:first-child {
    border-left: 1px solid rgba(0, 82, 159, 0.16);
    border-right: 1px solid rgba(0, 82, 159, 0.16);
  }

  .femcare-continuous-point + .femcare-continuous-point {
    border-top: 1px solid rgba(0, 82, 159, 0.16);
  }

  .femcare-continuous-point {
    padding: 26px 24px;
  }
}

/* CONSULTATION */
.femcare-consultation {
  padding: 120px 0;
  background: #fff;
}

.femcare-consultation__inner {
  width: min(1180px, 90%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 46% 54%;
  gap: 70px;
  align-items: stretch;
}

.femcare-consultation__visual {
  overflow: hidden;
  border-radius: 32px;
  height: 100%;
  box-shadow: 0 24px 60px rgba(37, 62, 84, 0.12);
}

.femcare-consultation__visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.femcare-consultation__label {
  margin-bottom: 16px;
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.femcare-consultation__content h2 {
  margin-bottom: 24px;
  color: #1f2f3f;
  font-size: clamp(30px, 4vw, 38px);
  font-weight: 700;
  line-height: 1.5;
}

.femcare-consultation__lead {
  margin-bottom: 36px;
  color: #55636f;
  line-height: 2;
}

.femcare-consultation__list {
  display: grid;
  gap: 14px;
}

.femcare-consultation-item {
  padding: 24px 28px;
  border-radius: 22px;
  background: #f7fbff;
  border-left: 4px solid #00529f;
}

.femcare-consultation-item h3 {
  margin-bottom: 8px;
  color: #1f2f3f;
  font-size: 18px;
  line-height: 1.5;
}

.femcare-consultation-item p {
  margin: 0;
  color: #5a6670;
  line-height: 1.8;
}

@media (max-width: 900px) {
  .femcare-consultation {
    padding: 80px 0;
  }

  .femcare-consultation__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .femcare-consultation__visual img {
    aspect-ratio: 16 / 10;
  }
}

@media (max-width: 600px) {
  .femcare-consultation {
    padding: 64px 0;
  }

  .femcare-consultation__visual {
    border-radius: 24px;
  }

  .femcare-consultation-item {
    padding: 22px;
  }
}

/* WHY QBI WORLD */
.femcare-strength {
  padding: 110px 0;
  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
}

.femcare-strength__inner {
  width: min(1180px, 90%);
  margin: 0 auto;
}

.femcare-strength__head {
  margin: 0 auto 60px;
  text-align: center;
}

.femcare-strength__label {
  margin: 0 0 16px;
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.femcare-strength__head h2 {
  margin: 0 0 24px;
  color: #1f2f3f;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.03em;
}

.femcare-strength__head p {
  margin: 0;
  color: #4e5d68;
  font-size: 15px;
  line-height: 2;
}

.femcare-strength__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid rgba(0, 82, 159, 0.14);
  border-left: 1px solid rgba(0, 82, 159, 0.14);
  background: #fff;
}

.femcare-strength-card {
  position: relative;
  min-height: 300px;
  padding: 34px 28px;
  border-right: 1px solid rgba(0, 82, 159, 0.14);
  border-bottom: 1px solid rgba(0, 82, 159, 0.14);
  background: #fff;
  transition: 0.25s ease;
}

.femcare-strength-card:hover {
  background: #f7fbff;
}

.femcare-strength-card::before {
  content: "";
  position: absolute;
  left: 28px;
  top: 34px;
  width: 34px;
  height: 3px;
  border-radius: 999px;
  background: #00529f;
}

.femcare-strength-card span {
  display: block;
  margin: 28px 0 14px;
  color: #00529f;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.femcare-strength-card h3 {
  margin: 0 0 16px;
  color: #1f2f3f;
  font-size: 21px;
  line-height: 1.55;
  font-weight: 700;
}

.femcare-strength-card p {
  margin: 0;
  color: #5a6670;
  font-size: 14px;
  line-height: 1.9;
}

@media (max-width: 1000px) {
  .femcare-strength__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .femcare-strength-card {
    min-height: 260px;
  }
}

@media (max-width: 600px) {
  .femcare-strength {
    padding: 64px 0;
  }

  .femcare-strength__head {
    margin-bottom: 40px;
    text-align: left;
  }

  .femcare-strength__grid {
    grid-template-columns: 1fr;
  }

  .femcare-strength-card {
    min-height: auto;
    padding: 30px 24px;
  }

  .femcare-strength-card::before {
    left: 24px;
    top: 30px;
  }

  .femcare-strength-card h3 {
    font-size: 19px;
  }
}

/* CTA */
.femcare-cta {
  position: relative;
  overflow: hidden;
  padding: 120px 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.1)),
    url("../../assets/img/lineup/bodycare/femcare/cta-bg.webp");
  background-size: cover;
  background-position: center;
}

.femcare-cta__inner {
  width: min(900px, 90%);
  margin: auto;
  text-align: center;
  padding: 60px 30px;
  border-radius: 32px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 20px 50px rgba(0, 82, 159, 0.08);
}

.femcare-cta__label {
  margin-bottom: 16px;
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.femcare-cta h2 {
  margin-bottom: 22px;
  color: #222;
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
}

.femcare-cta__text {
  margin-bottom: 36px;
  color: #333;
  line-height: 2;
}

.femcare-cta__buttons {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.femcare-cta__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0 30px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  transition: 0.25s;
}

.femcare-cta__btn--primary {
  background: #00529f;
  color: #fff;
}

.femcare-cta__btn--primary:hover {
  transform: translateY(-2px);
}

.femcare-cta__btn--secondary {
  background: #fff;
  color: #00529f;
  border: 1px solid #00529f;
}

.femcare-cta__btn--secondary:hover {
  background: #f7fbff;
}

@media (max-width: 768px) {
  .femcare-cta {
    padding: 80px 0;
  }

  .femcare-cta__inner {
    padding: 50px 24px;
  }

  .femcare-cta__buttons {
    flex-direction: column;
  }

  .femcare-cta__btn {
    width: 100%;
  }
}

/* lineup/bodycare/femcare/ */
/* HAND CREAM FV */
.handcream-fv {
  position: relative;
  overflow: hidden;
  padding: 140px 0 100px;
  background:
    radial-gradient(
      circle at 12% 18%,
      rgba(255, 236, 224, 0.9) 0,
      rgba(255, 236, 224, 0) 34%
    ),
    radial-gradient(
      circle at 88% 20%,
      rgba(220, 238, 255, 0.9) 0,
      rgba(220, 238, 255, 0) 32%
    ),
    linear-gradient(135deg, #f7fbff 0%, #ffffff 48%, #fff8f3 100%);
}

.handcream-fv::after {
  content: "HAND CREAM";
  position: absolute;
  right: -30px;
  bottom: 30px;
  font-size: clamp(76px, 13vw, 180px);
  font-weight: 800;
  letter-spacing: 0.04em;
  color: rgba(0, 82, 159, 0.045);
  line-height: 1;
  pointer-events: none;
}

.handcream-fv__inner {
  position: relative;
  z-index: 1;
  width: min(1200px, 90%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  align-items: center;
  gap: 64px;
}

.handcream-fv__content {
  max-width: 620px;
}

.handcream-fv__label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.handcream-fv__label::before {
  content: "";
  width: 34px;
  height: 1px;
  background: #00529f;
}

.handcream-fv__title {
  margin: 0 0 24px;
  color: #1f2f3f;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.03em;
}

.handcream-fv__lead {
  margin: 0 0 28px;
  color: #4a5560;
  font-size: 16px;
  line-height: 2;
}

.handcream-fv__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 34px;
  padding: 0;
  list-style: none;
}

.handcream-fv__tags li {
  padding: 9px 15px;
  border: 1px solid rgba(0, 82, 159, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.75);
  color: #28506f;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 10px 24px rgba(0, 82, 159, 0.06);
}

.handcream-fv__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.handcream-fv__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 28px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: 0.25s ease;
}

.handcream-fv__btn--primary {
  background: #00529f;
  color: #fff;
  box-shadow: 0 14px 28px rgba(0, 82, 159, 0.22);
}

.handcream-fv__btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 34px rgba(0, 82, 159, 0.28);
}

.handcream-fv__btn--secondary {
  background: rgba(255, 255, 255, 0.8);
  color: #00529f;
  border: 1px solid rgba(0, 82, 159, 0.22);
}

.handcream-fv__btn--secondary:hover {
  background: #fff;
  transform: translateY(-2px);
}

.handcream-fv__visual {
  position: relative;
}

.handcream-fv__image {
  position: relative;
  overflow: hidden;
  border-radius: 34px;
  box-shadow: 0 28px 60px rgba(37, 62, 84, 0.16);
}

.handcream-fv__image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 45%,
    rgba(255, 255, 255, 0.22) 100%
  );
}

.handcream-fv__image img {
  display: block;
  width: 100%;
  aspect-ratio: 5 / 3.7;
  object-fit: cover;
}

.handcream-fv__note {
  position: absolute;
  width: 220px;
  padding: 18px 20px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 38px rgba(37, 62, 84, 0.14);
}

.handcream-fv__note span {
  display: block;
  margin-bottom: 6px;
  color: #00529f;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.handcream-fv__note p {
  margin: 0;
  color: #2d3b47;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
}

.handcream-fv__note--top {
  top: 28px;
  right: -26px;
}

.handcream-fv__note--bottom {
  left: -28px;
  bottom: 34px;
}

@media (max-width: 900px) {
  .handcream-fv {
    padding: 110px 0 72px;
  }

  .handcream-fv__inner {
    grid-template-columns: 1fr;
    gap: 42px;
  }

  .handcream-fv__content {
    max-width: none;
  }

  .handcream-fv__lead {
    font-size: 15px;
  }

  .handcream-fv__visual {
    max-width: 620px;
    margin: 0 auto;
  }
}

@media (max-width: 600px) {
  .handcream-fv {
    padding: 96px 0 56px;
  }

  .handcream-fv__title {
    font-size: clamp(30px, 4vw, 40px);
    font-weight: 700;
  }

  .handcream-fv__buttons {
    flex-direction: column;
  }

  .handcream-fv__btn {
    width: 100%;
  }

  .handcream-fv__note {
    position: static;
    width: auto;
    margin-top: 12px;
  }

  .handcream-fv__note--top,
  .handcream-fv__note--bottom {
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
  }

  .handcream-fv__image {
    border-radius: 24px;
  }
}

/* HAND CREAM MARKET */
.handcream-market {
  position: relative;
  padding: 100px 0;
  background: linear-gradient(180deg, #ffffff 0%, #f6fbff 100%);
}

.handcream-market::after {
  position: absolute;
  right: -24px;
  bottom: 18px;
  color: rgba(0, 82, 159, 0.045);
  font-size: clamp(80px, 13vw, 170px);
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1;
  pointer-events: none;
}

.handcream-market__inner {
  position: relative;
  z-index: 1;
  width: min(1200px, 90%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 80px;
  align-items: start;
}

.handcream-market__head {
  position: sticky;
  top: 120px;
  align-self: start;
}

.handcream-market__label {
  margin: 0 0 16px;
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.handcream-market__head h2 {
  margin: 0 0 22px;
  color: #1f2f3f;
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.03em;
}

.handcream-market__head p {
  margin: 0;
  color: #4e5d68;
  font-size: 15px;
  line-height: 2;
}

.handcream-market__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.handcream-market__message {
  margin-top: 32px;
  padding: 24px;
  border-radius: 20px;
  background: #fff;
  border-left: 4px solid #00529f;
  box-shadow: 0 15px 35px rgba(37, 62, 84, 0.08);
  color: #2d3b47;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.9;
}

.handcream-market-card {
  position: relative;
  min-height: 250px;
  padding: 30px 28px;
  border: 1px solid rgba(0, 82, 159, 0.1);
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 18px 40px rgba(37, 62, 84, 0.08);
  transition: 0.25s ease;
}

.handcream-market-card::before {
  content: "";
  position: absolute;
  top: 28px;
  right: 28px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(
    135deg,
    rgba(0, 82, 159, 0.12),
    rgba(255, 231, 216, 0.9)
  );
}

.handcream-market-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 52px rgba(37, 62, 84, 0.12);
}

.handcream-market-card__tag {
  display: inline-block;
  margin-bottom: 18px;
  color: #00529f;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.handcream-market-card h3 {
  margin: 0 0 14px;
  color: #253746;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.55;
}

.handcream-market-card p {
  margin: 0;
  color: #5a6670;
  font-size: 14px;
  line-height: 1.9;
}

@media (max-width: 900px) {
  .handcream-market {
    padding: 76px 0;
  }

  .handcream-market__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .handcream-market__head {
    position: static;
  }
}

@media (max-width: 600px) {
  .handcream-market {
    padding: 64px 0;
  }

  .handcream-market__grid {
    grid-template-columns: 1fr;
  }

  .handcream-market-card {
    min-height: auto;
    padding: 26px 24px;
    border-radius: 22px;
  }

  .handcream-market-card::before {
    width: 34px;
    height: 34px;
    top: 24px;
    right: 24px;
  }

  .handcream-market-card h3 {
    font-size: 18px;
  }
}

/* HAND CREAM BRAND */
.handcream-brand {
  padding: 100px 0;
  background: #fff;
}

.handcream-brand__inner {
  width: min(1200px, 90%);
  margin: 0 auto;
}

.handcream-brand__visual {
  margin-bottom: 70px;
  overflow: hidden;
  border-radius: 32px;
  box-shadow: 0 24px 60px rgba(37, 62, 84, 0.12);
}

.handcream-brand__visual img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 6;
  object-fit: cover;
}

.handcream-brand__heading {
  max-width: 900px;
  margin: 0 auto 60px;
  text-align: center;
}

.handcream-brand__label {
  margin-bottom: 16px;
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.handcream-brand__heading h2 {
  margin-bottom: 24px;
  color: #1f2f3f;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
}

.handcream-brand__heading p {
  color: #5a6670;
  line-height: 2;
}

.handcream-brand__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.handcream-brand-card {
  padding: 38px;
  border-radius: 26px;
  background: #f8fbfe;
  border: 1px solid rgba(0, 82, 159, 0.08);
  transition: 0.25s ease;
}

.handcream-brand-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(37, 62, 84, 0.08);
}

.handcream-brand-card span {
  display: inline-block;
  margin-bottom: 14px;
  color: #00529f;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.handcream-brand-card h3 {
  margin-bottom: 14px;
  color: #253746;
  font-size: 24px;
  line-height: 1.5;
}

.handcream-brand-card p {
  color: #5a6670;
  line-height: 1.9;
}

@media (max-width: 768px) {
  .handcream-brand {
    padding: 70px 0;
  }

  .handcream-brand__visual {
    margin-bottom: 50px;
    border-radius: 24px;
  }

  .handcream-brand__grid {
    grid-template-columns: 1fr;
  }

  .handcream-brand-card {
    padding: 28px;
  }

  .handcream-brand-card h3 {
    font-size: 20px;
  }
}

/* PRODUCT PLANNING */
.handcream-planning {
  position: relative;
  overflow: hidden;
  padding: 110px 0;
  background: linear-gradient(135deg, #f7fbff 0%, #ffffff 48%, #fff8f3 100%);
}

.handcream-planning::after {
  position: absolute;
  left: -24px;
  bottom: 20px;
  color: rgba(0, 82, 159, 0.045);
  font-size: clamp(76px, 12vw, 160px);
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1;
  pointer-events: none;
}

.handcream-planning__inner {
  position: relative;
  z-index: 1;
  width: min(1180px, 90%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 72px;
  align-items: center;
}

.handcream-planning__content {
  max-width: 500px;
}

.handcream-planning__label {
  margin: 0 0 16px;
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.handcream-planning__content h2 {
  margin: 0 0 24px;
  color: #1f2f3f;
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.03em;
}

.handcream-planning__content > p {
  margin: 0;
  color: #4e5d68;
  font-size: 15px;
  line-height: 2;
}

.handcream-planning__box {
  margin-top: 34px;
  padding: 26px 28px;
  border-radius: 24px;
  background: #fff;
  border: 1px solid rgba(0, 82, 159, 0.1);
  box-shadow: 0 18px 42px rgba(37, 62, 84, 0.08);
}

.handcream-planning__box span {
  display: block;
  margin-bottom: 10px;
  color: #00529f;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.handcream-planning__box p {
  margin: 0;
  color: #2d3b47;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.9;
}

.handcream-planning__list {
  display: grid;
  gap: 20px;
}

.handcream-planning-item {
  position: relative;
  padding: 34px 38px;
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(0, 82, 159, 0.1);
  box-shadow: 0 18px 40px rgba(37, 62, 84, 0.08);
  transition: 0.25s ease;
}

.handcream-planning-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 28px;
  bottom: 28px;
  width: 4px;
  border-radius: 999px;
  background: #00529f;
}

.handcream-planning-item:hover {
  transform: translateX(4px);
  box-shadow: 0 24px 52px rgba(37, 62, 84, 0.12);
}

.handcream-planning-item span {
  display: inline-block;
  margin-bottom: 10px;
  color: #00529f;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.handcream-planning-item h3 {
  margin: 0 0 12px;
  color: #253746;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.5;
}

.handcream-planning-item p {
  margin: 0;
  color: #5a6670;
  font-size: 14px;
  line-height: 1.9;
}

@media (max-width: 900px) {
  .handcream-planning {
    padding: 78px 0;
  }

  .handcream-planning__inner {
    grid-template-columns: 1fr;
    gap: 42px;
  }

  .handcream-planning__content {
    max-width: none;
  }
}

@media (max-width: 600px) {
  .handcream-planning {
    padding: 64px 0;
  }

  .handcream-planning__box {
    padding: 24px;
    border-radius: 22px;
  }

  .handcream-planning-item {
    padding: 28px 26px;
    border-radius: 22px;
  }

  .handcream-planning-item h3 {
    font-size: 19px;
  }
}

/* HAND CREAM BUSINESS */
.handcream-business {
  position: relative;
  overflow: hidden;
  padding: 110px 0;
  background: #f7fbff;
}

.handcream-business__inner {
  position: relative;
  z-index: 1;
  width: min(1180px, 90%);
  margin: 0 auto;
}

.handcream-business__head {
  margin-bottom: 56px;
}

.handcream-business__label {
  margin: 0 0 16px;
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.handcream-business__head h2 {
  margin: 0 0 22px;
  color: #1f2f3f;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.03em;
}

.handcream-business__head p {
  margin: 0;
  color: #4e5d68;
  font-size: 15px;
  line-height: 2;
}

.handcream-business__visual {
  position: relative;
  overflow: hidden;
  margin-bottom: 46px;
  border-radius: 32px;
  box-shadow: 0 24px 60px rgba(37, 62, 84, 0.12);
}

.handcream-business__visual img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 6;
  object-fit: cover;
}

.handcream-business__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(0, 30, 60, 0.44) 0%,
    rgba(0, 30, 60, 0.18) 42%,
    rgba(0, 30, 60, 0) 100%
  );
}

.handcream-business__message {
  position: absolute;
  z-index: 1;
  left: 44px;
  bottom: 38px;
  max-width: 500px;
  color: #fff;
}

.handcream-business__message span {
  display: block;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.handcream-business__message p {
  margin: 0;
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: 0.03em;
}

.handcream-business__points {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(0, 82, 159, 0.16);
  border-bottom: 1px solid rgba(0, 82, 159, 0.16);
}

.handcream-business-point {
  padding: 30px 26px;
  border-right: 1px solid rgba(0, 82, 159, 0.16);
}

.handcream-business-point:first-child {
  border-left: 1px solid rgba(0, 82, 159, 0.16);
}

.handcream-business-point span {
  display: block;
  margin-bottom: 12px;
  color: #00529f;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.handcream-business-point h3 {
  margin: 0 0 12px;
  color: #253746;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.55;
}

.handcream-business-point p {
  margin: 0;
  color: #5a6670;
  font-size: 14px;
  line-height: 1.85;
}

@media (max-width: 900px) {
  .handcream-business {
    padding: 78px 0;
  }

  .handcream-business__head {
    margin-bottom: 42px;
  }

  .handcream-business__visual {
    margin-bottom: 36px;
    border-radius: 26px;
  }

  .handcream-business__visual img {
    aspect-ratio: 16 / 9;
  }

  .handcream-business__message {
    left: 28px;
    bottom: 28px;
    max-width: 360px;
  }

  .handcream-business__points {
    grid-template-columns: repeat(2, 1fr);
  }

  .handcream-business-point:nth-child(2) {
    border-right: 1px solid rgba(0, 82, 159, 0.16);
  }

  .handcream-business-point:nth-child(3),
  .handcream-business-point:nth-child(4) {
    border-top: 1px solid rgba(0, 82, 159, 0.16);
  }
}

@media (max-width: 600px) {
  .handcream-business {
    padding: 64px 0;
  }

  .handcream-business__visual {
    border-radius: 22px;
  }

  .handcream-business__visual img {
    aspect-ratio: 4 / 3;
  }

  .handcream-business__visual::after {
    background: linear-gradient(
      180deg,
      rgba(0, 30, 60, 0.05) 0%,
      rgba(0, 30, 60, 0.58) 100%
    );
  }

  .handcream-business__message {
    left: 22px;
    right: 22px;
    bottom: 22px;
  }

  .handcream-business__message p {
    font-size: 23px;
  }

  .handcream-business__points {
    grid-template-columns: 1fr;
  }

  .handcream-business-point,
  .handcream-business-point:first-child {
    border-left: 1px solid rgba(0, 82, 159, 0.16);
    border-right: 1px solid rgba(0, 82, 159, 0.16);
  }

  .handcream-business-point + .handcream-business-point {
    border-top: 1px solid rgba(0, 82, 159, 0.16);
  }

  .handcream-business-point {
    padding: 26px 24px;
  }
}

/* CONSULTATION */
.handcream-consultation {
  position: relative;
  overflow: hidden;
  padding: 110px 0;
  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
}

.handcream-consultation::before {
  content: "";
  position: absolute;
  left: -120px;
  bottom: -120px;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: rgba(255, 231, 216, 0.58);
  filter: blur(8px);
}

.handcream-consultation__inner {
  position: relative;
  z-index: 1;
  width: min(1180px, 90%);
  margin: 0 auto;

  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 72px;

  align-items: stretch;
}

.handcream-consultation__visual {
  height: 100%;
  overflow: hidden;
  border-radius: 34px;
  box-shadow: 0 28px 60px rgba(37, 62, 84, 0.14);
}

.handcream-consultation__visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.handcream-consultation__label {
  margin: 0 0 16px;
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.handcream-consultation__content h2 {
  margin: 0 0 22px;
  color: #1f2f3f;
  font-size: clamp(30px, 4vw, 34px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.03em;
}

.handcream-consultation__lead {
  margin: 0 0 34px;
  color: #4e5d68;
  font-size: 15px;
  line-height: 2;
}

.handcream-consultation__list {
  display: grid;
  gap: 14px;
}

.handcream-consultation-item {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 14px;
  align-items: start;

  padding: 20px 22px;

  border-radius: 18px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 82, 159, 0.1);

  box-shadow: 0 12px 30px rgba(37, 62, 84, 0.06);

  transition: 0.25s ease;
}

.handcream-consultation-item:hover {
  transform: translateX(4px);
  box-shadow: 0 18px 36px rgba(37, 62, 84, 0.08);
}

.handcream-consultation-item span {
  position: relative;
  display: block;
  width: 22px;
  height: 22px;
  margin-top: 2px;

  border-radius: 50%;
  background: rgba(0, 82, 159, 0.1);
}

.handcream-consultation-item span::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 5px;

  width: 6px;
  height: 10px;

  border-right: 2px solid #00529f;
  border-bottom: 2px solid #00529f;

  transform: rotate(45deg);
}

.handcream-consultation-item p {
  margin: 0;

  color: #2d3b47;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.8;
}

@media (max-width: 900px) {
  .handcream-consultation {
    padding: 78px 0;
  }

  .handcream-consultation__inner {
    grid-template-columns: 1fr;
    gap: 42px;
  }

  .handcream-consultation__visual {
    height: auto;
    max-width: 620px;
    margin: 0 auto;
  }

  .handcream-consultation__visual img {
    height: auto;
    aspect-ratio: 16 / 10;
  }
}

@media (max-width: 600px) {
  .handcream-consultation {
    padding: 64px 0;
  }

  .handcream-consultation__visual {
    border-radius: 24px;
  }

  .handcream-consultation-item {
    padding: 18px;
    border-radius: 16px;
  }

  .handcream-consultation-item p {
    font-size: 14px;
  }
}

/* WHY QBI WORLD */
.handcream-strength {
  padding: 110px 0;
  background: #fff;
}

.handcream-strength__inner {
  width: min(1180px, 90%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 80px;
  align-items: start;
}

.handcream-strength__message {
  position: sticky;
  top: 120px;
}

.handcream-strength__label {
  margin-bottom: 16px;
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.handcream-strength__message h2 {
  margin-bottom: 24px;
  color: #1f2f3f;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
}

.handcream-strength__message > p {
  margin-bottom: 32px;
  color: #4e5d68;
  line-height: 2;
}

.handcream-strength__box {
  padding: 28px;
  border-radius: 24px;
  background: #f7fbff;
  border-left: 4px solid #00529f;
  color: #1f2f3f;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.7;
}

.handcream-strength__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}

.handcream-strength-item {
  padding: 36px;
  border-radius: 26px;
  background: #fff;
  border: 1px solid rgba(0, 82, 159, 0.08);
  box-shadow: 0 18px 40px rgba(37, 62, 84, 0.06);
  transition: 0.25s;
}

.handcream-strength-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 50px rgba(37, 62, 84, 0.1);
}

.handcream-strength-item span {
  display: inline-block;
  margin-bottom: 14px;
  color: #00529f;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.handcream-strength-item h3 {
  margin-bottom: 14px;
  color: #253746;
  font-size: 22px;
  line-height: 1.5;
}

.handcream-strength-item p {
  color: #5a6670;
  line-height: 1.9;
}

@media (max-width: 900px) {
  .handcream-strength {
    padding: 80px 0;
  }

  .handcream-strength__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .handcream-strength__message {
    position: static;
  }
}

@media (max-width: 600px) {
  .handcream-strength {
    padding: 64px 0;
  }

  .handcream-strength__list {
    grid-template-columns: 1fr;
  }

  .handcream-strength-item {
    padding: 28px;
  }

  .handcream-strength-item h3 {
    font-size: 20px;
  }

  .handcream-strength__box {
    padding: 22px;
    font-size: 18px;
  }
}

/* CTA */
.handcream-cta {
  position: relative;
  overflow: hidden;
  padding: 120px 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)),
    url("../../assets/img/lineup/bodycare/hand-cream/cta-bg.webp");
  background-size: cover;
  background-position: center;
}

.handcream-cta__inner {
  position: relative;
  z-index: 1;
  width: min(900px, 90%);
  margin: auto;
  text-align: center;
  background: rgba(255, 255, 255, 0);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 32px;
  padding: 50px 24px;
  box-shadow: 0 20px 50px rgba(0, 82, 159, 0.08);
}

.handcream-cta__label {
  margin-bottom: 16px;
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.handcream-cta h2 {
  margin: 0 0 24px;
  color: #222;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
}

.handcream-cta__text {
  max-width: 700px;
  margin: 0 auto 36px;
  color: #222;
  font-size: 16px;
  line-height: 2;
}

.handcream-cta__buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
}

.handcream-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 280px;
  padding: 18px 30px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  transition: 0.3s ease;
}

.handcream-cta__btn--primary {
  background: #00529f;
  color: #fff;
}

.handcream-cta__btn--primary:hover {
  background: #003f7c;
}

.handcream-cta__btn--secondary {
  background: #fff;
  color: #00529f;
  border: 1px solid #00529f;
}

.handcream-cta__btn--secondary:hover {
  background: #f5f9ff;
}

@media (max-width: 768px) {
  .handcream-cta {
    padding: 70px 0;
  }

  .handcream-cta__inner {
    width: min(100% - 40px, 1200px);
    padding: 50px 24px;
  }

  .handcream-cta h2 {
    font-size: clamp(30px, 4vw, 40px);
    font-weight: 700;
  }

  .handcream-cta__text {
    font-size: 15px;
    line-height: 1.9;
  }

  .handcream-cta__buttons {
    flex-direction: column;
  }

  .handcream-cta__btn {
    width: 100%;
    min-width: auto;
  }
}

/* /lineup/bodycare/hand-cream/ */
/* FV */
.massage-fv {
  position: relative;
  overflow: hidden;
  padding: 140px 0 100px;
  background:
    radial-gradient(circle at 15% 20%, rgba(0, 82, 159, 0.08), transparent 35%),
    linear-gradient(135deg, #f7fbff 0%, #ffffff 50%, #f8f8f8 100%);
}

.massage-fv::after {
  content: "MASSAGE GEL";
  position: absolute;
  right: -20px;
  bottom: 20px;
  font-size: clamp(80px, 12vw, 180px);
  font-weight: 800;
  color: rgba(0, 82, 159, 0.04);
  line-height: 1;
  pointer-events: none;
}

.massage-fv__inner {
  position: relative;
  z-index: 2;
  width: min(1200px, 90%);
  margin: auto;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 70px;
  align-items: center;
}

.massage-fv__label {
  margin-bottom: 16px;
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.massage-fv__title {
  margin-bottom: 24px;
  color: #1f2f3f;
  font-size: clamp(30px, 4vw, 38px);
  line-height: 1.4;
  font-weight: 700;
}

.massage-fv__lead {
  margin-bottom: 28px;
  color: #4f5d69;
  font-size: 16px;
  line-height: 2;
}

.massage-fv__features {
  display: grid;
  gap: 12px;
  margin-bottom: 36px;
}

.massage-fv__feature {
  display: flex;
  align-items: center;
  gap: 12px;
}

.massage-fv__feature span {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #00529f;
  position: relative;
  flex-shrink: 0;
}

.massage-fv__feature span::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 5px;
  width: 6px;
  height: 10px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
}

.massage-fv__feature p {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #2d3b47;
}

.massage-fv__buttons {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.massage-fv__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 28px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  transition: 0.3s;
}

.massage-fv__btn--primary {
  background: #00529f;
  color: #fff;
}

.massage-fv__btn--primary:hover {
  background: #003f7c;
}

.massage-fv__btn--secondary {
  background: #fff;
  color: #00529f;
  border: 1px solid #00529f;
}

.massage-fv__btn--secondary:hover {
  background: #f5f9ff;
}

.massage-fv__visual {
  position: relative;
}

.massage-fv__visual img {
  display: block;
  width: 100%;
  border-radius: 32px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.12);
}

.massage-fv__card {
  position: absolute;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(10px);
  padding: 18px 22px;
  border-radius: 18px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
}

.massage-fv__card span {
  display: block;
  margin-bottom: 6px;
  color: #00529f;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.massage-fv__card p {
  margin: 0;
  color: #2d3b47;
  font-size: 14px;
  font-weight: 600;
}

.massage-fv__card--top {
  top: 20px;
  right: -20px;
}

.massage-fv__card--bottom {
  left: -20px;
  bottom: 30px;
}

@media (max-width: 900px) {
  .massage-fv {
    padding: 120px 0 80px;
  }

  .massage-fv__inner {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .massage-fv__visual {
    max-width: 700px;
    margin: auto;
  }

  .massage-fv__card--top {
    right: 20px;
  }

  .massage-fv__card--bottom {
    left: 20px;
  }
}

@media (max-width: 768px) {
  .massage-fv {
    padding: 110px 0 70px;
  }

  .massage-fv::after {
    display: none;
  }

  .massage-fv__title {
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 700;
  }

  .massage-fv__lead {
    font-size: 15px;
  }

  .massage-fv__feature p {
    font-size: 14px;
    line-height: 1.7;
  }

  .massage-fv__buttons {
    flex-direction: column;
  }

  .massage-fv__btn {
    width: 100%;
  }

  .massage-fv__card {
    position: static;
    margin-top: 12px;
  }

  .massage-fv__visual img {
    border-radius: 24px;
  }
}

/* WHY MASSAGE GEL */

.massage-market {
  padding: 110px 0;
  background: #fff;
}

.massage-market__inner {
  width: min(1200px, 90%);
  margin: auto;
  display: grid;
  grid-template-columns: 400px 1fr;
  gap: 80px;
}

.massage-market__content {
  position: sticky;
  top: 120px;
  align-self: start;
}

.massage-market__label {
  margin-bottom: 16px;
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.massage-market__content h2 {
  margin-bottom: 24px;
  color: #1f2f3f;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
}

.massage-market__content p {
  color: #5a6670;
  line-height: 2;
}

.massage-market__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.massage-market-card {
  padding: 36px;
  border-radius: 26px;
  background: #fff;
  border: 1px solid rgba(0, 82, 159, 0.08);
  box-shadow: 0 18px 40px rgba(37, 62, 84, 0.06);
  transition: 0.3s;
}

.massage-market-card:hover {
  transform: translateY(-4px);
}

.massage-market-card span {
  display: inline-block;
  margin-bottom: 14px;
  color: #00529f;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.massage-market-card h3 {
  margin-bottom: 14px;
  color: #253746;
  font-size: 22px;
  line-height: 1.5;
}

.massage-market-card p {
  color: #5a6670;
  line-height: 1.9;
}

@media (max-width: 900px) {
  .massage-market {
    padding: 80px 0;
  }

  .massage-market__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .massage-market__content {
    position: static;
  }
}

@media (max-width: 768px) {
  .massage-market__grid {
    grid-template-columns: 1fr;
  }

  .massage-market-card {
    padding: 28px;
  }
}

/* FOR SALON BRAND */
.massage-brand {
  padding: 110px 0;
  background: #f7fbff;
}

.massage-brand__inner {
  width: min(1200px, 90%);
  margin: auto;
}

.massage-brand__visual {
  overflow: hidden;
  border-radius: 32px;
  margin-bottom: 60px;
  box-shadow: 0 24px 60px rgba(37, 62, 84, 0.12);
}

.massage-brand__visual img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 5;
  object-fit: cover;
}

.massage-brand__head {
  max-width: 900px;
  margin: 0 auto 60px;
  text-align: center;
}

.massage-brand__label {
  margin-bottom: 16px;
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.massage-brand__head h2 {
  margin-bottom: 24px;
  color: #1f2f3f;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
}

.massage-brand__head p {
  color: #5a6670;
  line-height: 2;
}

.massage-brand__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.massage-brand-card {
  padding: 34px 28px;
  border-radius: 24px;
  background: #fff;
  border: 1px solid rgba(0, 82, 159, 0.08);
  box-shadow: 0 18px 40px rgba(37, 62, 84, 0.06);
  transition: 0.3s;
}

.massage-brand-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 50px rgba(37, 62, 84, 0.1);
}

.massage-brand-card span {
  display: inline-block;
  margin-bottom: 14px;
  color: #00529f;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.massage-brand-card h3 {
  margin-bottom: 14px;
  color: #253746;
  font-size: 20px;
  line-height: 1.5;
}

.massage-brand-card p {
  margin: 0;
  color: #5a6670;
  line-height: 1.9;
  font-size: 14px;
}

@media (max-width: 900px) {
  .massage-brand {
    padding: 80px 0;
  }

  .massage-brand__visual {
    margin-bottom: 50px;
  }

  .massage-brand__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .massage-brand {
    padding: 64px 0;
  }

  .massage-brand__visual {
    border-radius: 24px;
    margin-bottom: 40px;
  }

  .massage-brand__visual img {
    aspect-ratio: 4 / 3;
  }

  .massage-brand__head {
    text-align: left;
    margin-bottom: 40px;
  }

  .massage-brand__head h2 {
    font-size: clamp(30px, 4vw, 40px);
    font-weight: 700;
  }

  .massage-brand__grid {
    grid-template-columns: 1fr;
  }

  .massage-brand-card {
    padding: 26px;
  }

  .massage-brand-card h3 {
    font-size: 18px;
  }
}

.massage-brand__message {
  max-width: 1200px;
  margin: 60px auto 0;
  padding: 50px 40px;
  background: #00529f;
  border-radius: 24px;
  text-align: center;
}

.massage-brand__message p {
  margin: 0;
  color: #fff;
  font-size: clamp(20px, 2.5vw, 30px);
  font-weight: 700;
  line-height: 1.7;
}

@media (max-width: 768px) {
  .massage-brand__message {
    margin-top: 40px;
    padding: 28px 20px;
    border-radius: 20px;
  }

  .massage-brand__message p {
    font-size: 20px;
    line-height: 1.6;
  }
}

/* PRODUCT PLANNING */
.massage-planning {
  padding: 110px 0;
  background: #fff;
}

.massage-planning__inner {
  width: min(1200px, 90%);
  margin: auto;
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 70px;
  align-items: center;
}

.massage-planning__visual {
  position: sticky;
  top: 120px;
  align-self: start;
}

.massage-planning__visual img {
  width: 100%;
  display: block;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 32px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.12);
}

.massage-planning__label {
  margin-bottom: 16px;
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.massage-planning__content h2 {
  margin-bottom: 24px;
  color: #1f2f3f;
  font-size: clamp(26px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
}

.massage-planning__lead {
  margin-bottom: 40px;
  color: #5a6670;
  line-height: 2;
}

.massage-planning__list {
  display: grid;
  gap: 18px;
}

.massage-planning-item {
  padding: 26px 28px;
  border-radius: 20px;
  background: #f8fbff;
  border: 1px solid rgba(0, 82, 159, 0.08);
}

.massage-planning-item span {
  display: inline-block;
  margin-bottom: 10px;
  color: #00529f;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.massage-planning-item h3 {
  margin-bottom: 10px;
  color: #253746;
  font-size: 22px;
}

.massage-planning-item p {
  margin: 0;
  color: #5a6670;
  line-height: 1.9;
}

@media (max-width: 900px) {
  .massage-planning {
    padding: 80px 0;
  }

  .massage-planning__inner {
    grid-template-columns: 1fr;
  }

  .massage-planning__visual {
    position: static;
  }
}

@media (max-width: 768px) {
  .massage-planning {
    padding: 64px 0;
  }

  .massage-planning__visual img {
    border-radius: 24px;
  }

  .massage-planning-item h3 {
    font-size: 20px;
  }
}

/* CONSULTATION */
.massage-consultation {
  padding: 110px 0;
  background: #f7fbff;
}

.massage-consultation__inner {
  width: min(1200px, 90%);
  margin: auto;
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 70px;
  align-items: center;
}

.massage-consultation__visual {
  position: sticky;
  top: 120px;
  align-self: start;
}

.massage-consultation__visual img {
  width: 100%;
  display: block;
  object-fit: cover;
  border-radius: 32px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.12);
}

.massage-consultation__label {
  margin-bottom: 16px;
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.massage-consultation__content h2 {
  margin-bottom: 36px;
  color: #1f2f3f;
  font-size: clamp(30px, 4vw, 38px);
  font-weight: 700;
  line-height: 1.5;
}

.massage-consultation__list {
  display: grid;
  gap: 14px;
  margin-bottom: 36px;
}

.massage-consultation__item {
  padding: 20px 24px;
  background: #fff;
  border-radius: 16px;
  border-left: 4px solid #00529f;
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
}

.massage-consultation__message {
  padding: 28px;
  background: #fff;
  border-radius: 20px;
  line-height: 2;
  color: #5a6670;
}

@media (max-width: 900px) {
  .massage-consultation {
    padding: 80px 0;
  }

  .massage-consultation__inner {
    grid-template-columns: 1fr;
  }

  .massage-consultation__visual {
    position: static;
  }
}

@media (max-width: 768px) {
  .massage-consultation {
    padding: 64px 0;
  }

  .massage-consultation__visual img {
    border-radius: 24px;
  }
}

/* SALON EXPERIENCE */
.massage-experience {
  padding: 110px 0;
  background: #fff;
}

.massage-experience__inner {
  width: min(1200px, 90%);
  margin: auto;
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 80px;
}

.massage-experience__content {
  position: sticky;
  top: 120px;
  align-self: start;
}

.massage-experience__label {
  margin-bottom: 16px;
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.massage-experience__content h2 {
  margin-bottom: 24px;
  color: #1f2f3f;
  font-size: clamp(30px, 4vw, 38px);
  font-weight: 700;
  line-height: 1.5;
}

.massage-experience__content p {
  margin-bottom: 20px;
  color: #5a6670;
  line-height: 2;
}

.massage-experience__message {
  margin-top: 32px;
  padding: 24px;
  background: #00529f;
  color: #fff;
  border-radius: 20px;
  line-height: 1.8;
  font-weight: 700;
}

.massage-experience__gallery {
  display: grid;
  gap: 24px;
}

.massage-experience__gallery img {
  width: 100%;
  display: block;
  border-radius: 28px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
}

@media (max-width: 900px) {
  .massage-experience {
    padding: 80px 0;
  }

  .massage-experience__inner {
    grid-template-columns: 1fr;
  }

  .massage-experience__content {
    position: static;
  }
}

@media (max-width: 768px) {
  .massage-experience {
    padding: 64px 0;
  }

  .massage-experience__gallery {
    gap: 16px;
  }
}

/* WHY QBI WORLD */
.massage-strength {
  padding: 110px 0;
  background: #f7fbff;
}

.massage-strength__inner {
  width: min(1200px, 90%);
  margin: auto;
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 80px;
}

.massage-strength__message {
  position: sticky;
  top: 120px;
  align-self: start;
}

.massage-strength__label {
  margin-bottom: 16px;
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.massage-strength__message h2 {
  margin-bottom: 24px;
  color: #1f2f3f;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
}

.massage-strength__message p {
  color: #5a6670;
  line-height: 2;
}

.massage-strength__box {
  margin-top: 32px;
  padding: 28px;
  border-radius: 20px;
  background: #00529f;
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.7;
}

.massage-strength__list {
  display: grid;
  gap: 20px;
}

.massage-strength-item {
  padding: 36px;
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 18px 40px rgba(37, 62, 84, 0.06);
}

.massage-strength-item span {
  display: inline-block;
  margin-bottom: 12px;
  color: #00529f;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.massage-strength-item h3 {
  margin-bottom: 12px;
  color: #253746;
  font-size: 24px;
  line-height: 1.5;
}

.massage-strength-item p {
  margin: 0;
  color: #5a6670;
  line-height: 1.9;
}

@media (max-width: 900px) {
  .massage-strength {
    padding: 80px 0;
  }

  .massage-strength__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .massage-strength__message {
    position: static;
  }
}

@media (max-width: 768px) {
  .massage-strength {
    padding: 64px 0;
  }

  .massage-strength-item {
    padding: 28px;
  }

  .massage-strength-item h3 {
    font-size: 20px;
  }

  .massage-strength__box {
    font-size: 20px;
  }
}

/* CTA */
.massage-cta {
  position: relative;
  overflow: hidden;
  padding: 120px 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.15)),
    url("../../assets/img/lineup/bodycare/massage-gel/cta-bg.webp");
  background-size: cover;
  background-position: center;
}

.massage-cta__inner {
  width: min(900px, 90%);
  margin: auto;
  text-align: center;
  padding: 60px 30px;
  border-radius: 32px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 20px 50px rgba(0, 82, 159, 0.08);
}

.massage-cta__label {
  margin-bottom: 16px;
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.massage-cta h2 {
  margin: 0 0 24px;
  color: #222;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
}

.massage-cta__text {
  max-width: 720px;
  margin: 0 auto 36px;
  color: #333;
  font-size: 16px;
  line-height: 2;
}

.massage-cta__buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
}

.massage-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 320px;
  padding: 18px 20px;
  border-radius: 12px;
  text-decoration: none;
  font-size: 16px;
  font-weight: 700;
  transition: 0.3s;
}

.massage-cta__btn--primary {
  background: #00529f;
  color: #fff;
}

.massage-cta__btn--primary:hover {
  background: #003f7c;
}

.massage-cta__btn--secondary {
  background: #fff;
  color: #00529f;
  border: 1px solid #00529f;
}

.massage-cta__btn--secondary:hover {
  background: #f5f9ff;
}

@media (max-width: 768px) {
  .massage-cta {
    padding: 80px 0;
  }

  .massage-cta__inner {
    width: min(100% - 40px, 1200px);
    padding: 50px 24px;
  }

  .massage-cta h2 {
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 700;
  }

  .massage-cta__text {
    font-size: 15px;
    line-height: 1.9;
  }

  .massage-cta__buttons {
    flex-direction: column;
  }

  .massage-cta__btn {
    width: 100%;
    min-width: auto;
  }
}

/* /lineup/bodycare/moisturizing/ */
/* FV */
.moisture-fv {
  position: relative;
  overflow: hidden;
  padding: 140px 0 100px;
  background: linear-gradient(135deg, #f7fbff 0%, #ffffff 45%, #fffaf6 100%);
}

.moisture-fv::after {
  content: "MOISTURE";
  position: absolute;
  right: -20px;
  bottom: 20px;
  font-size: clamp(80px, 13vw, 180px);
  font-weight: 800;
  color: rgba(0, 82, 159, 0.04);
  line-height: 1;
}

.moisture-fv__inner {
  width: min(1200px, 90%);
  margin: auto;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 70px;
  align-items: center;
}

.moisture-fv__label {
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  margin-bottom: 20px;
}

.moisture-fv__title {
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 24px;
  color: #1f2f3f;
}

.moisture-fv__lead {
  line-height: 2;
  color: #556270;
  margin-bottom: 30px;
}

.moisture-fv__buttons {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

.moisture-fv__btn {
  padding: 16px 28px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
}

.moisture-fv__btn--primary {
  background: #00529f;
  color: #fff;
}

.moisture-fv__btn--secondary {
  background: #fff;
  color: #00529f;
  border: 1px solid #00529f;
}

.moisture-fv__visual {
  position: relative;
}

.moisture-fv__visual img {
  width: 100%;
  display: block;
  border-radius: 32px;
  aspect-ratio: 5/4;
  object-fit: cover;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12);
}

.moisture-fv__features {
  display: grid;
  gap: 12px;
  margin-bottom: 36px;
}

.moisture-fv__feature {
  display: flex;
  align-items: center;
  gap: 12px;
}

.moisture-fv__feature span {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #00529f;
  position: relative;
  flex-shrink: 0;
}

.moisture-fv__feature span::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 5px;
  width: 6px;
  height: 10px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
}

.moisture-fv__feature p {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #2d3b47;
}

@media (max-width: 900px) {
  .moisture-fv__inner {
    grid-template-columns: 1fr;
  }

  .moisture-fv__feature p {
    font-size: 14px;
    line-height: 1.7;
  }
}

/* WHY BODY MOISTURE */
.moisture-market {
  padding: 120px 0;
  background: #fff;
}

.moisture-market__inner {
  width: min(1200px, 90%);
  margin: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.moisture-market__visual {
  overflow: hidden;
  border-radius: 32px;
}

.moisture-market__visual img {
  width: 100%;
  display: block;
  aspect-ratio: 4/5;
  object-fit: cover;
}

.moisture-market__label {
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  margin-bottom: 16px;
}

.moisture-market h2 {
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 24px;
  color: #222;
}

.moisture-market__lead {
  color: #555;
  line-height: 2;
  margin-bottom: 40px;
}

.moisture-market__grid {
  display: grid;
  gap: 16px;
}

.moisture-market-card {
  padding: 24px;
  border-radius: 20px;
  background: #f8fbff;
  border: 1px solid rgba(0, 82, 159, 0.08);
}

.moisture-market-card h3 {
  margin-bottom: 10px;
  font-size: 20px;
  color: #222;
}

.moisture-market-card p {
  margin: 0;
  line-height: 1.8;
  color: #666;
}

@media (max-width: 900px) {
  .moisture-market {
    padding: 80px 0;
  }

  .moisture-market__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

/* BODY MOISTURE BRAND */
.moisture-brand {
  padding: 120px 0;
  background: #f8fbff;
}

.moisture-brand__inner {
  width: min(1200px, 90%);
  margin: auto;
}

.moisture-brand__visual {
  max-width: 1100px;
  margin: 0 auto 40px;
  overflow: hidden;
  border-radius: 32px;
}

.moisture-brand__visual img {
  width: 100%;
  display: block;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.moisture-brand__heading {
  text-align: center;
  max-width: 900px;
  margin: 0 auto 60px;
}

.moisture-brand__label {
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  margin-bottom: 16px;
}

.moisture-brand__heading h2 {
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 24px;
  color: #222;
}

.moisture-brand__heading p {
  line-height: 2;
  color: #666;
}

.moisture-brand__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.moisture-brand-card {
  background: #fff;
  padding: 38px;
  border-radius: 24px;
  border: 1px solid rgba(0, 82, 159, 0.08);
  transition: 0.3s;
}

.moisture-brand-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06);
}

.moisture-brand-card span {
  display: block;
  margin-bottom: 12px;
  color: #00529f;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.moisture-brand-card h3 {
  margin-bottom: 14px;
  font-size: 24px;
  color: #222;
}

.moisture-brand-card p {
  margin: 0;
  line-height: 1.9;
  color: #666;
}

@media (max-width: 768px) {
  .moisture-brand {
    padding: 80px 0;
  }

  .moisture-brand__visual {
    border-radius: 24px;
    margin-bottom: 30px;
  }

  .moisture-brand__visual img {
    aspect-ratio: 4 / 3;
  }

  .moisture-brand__grid {
    grid-template-columns: 1fr;
  }

  .moisture-brand__heading {
    margin-bottom: 40px;
  }

  .moisture-brand-card {
    padding: 28px;
  }
}

/* CONTINUOUS USE BRAND */
.moisture-continuous {
  position: relative;
  overflow: hidden;
  padding: 120px 0;
  background: linear-gradient(135deg, #ffffff 0%, #f7fbff 48%, #fff8f3 100%);
}

.moisture-continuous::after {
  content: "DAILY CARE";
  position: absolute;
  right: -24px;
  bottom: 20px;
  font-size: clamp(72px, 12vw, 160px);
  font-weight: 800;
  letter-spacing: 0.06em;
  color: rgba(0, 82, 159, 0.04);
  line-height: 1;
  pointer-events: none;
}

.moisture-continuous__inner {
  position: relative;
  z-index: 1;
  width: min(1200px, 90%);
  margin: auto;
}

.moisture-continuous__head {
  margin-bottom: 60px;
}

.moisture-continuous__label {
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  margin-bottom: 16px;
}

.moisture-continuous__head h2 {
  margin-bottom: 24px;
  color: #1f2f3f;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
}

.moisture-continuous__head p {
  color: #556270;
  line-height: 2;
}

.moisture-continuous__body {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 70px;
  align-items: stretch;
}

.moisture-continuous__visual {
  overflow: hidden;
  border-radius: 32px;
  box-shadow: 0 24px 60px rgba(37, 62, 84, 0.12);
}

.moisture-continuous__visual img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  aspect-ratio: 4 / 5;
}

.moisture-continuous__list {
  display: grid;
  gap: 18px;
}

.moisture-continuous-item {
  position: relative;
  padding: 30px 34px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 82, 159, 0.1);
  box-shadow: 0 16px 36px rgba(37, 62, 84, 0.07);
  transition: 0.25s ease;
}

.moisture-continuous-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 28px;
  bottom: 28px;
  width: 4px;
  border-radius: 999px;
  background: #00529f;
}

.moisture-continuous-item:hover {
  transform: translateX(4px);
  box-shadow: 0 22px 46px rgba(37, 62, 84, 0.1);
}

.moisture-continuous-item span {
  display: block;
  margin-bottom: 10px;
  color: #00529f;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.moisture-continuous-item h3 {
  margin-bottom: 12px;
  color: #253746;
  font-size: 22px;
  line-height: 1.5;
}

.moisture-continuous-item p {
  margin: 0;
  color: #5a6670;
  font-size: 14px;
  line-height: 1.9;
}

@media (max-width: 900px) {
  .moisture-continuous {
    padding: 80px 0;
  }

  .moisture-continuous__head {
    margin-bottom: 42px;
  }

  .moisture-continuous__body {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .moisture-continuous__visual img {
    aspect-ratio: 16 / 10;
  }
}

@media (max-width: 600px) {
  .moisture-continuous {
    padding: 64px 0;
  }

  .moisture-continuous__visual {
    border-radius: 24px;
  }

  .moisture-continuous-item {
    padding: 26px 26px;
    border-radius: 22px;
  }

  .moisture-continuous-item h3 {
    font-size: 19px;
  }
}

/* PRODUCT PLANNING */
.moisture-planning {
  padding: 120px 0;
  background: #fff;
}

.moisture-planning__inner {
  width: min(1200px, 90%);
  margin: auto;
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 80px;
}

.moisture-planning__head {
  position: sticky;
  top: 120px;
  height: max-content;
}

.moisture-planning__label {
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  margin-bottom: 16px;
}

.moisture-planning__head h2 {
  font-size: clamp(30px, 4vw, 34px);
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 24px;
  color: #222;
}

.moisture-planning__head p {
  line-height: 2;
  color: #666;
}

.moisture-planning__content {
  display: grid;
  gap: 40px;
}

.moisture-product {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 36px;
  align-items: center;
}

.moisture-product__image {
  overflow: hidden;
  border-radius: 24px;
}

.moisture-product__image img {
  width: 100%;
  display: block;
  aspect-ratio: 1/1;
  object-fit: cover;
}

.moisture-product__text span {
  display: block;
  margin-bottom: 12px;
  color: #00529f;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.moisture-product__text h3 {
  font-size: 30px;
  margin-bottom: 18px;
  color: #222;
}

.moisture-product__text p {
  line-height: 2;
  color: #666;
}

@media (max-width: 900px) {
  .moisture-planning {
    padding: 80px 0;
  }

  .moisture-planning__inner {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .moisture-planning__head {
    position: static;
  }

  .moisture-product {
    grid-template-columns: 1fr;
  }

  .moisture-product__text h3 {
    font-size: 24px;
  }
}

/* CONSULTATION */
.moisture-consultation {
  padding: 120px 0;
  background: #f8fbff;
}

.moisture-consultation__inner {
  width: min(1200px, 90%);
  margin: auto;
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 80px;
  align-items: start;
}

.moisture-consultation__image {
  position: sticky;
  top: 120px;
  overflow: hidden;
  border-radius: 32px;
}

.moisture-consultation__image img {
  width: 100%;
  display: block;
  aspect-ratio: 4/5;
  object-fit: cover;
}

.moisture-consultation__label {
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  margin-bottom: 16px;
}

.moisture-consultation__content h2 {
  font-size: clamp(30px, 4vw, 34px);
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 24px;
  color: #222;
}

.moisture-consultation__lead {
  line-height: 2;
  color: #666;
  margin-bottom: 40px;
}

.moisture-consultation__list {
  display: grid;
  gap: 16px;
}

.moisture-consultation-item {
  padding: 24px 28px;
  background: #fff;
  border-radius: 20px;
  border: 1px solid rgba(0, 82, 159, 0.08);
}

.moisture-consultation-item h3 {
  font-size: 20px;
  margin-bottom: 10px;
  color: #222;
}

.moisture-consultation-item p {
  margin: 0;
  line-height: 1.8;
  color: #666;
}

@media (max-width: 900px) {
  .moisture-consultation {
    padding: 80px 0;
  }

  .moisture-consultation__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .moisture-consultation__image {
    position: static;
  }
}

/* WHY QBI WORLD */
.moisture-strength {
  padding: 120px 0;
  background: #fff;
}

.moisture-strength__inner {
  width: min(1200px, 90%);
  margin: auto;
}

.moisture-strength__head {
  max-width: 850px;
  margin: 0 auto 60px;
  text-align: center;
}

.moisture-strength__label {
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  margin-bottom: 16px;
}

.moisture-strength__head h2 {
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 24px;
  color: #222;
}

.moisture-strength__head p {
  color: #666;
  line-height: 2;
}

.moisture-strength__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.moisture-strength-card {
  padding: 40px;
  background: #f8fbff;
  border-radius: 24px;
  border: 1px solid rgba(0, 82, 159, 0.08);
}

.moisture-strength-card span {
  display: block;
  margin-bottom: 12px;
  color: #00529f;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.moisture-strength-card h3 {
  margin-bottom: 16px;
  font-size: 24px;
  color: #222;
}

.moisture-strength-card p {
  margin: 0;
  line-height: 1.9;
  color: #666;
}

@media (max-width: 768px) {
  .moisture-strength {
    padding: 80px 0;
  }

  .moisture-strength__grid {
    grid-template-columns: 1fr;
  }

  .moisture-strength-card {
    padding: 30px;
  }
}

/* CTA */
.moisture-cta {
  position: relative;
  overflow: hidden;
  padding: 120px 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.15)),
    url("../../assets/img/lineup/bodycare/moisturizing/cta-bg.webp");
  background-size: cover;
  background-position: center;
}

.moisture-cta__inner {
  width: min(900px, 90%);
  margin: auto;
  text-align: center;
  padding: 60px 40px;
  border-radius: 32px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 20px 50px rgba(0, 82, 159, 0.08);
}

.moisture-cta__label {
  margin-bottom: 16px;
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.moisture-cta h2 {
  margin-bottom: 24px;
  color: #1f2f3f;
  font-size: clamp(30px, 4vw, 34px);
  font-weight: 700;
  line-height: 1.5;
}

.moisture-cta__text {
  max-width: 700px;
  margin: 0 auto 40px;
  color: #4e5c69;
  line-height: 2;
}

.moisture-cta__buttons {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.moisture-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 280px;
  padding: 18px 32px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  transition: 0.3s;
}

.moisture-cta__btn--primary {
  background: #00529f;
  color: #fff;
}

.moisture-cta__btn--primary:hover {
  transform: translateY(-3px);
}

.moisture-cta__btn--secondary {
  background: rgba(255, 255, 255, 0.85);
  color: #00529f;
  border: 1px solid rgba(0, 82, 159, 0.15);
}

.moisture-cta__btn--secondary:hover {
  background: #fff;
}

@media (max-width: 768px) {
  .moisture-cta {
    padding: 80px 0;
  }

  .moisture-cta__inner {
    padding: 50px 24px;
  }

  .moisture-cta__btn {
    width: 100%;
    min-width: auto;
  }
}

/* /lineup/bodycare/salon-bodycare/ */
/* FV */
.salonbody-fv {
  position: relative;
  overflow: hidden;
  padding: 140px 0 100px;
  background:
    radial-gradient(
      circle at 15% 15%,
      rgba(226, 236, 250, 0.9) 0,
      rgba(226, 236, 250, 0) 35%
    ),
    linear-gradient(135deg, #f7fbff 0%, #ffffff 55%, #f8fbff 100%);
}

.salonbody-fv__inner {
  width: min(1200px, 90%);
  margin: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: center;
}

.salonbody-fv__label {
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  margin-bottom: 20px;
}

.salonbody-fv__title {
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 24px;
  color: #1f2f3f;
}

.salonbody-fv__lead {
  color: #4e5d68;
  line-height: 2;
  margin-bottom: 28px;
}

.salonbody-fv__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.salonbody-fv__btn {
  padding: 16px 28px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
}

.salonbody-fv__btn--primary {
  background: #00529f;
  color: #fff;
}

.salonbody-fv__btn--secondary {
  background: #fff;
  color: #00529f;
  border: 1px solid #00529f;
}

.salonbody-fv__visual {
  position: relative;
}

.salonbody-fv__image {
  overflow: hidden;
  border-radius: 32px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.12);
}

.salonbody-fv__image img {
  width: 100%;
  display: block;
  aspect-ratio: 5 / 4;
  object-fit: cover;
}

.salonbody-fv__card {
  position: absolute;
  padding: 18px 20px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.salonbody-fv__card span {
  display: block;
  color: #00529f;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 6px;
}

.salonbody-fv__card--top {
  top: 30px;
  right: -20px;
}

.salonbody-fv__card--bottom {
  left: -20px;
  bottom: 30px;
}

.salonbody-fv__features {
  display: grid;
  gap: 12px;
  margin-bottom: 36px;
}

.salonbody-fv__feature {
  display: flex;
  align-items: center;
  gap: 12px;
}

.salonbody-fv__feature span {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #00529f;
  position: relative;
  flex-shrink: 0;
}

.salonbody-fv__feature span::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 5px;
  width: 6px;
  height: 10px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
}

.salonbody-fv__feature p {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #2d3b47;
}

@media (max-width: 900px) {
  .salonbody-fv__inner {
    grid-template-columns: 1fr;
  }

  .salonbody-fv__card {
    position: static;
    margin-top: 12px;
  }

  .salonbody-fv__feature p {
    font-size: 14px;
    line-height: 1.7;
  }
}

/* WHY SALON BODY CARE */
.salonbody-why {
  padding: 110px 0;
  background: #fff;
}

.salonbody-why__inner {
  width: min(1200px, 90%);
  margin: auto;
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 80px;
}

.salonbody-why__head {
  position: sticky;
  top: 120px;
  align-self: start;
}

.salonbody-why__label {
  margin-bottom: 16px;
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.salonbody-why__head h2 {
  margin-bottom: 24px;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
  color: #1f2f3f;
}

.salonbody-why__head p {
  margin-bottom: 32px;
  color: #556270;
  line-height: 2;
}

.salonbody-why__message {
  padding: 26px;
  border-radius: 20px;
  background: #f7fbff;
  border-left: 4px solid #00529f;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.8;
  color: #1f2f3f;
}

.salonbody-why__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}

.salonbody-why-card {
  padding: 36px;
  border-radius: 24px;
  background: #fff;
  border: 1px solid rgba(0, 82, 159, 0.08);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05);
  transition: 0.3s;
}

.salonbody-why-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.08);
}

.salonbody-why-card span {
  display: inline-block;
  margin-bottom: 14px;
  color: #00529f;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.salonbody-why-card h3 {
  margin-bottom: 14px;
  font-size: 22px;
  line-height: 1.5;
  color: #253746;
}

.salonbody-why-card p {
  color: #5a6670;
  line-height: 1.9;
}

@media (max-width: 900px) {
  .salonbody-why {
    padding: 80px 0;
  }

  .salonbody-why__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .salonbody-why__head {
    position: static;
  }
}

@media (max-width: 600px) {
  .salonbody-why__grid {
    grid-template-columns: 1fr;
  }

  .salonbody-why-card {
    padding: 28px;
  }

  .salonbody-why-card h3 {
    font-size: 20px;
  }

  .salonbody-why__message {
    font-size: 18px;
    padding: 22px;
  }
}

/* SALON BUSINESS */
.salonbody-business {
  padding: 120px 0;
  background: #f7fbff;
}

.salonbody-business__inner {
  width: min(1200px, 90%);
  margin: auto;
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 70px;
  align-items: center;
}

.salonbody-business__label {
  margin-bottom: 16px;
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.salonbody-business__content h2 {
  margin-bottom: 24px;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
  color: #1f2f3f;
}

.salonbody-business__lead {
  margin-bottom: 40px;
  line-height: 2;
  color: #556270;
}

.salonbody-business__points {
  display: grid;
  gap: 24px;
}

.salonbody-business__point {
  display: flex;
  gap: 18px;
}

.salonbody-business__point span {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #00529f;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
}

.salonbody-business__point h3 {
  margin-bottom: 8px;
  color: #253746;
  font-size: 20px;
}

.salonbody-business__point p {
  color: #5a6670;
  line-height: 1.8;
}

.salonbody-business__visual {
  position: relative;
}

.salonbody-business__visual img {
  width: 100%;
  display: block;
  border-radius: 32px;
  aspect-ratio: 5 / 6;
  object-fit: cover;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.12);
}

.salonbody-business__message {
  position: absolute;
  left: 30px;
  bottom: 30px;
  padding: 24px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  max-width: 320px;
}

.salonbody-business__message span {
  display: block;
  margin-bottom: 8px;
  color: #00529f;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.salonbody-business__message p {
  margin: 0;
  font-weight: 700;
  line-height: 1.8;
  color: #253746;
}

@media (max-width: 900px) {
  .salonbody-business {
    padding: 80px 0;
  }

  .salonbody-business__inner {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .salonbody-business__point {
    gap: 14px;
  }

  .salonbody-business__point span {
    width: 36px;
    height: 36px;
    font-size: 11px;
  }

  .salonbody-business__point h3 {
    font-size: 18px;
  }
}

/* PRODUCT PLANNING */
.salonbody-planning {
  padding: 120px 0;
  background: #fff;
}

.salonbody-planning__inner {
  width: min(1200px, 90%);
  margin: auto;
}

.salonbody-planning__head {
  max-width: 800px;
  margin: 0 auto 60px;
  text-align: center;
}

.salonbody-planning__label {
  margin-bottom: 16px;
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.salonbody-planning__head h2 {
  margin-bottom: 24px;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
  color: #1f2f3f;
}

.salonbody-planning__head p {
  color: #556270;
  line-height: 2;
}

.salonbody-planning__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}

.salonbody-planning-card {
  overflow: hidden;
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
  transition: 0.3s;
}

.salonbody-planning-card:hover {
  transform: translateY(-6px);
}

.salonbody-planning-card img {
  width: 100%;
  display: block;
  aspect-ratio: 16/10;
  object-fit: cover;
}

.salonbody-planning-card__content {
  padding: 30px;
}

.salonbody-planning-card span {
  display: inline-block;
  margin-bottom: 12px;
  color: #00529f;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.salonbody-planning-card h3 {
  margin-bottom: 14px;
  font-size: 24px;
  color: #253746;
}

.salonbody-planning-card p {
  color: #5a6670;
  line-height: 1.9;
}

@media (max-width: 768px) {
  .salonbody-planning {
    padding: 80px 0;
  }

  .salonbody-planning__grid {
    grid-template-columns: 1fr;
  }
}

/* SALON CONSULTATION */
.salonbody-consultation {
  padding: 120px 0;
  background: #f7fbff;
}

.salonbody-consultation__inner {
  width: min(1200px, 90%);
  margin: auto;
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 70px;
  align-items: start;
}

.salonbody-consultation__visual {
  position: sticky;
  top: 120px;
  overflow: hidden;
  border-radius: 32px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.12);
}

.salonbody-consultation__visual img {
  width: 100%;
  display: block;
  aspect-ratio: 5 / 4;
  object-fit: cover;
}

.salonbody-consultation__label {
  margin-bottom: 16px;
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.salonbody-consultation__content h2 {
  margin-bottom: 22px;
  font-size: clamp(30px, 4vw, 34px);
  font-weight: 700;
  line-height: 1.5;
  color: #1f2f3f;
}

.salonbody-consultation__lead {
  margin-bottom: 34px;
  color: #556270;
  line-height: 2;
}

.salonbody-consultation__list {
  display: grid;
  gap: 14px;
}

.salonbody-consultation-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 20px 22px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
}

.salonbody-consultation-item span {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #00529f;
  position: relative;
}

.salonbody-consultation-item span::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 5px;
  width: 6px;
  height: 10px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
}

.salonbody-consultation-item p {
  margin: 0;
  font-weight: 600;
  color: #2d3b47;
  line-height: 1.8;
}

@media (max-width: 900px) {
  .salonbody-consultation {
    padding: 80px 0;
  }

  .salonbody-consultation__inner {
    grid-template-columns: 1fr;
  }

  .salonbody-consultation__visual {
    position: static;
  }
}

@media (max-width: 600px) {
  .salonbody-consultation-item {
    padding: 18px;
  }
}

/* WHY QBI WORLD */
.salonbody-strength {
  padding: 120px 0;
  background: #fff;
}

.salonbody-strength__inner {
  width: min(1200px, 90%);
  margin: auto;
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 80px;
}

.salonbody-strength__message {
  position: sticky;
  top: 120px;
  align-self: start;
}

.salonbody-strength__label {
  margin-bottom: 16px;
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.salonbody-strength__message h2 {
  margin-bottom: 24px;
  font-size: clamp(26px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
  color: #1f2f3f;
}

.salonbody-strength__message > p {
  margin-bottom: 32px;
  color: #556270;
  line-height: 2;
}

.salonbody-strength__box {
  padding: 28px;
  border-radius: 24px;
  background: #f7fbff;
  border-left: 4px solid #00529f;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.8;
  color: #1f2f3f;
}

.salonbody-strength__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}

.salonbody-strength-item {
  padding: 36px;
  border-radius: 24px;
  background: #fff;
  border: 1px solid rgba(0, 82, 159, 0.08);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05);
  transition: 0.3s;
}

.salonbody-strength-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.08);
}

.salonbody-strength-item span {
  display: inline-block;
  margin-bottom: 14px;
  color: #00529f;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.salonbody-strength-item h3 {
  margin-bottom: 14px;
  font-size: 22px;
  line-height: 1.5;
  color: #253746;
}

.salonbody-strength-item p {
  color: #5a6670;
  line-height: 1.9;
}

@media (max-width: 900px) {
  .salonbody-strength {
    padding: 80px 0;
  }

  .salonbody-strength__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .salonbody-strength__message {
    position: static;
  }
}

@media (max-width: 600px) {
  .salonbody-strength__list {
    grid-template-columns: 1fr;
  }

  .salonbody-strength-item {
    padding: 28px;
  }

  .salonbody-strength-item h3 {
    font-size: 20px;
  }

  .salonbody-strength__box {
    padding: 22px;
    font-size: 18px;
  }
}

/* RELATED BODY CARE OEM */
.salonbody-related {
  padding: 110px 0;
  background: #fff;
}

.salonbody-related__inner {
  width: min(1200px, 90%);
  margin: auto;
}

.salonbody-related__head {
  max-width: 820px;
  margin: 0 auto 56px;
  text-align: center;
}

.salonbody-related__label {
  margin-bottom: 16px;
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.salonbody-related__head h2 {
  margin-bottom: 22px;
  color: #1f2f3f;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
}

.salonbody-related__head p {
  color: #556270;
  line-height: 2;
}

.salonbody-related__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.salonbody-related-card {
  display: block;
  overflow: hidden;
  border-radius: 24px;
  background: #fff;
  text-decoration: none;
  border: 1px solid rgba(0, 82, 159, 0.08);
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.06);
  transition: 0.3s;
}

.salonbody-related-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.1);
}

.salonbody-related-card img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.salonbody-related-card__body {
  padding: 24px;
}

.salonbody-related-card span {
  display: inline-block;
  margin-bottom: 10px;
  color: #00529f;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.salonbody-related-card h3 {
  margin-bottom: 12px;
  color: #253746;
  font-size: 19px;
  line-height: 1.5;
}

.salonbody-related-card p {
  margin-bottom: 16px;
  color: #5a6670;
  font-size: 14px;
  line-height: 1.8;
}

.salonbody-related-card em {
  color: #00529f;
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
}

@media (max-width: 1000px) {
  .salonbody-related__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .salonbody-related {
    padding: 80px 0;
  }

  .salonbody-related__head {
    text-align: left;
    margin-bottom: 38px;
  }

  .salonbody-related__grid {
    grid-template-columns: 1fr;
  }

  .salonbody-related-card__body {
    padding: 22px;
  }
}

/* CTA */
.salonbody-cta {
  position: relative;
  overflow: hidden;
  padding: 120px 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.1)),
    url("../../assets/img/lineup/bodycare/salon-bodycare/cta-bg.webp");
  background-size: cover;
  background-position: center;
}

.salonbody-cta__inner {
  width: min(900px, 90%);
  margin: auto;
  text-align: center;
  padding: 60px 30px;
  border-radius: 32px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 20px 50px rgba(0, 82, 159, 0.08);
}

.salonbody-cta__label {
  margin-bottom: 16px;
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.salonbody-cta h2 {
  margin-bottom: 24px;
  color: #222;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
}

.salonbody-cta__text {
  max-width: 700px;
  margin: 0 auto 36px;
  color: #333;
  line-height: 2;
}

.salonbody-cta__buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
}

.salonbody-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 300px;
  padding: 18px 32px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 700;
  transition: 0.3s;
}

.salonbody-cta__btn--primary {
  background: #00529f;
  color: #fff;
}

.salonbody-cta__btn--primary:hover {
  background: #003f7c;
}

.salonbody-cta__btn--secondary {
  background: #fff;
  color: #00529f;
  border: 1px solid #00529f;
}

.salonbody-cta__btn--secondary:hover {
  background: #f5f9ff;
}

@media (max-width: 768px) {
  .salonbody-cta {
    padding: 80px 0;
  }

  .salonbody-cta__inner {
    padding: 50px 24px;
  }

  .salonbody-cta__buttons {
    flex-direction: column;
  }

  .salonbody-cta__btn {
    width: 100%;
    min-width: auto;
  }
}

/* lineup/haircare/damage-care/ */
/* DAMAGE FV */
.damage-fv {
  position: relative;
  overflow: hidden;
  min-height: 760px;
  padding: 160px 0 90px;
  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0) 45%,
      rgba(255, 255, 255, 0.12) 70%,
      rgba(255, 255, 255, 0.25) 100%
    ),
    url("../../assets/img/lineup/haircare/damage-care/fv.webp");
  background-size: cover;
  background-position: center;
}

.damage-fv__inner {
  width: min(1200px, 90%);
  min-height: 510px;
  margin: auto;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.damage-fv__content {
  width: min(800px, 100%);
  padding: 25px;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 32px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.06);
}

.damage-fv__label {
  margin-bottom: 18px;
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.45);
}

.damage-fv__title {
  margin: 0;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: 0.04em;
  color: #333333;
}

.damage-fv__lead {
  margin-top: 24px;
  color: #ffffff;
  font-size: 16px;
  line-height: 2;
  letter-spacing: 0.04em;
  color: #333333;
}

.damage-fv__buttons {
  margin-top: 28px;
}

.damage-fv__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 280px;
  padding: 17px 30px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  text-decoration: none;
  transition: 0.3s ease;
}

.damage-fv__btn--primary {
  color: #fff;
  background: #00529f;
  box-shadow: 0 16px 34px rgba(0, 82, 159, 0.22);
}

.damage-fv__btn--primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 42px rgba(0, 82, 159, 0.28);
  opacity: 0.92;
}

@media (max-width: 900px) {
  .damage-fv {
    min-height: auto;
    padding: 390px 0 70px;
    background:
      linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.03) 0%,
        rgba(255, 255, 255, 0.06) 38%,
        rgba(255, 255, 255, 0.88) 68%,
        #fff 100%
      ),
      url("../../assets/img/lineup/haircare/damage-care/fv.webp");
    background-size: cover;
    background-position: 42% top;
  }

  .damage-fv__inner {
    width: min(92%, 560px);
    min-height: auto;
    display: block;
  }

  .damage-fv__content {
    width: 100%;
  }

  .damage-fv__lead {
    margin-top: 22px;
    font-size: 15px;
    line-height: 1.9;
  }

  .damage-fv__btn {
    width: 100%;
    min-width: auto;
  }
}

@media (max-width: 520px) {
  .damage-fv {
    padding-top: 330px;
    background-position: 38% top;
  }

  .damage-fv__label {
    font-size: 12px;
  }

  .damage-fv__title {
    line-height: 1.38;
    color: #333333;
  }

  .damage-fv__lead {
    color: #333333;
  }
}

/* WHY DAMAGE CARE */
.damage-reason {
  padding: 120px 0;
  background: #fff;
}

.damage-reason__inner {
  width: min(1200px, 90%);
  margin: auto;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 80px;
}

.damage-reason__heading {
  position: sticky;
  top: 120px;
  align-self: start;
}

.damage-reason__label {
  margin-bottom: 14px;
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.damage-reason__heading h2 {
  margin-bottom: 24px;
  color: #1c2539;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.4;
}

.damage-reason__heading p {
  color: #64748b;
  line-height: 2;
}

.damage-reason__content {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.damage-reason-card {
  padding: 40px;
  border-radius: 28px;
  background: #f8fbff;
  border: 1px solid rgba(0, 82, 159, 0.08);
  transition: 0.3s;
}

.damage-reason-card:hover {
  transform: translateY(-4px);
}

.damage-reason-card span {
  display: inline-block;
  margin-bottom: 12px;
  color: #00529f;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.damage-reason-card h3 {
  margin-bottom: 14px;
  color: #1c2539;
  font-size: 24px;
}

.damage-reason-card p {
  color: #64748b;
  line-height: 1.9;
}

@media (max-width: 900px) {
  .damage-reason__inner {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .damage-reason__heading {
    position: static;
  }

  .damage-reason-card {
    padding: 30px;
  }

  .damage-reason-card h3 {
    font-size: 20px;
  }
}

/* PRODUCT PLANNING */
.damage-planning {
  padding: 120px 0;
  background: #f8fbff;
}

.damage-planning__inner {
  width: min(1200px, 90%);
  margin: auto;
}

.damage-planning__head {
  max-width: 760px;
  margin: 0 auto 60px;
  text-align: center;
}

.damage-planning__label {
  margin-bottom: 14px;
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.damage-planning__head h2 {
  margin-bottom: 20px;
  color: #1c2539;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
}

.damage-planning__head p {
  color: #64748b;
  line-height: 2;
}

.damage-planning__visual {
  margin-bottom: 60px;
  overflow: hidden;
  border-radius: 32px;
}

.damage-planning__visual img {
  width: 100%;
  display: block;
}

.damage-planning__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.damage-planning-card {
  padding: 30px;
  border-radius: 24px;
  background: #fff;
  border: 1px solid rgba(0, 82, 159, 0.08);
}

.damage-planning-card span {
  display: inline-block;
  margin-bottom: 10px;
  color: #00529f;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.damage-planning-card h3 {
  margin-bottom: 12px;
  color: #1c2539;
  font-size: 22px;
}

.damage-planning-card p {
  color: #64748b;
  line-height: 1.8;
}

@media (max-width: 900px) {
  .damage-planning__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .damage-planning__grid {
    grid-template-columns: 1fr;
  }
}

/* BRAND CONCEPT */
.damage-concept {
  padding: 120px 0;
  background: #fff;
}

.damage-concept__inner {
  width: min(1200px, 90%);
  margin: auto;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 70px;
  align-items: center;
}

.damage-concept__visual {
  position: sticky;
  top: 120px;
  overflow: hidden;
  border-radius: 32px;
}

.damage-concept__visual img {
  width: 100%;
  display: block;
}

.damage-concept__label {
  margin-bottom: 14px;
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.damage-concept__content h2 {
  margin-bottom: 22px;
  color: #1c2539;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.4;
}

.damage-concept__lead {
  margin-bottom: 40px;
  color: #64748b;
  line-height: 2;
}

.damage-concept__list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.damage-concept-item {
  padding: 28px;
  border-radius: 24px;
  background: #f8fbff;
  border: 1px solid rgba(0, 82, 159, 0.08);
}

.damage-concept-item span {
  display: inline-block;
  margin-bottom: 10px;
  color: #00529f;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.damage-concept-item h3 {
  margin-bottom: 10px;
  color: #1c2539;
  font-size: 22px;
}

.damage-concept-item p {
  color: #64748b;
  line-height: 1.8;
}

@media (max-width: 900px) {
  .damage-concept__inner {
    grid-template-columns: 1fr;
  }

  .damage-concept__visual {
    position: static;
  }
}

/* OEM DEVELOPMENT FLOW */
.damage-flow {
  padding: 120px 0;
  background: #f8fbff;
}

.damage-flow__inner {
  width: min(1100px, 90%);
  margin: auto;
}

.damage-flow__head {
  max-width: 760px;
  margin: 0 auto 80px;
  text-align: center;
}

.damage-flow__label {
  margin-bottom: 14px;
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.damage-flow__head h2 {
  margin-bottom: 20px;
  color: #1c2539;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
}

.damage-flow__head p {
  color: #64748b;
  line-height: 2;
}

.damage-flow__timeline {
  position: relative;
}

.damage-flow__timeline::before {
  content: "";
  position: absolute;
  left: 40px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgba(0, 82, 159, 0.12);
}

.damage-flow-item {
  position: relative;
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 40px;
  margin-bottom: 50px;
}

.damage-flow-item:last-child {
  margin-bottom: 0;
}

.damage-flow-item__num {
  position: relative;
  z-index: 2;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #00529f;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
}

.damage-flow-item__content {
  padding: 30px;
  background: #fff;
  border-radius: 24px;
  border: 1px solid rgba(0, 82, 159, 0.08);
}

.damage-flow-item__content span {
  display: inline-block;
  margin-bottom: 10px;
  color: #00529f;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.damage-flow-item__content h3 {
  margin-bottom: 12px;
  color: #1c2539;
  font-size: 24px;
}

.damage-flow-item__content p {
  color: #64748b;
  line-height: 1.9;
}

@media (max-width: 768px) {
  .damage-flow__timeline::before {
    left: 30px;
  }

  .damage-flow-item {
    grid-template-columns: 60px 1fr;
    gap: 20px;
  }

  .damage-flow-item__num {
    width: 60px;
    height: 60px;
    font-size: 18px;
  }

  .damage-flow-item__content {
    padding: 24px;
  }
}

/* WHY QBI WORLD */
.damage-strength {
  padding: 120px 0;
  background: #fff;
}

.damage-strength__inner {
  width: min(1200px, 90%);
  margin: auto;
}

.damage-strength__head {
  max-width: 780px;
  margin-bottom: 64px;
}

.damage-strength__label {
  margin-bottom: 14px;
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.damage-strength__head h2 {
  margin-bottom: 22px;
  color: #1c2539;
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.4;
}

.damage-strength__head p {
  color: #64748b;
  line-height: 2;
}

.damage-strength__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-radius: 32px;
  overflow: hidden;
  border: 1px solid rgba(0, 82, 159, 0.1);
  background: #fff;
}

.damage-strength-card {
  position: relative;
  min-height: 280px;
  padding: 46px;
  background: #fff;
  border-right: 1px solid rgba(0, 82, 159, 0.1);
  border-bottom: 1px solid rgba(0, 82, 159, 0.1);
}

.damage-strength-card:nth-child(2n) {
  border-right: none;
}

.damage-strength-card:nth-child(n + 3) {
  border-bottom: none;
}

.damage-strength-card__icon {
  width: 54px;
  height: 54px;
  margin-bottom: 26px;
  border-radius: 50%;
  background: rgba(0, 82, 159, 0.08);
  color: #00529f;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.damage-strength-card span {
  display: inline-block;
  margin-bottom: 10px;
  color: #00529f;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.damage-strength-card h3 {
  margin-bottom: 14px;
  color: #1c2539;
  font-size: 24px;
  line-height: 1.5;
}

.damage-strength-card p {
  color: #64748b;
  line-height: 1.9;
}

.damage-strength-card::after {
  content: "";
  position: absolute;
  right: 34px;
  bottom: 28px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: rgba(0, 82, 159, 0.04);
  pointer-events: none;
}

@media (max-width: 900px) {
  .damage-strength {
    padding: 90px 0;
  }

  .damage-strength__head {
    margin-bottom: 46px;
  }

  .damage-strength__grid {
    grid-template-columns: 1fr;
  }

  .damage-strength-card {
    min-height: auto;
    padding: 34px 28px;
    border-right: none;
    border-bottom: 1px solid rgba(0, 82, 159, 0.1);
  }

  .damage-strength-card:nth-child(n + 3) {
    border-bottom: 1px solid rgba(0, 82, 159, 0.1);
  }

  .damage-strength-card:last-child {
    border-bottom: none;
  }

  .damage-strength-card h3 {
    font-size: 21px;
  }
}

/* RELATED HAIRCARE */
.haircare-related {
  padding: 120px 0;
  background: #f8fafc;
}

.haircare-related__inner {
  width: min(1200px, 90%);
  margin: auto;
}

.haircare-related__head {
  margin-bottom: 50px;
}

.haircare-related__label {
  margin-bottom: 16px;
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.haircare-related__head h2 {
  color: #1f3144;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
}

.haircare-related__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}

.haircare-related-card {
  display: block;
  text-decoration: none;
  overflow: hidden;
  border-radius: 28px;
  background: #fff;
  transition: 0.35s;
}

.haircare-related-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 25px 50px rgba(0, 82, 159, 0.1);
}

.haircare-related-card__image {
  overflow: hidden;
}

.haircare-related-card__image img {
  width: 100%;
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: 0.6s;
}

.haircare-related-card:hover img {
  transform: scale(1.05);
}

.haircare-related-card__body {
  padding: 24px 28px;
}

.haircare-related-card__body span {
  display: block;
  margin-bottom: 10px;
  color: #00529f;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.haircare-related-card__body h3 {
  margin: 0;
  color: #1f3144;
  font-size: 26px;
  line-height: 1.5;
}

@media (max-width: 768px) {
  .haircare-related__grid {
    grid-template-columns: 1fr;
  }
}

/* CTA */
.damage-cta {
  position: relative;
  overflow: hidden;
  padding: 120px 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.12)),
    url("../../assets/img/lineup/haircare/damage-care/cta-bg.webp");
  background-size: cover;
  background-position: center;
}

.damage-cta__inner {
  width: min(900px, 90%);
  margin: auto;
  text-align: center;
  padding: 70px 40px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 32px;
  box-shadow: 0 20px 50px rgba(0, 82, 159, 0.08);
}

.damage-cta__label {
  margin-bottom: 16px;
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
}

.damage-cta h2 {
  margin-bottom: 24px;
  color: #1c2539;
  font-size: clamp(24px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.4;
}

.damage-cta__text {
  max-width: 720px;
  margin: 0 auto 40px;
  color: #334155;
  line-height: 2;
}

.damage-cta__buttons {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.damage-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 280px;
  padding: 18px 30px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  transition: 0.3s;
}

.damage-cta__btn--primary {
  background: #00529f;
  color: #fff;
}

.damage-cta__btn--secondary {
  background: rgba(255, 255, 255, 0.85);
  color: #1c2539;
}

.damage-cta__btn:hover {
  transform: translateY(-3px);
}

@media (max-width: 768px) {
  .damage-cta {
    padding: 90px 0;
  }

  .damage-cta__inner {
    padding: 50px 24px;
  }

  .damage-cta__btn {
    width: 100%;
    min-width: auto;
  }
}

/* /lineup/haircare/damage-care/ */
/* HAIR MIST FV */
.hairmist-fv {
  position: relative;
  overflow: hidden;
  min-height: 760px;
  padding: 170px 0 120px;
  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.92) 0%,
      rgba(255, 255, 255, 0.78) 32%,
      rgba(255, 255, 255, 0.3) 58%,
      rgba(255, 255, 255, 0.04) 100%
    ),
    url("../../assets/img/lineup/haircare/hair-mist/fv.webp");
  background-size: cover;
  background-position: center center;
}

.hairmist-fv::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 18% 35%,
    rgba(255, 255, 255, 0.72),
    transparent 38%
  );
  pointer-events: none;
}

.hairmist-fv::after {
  content: "";
  position: absolute;
  left: -180px;
  bottom: -220px;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  background: rgba(0, 82, 159, 0.05);
  pointer-events: none;
}

.hairmist-fv__inner {
  position: relative;
  z-index: 1;
  width: min(1200px, 90%);
  min-height: 470px;
  margin: auto;
  display: flex;
  align-items: center;
}

.hairmist-fv__content {
  max-width: 620px;
}

.hairmist-fv__label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.hairmist-fv__label::before {
  content: "";
  width: 42px;
  height: 1px;
  background: #00529f;
}

.hairmist-fv__title {
  margin: 0;
  color: #1a2d3d;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.hairmist-fv__lead {
  max-width: 580px;
  margin-top: 28px;
  color: #485c70;
  font-size: 16px;
  line-height: 2;
}

.hairmist-fv__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 42px;
}

.hairmist-fv__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 260px;
  padding: 16px 28px;
  border-radius: 999px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  transition: 0.3s;
}

.hairmist-fv__btn:hover {
  transform: translateY(-3px);
}

.hairmist-fv__btn--primary {
  background: #00529f;
  color: #fff;
  box-shadow: 0 15px 35px rgba(0, 82, 159, 0.25);
}

.hairmist-fv__btn--secondary {
  background: rgba(255, 255, 255, 0.82);
  color: #00529f;
  border: 1px solid rgba(0, 82, 159, 0.18);
  backdrop-filter: blur(8px);
}

@media (max-width: 900px) {
  .hairmist-fv {
    min-height: auto;
    padding: 135px 0 80px;
    background:
      linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.96) 0%,
        rgba(255, 255, 255, 0.86) 48%,
        rgba(255, 255, 255, 0.34) 100%
      ),
      url("../../assets/img/lineup/haircare/hair-mist/fv.webp");
    background-size: cover;
    background-position: 62% center;
  }

  .hairmist-fv__inner {
    min-height: 560px;
    align-items: flex-start;
  }

  .hairmist-fv__content {
    max-width: 100%;
  }

  .hairmist-fv__lead {
    font-size: 15px;
  }

  .hairmist-fv__buttons {
    flex-direction: column;
  }

  .hairmist-fv__btn {
    width: 100%;
    min-width: auto;
  }
}

@media (max-width: 520px) {
  .hairmist-fv {
    padding: 125px 0 70px;
    background-position: 66% center;
  }
  .hairmist-fv__inner {
    min-height: 520px;
  }
  .hairmist-fv__lead {
    line-height: 1.9;
  }
}

/* WHY HAIR MIST */
.hairmist-why {
  padding: 120px 0;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.hairmist-why__inner {
  width: min(1180px, 90%);
  margin: auto;
}

.hairmist-why__head {
  max-width: 820px;
  margin: 0 auto 64px;
  text-align: center;
}

.hairmist-why__label {
  margin-bottom: 18px;
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.hairmist-why h2 {
  margin: 0 0 28px;
  color: #1f3144;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.04em;
}

.hairmist-why__head p {
  margin: 0;
  color: #526776;
  font-size: 16px;
  line-height: 2;
}

.hairmist-why__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.hairmist-why-card {
  position: relative;
  min-height: 280px;
  padding: 42px 34px;
  overflow: hidden;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(0, 82, 159, 0.1);
  box-shadow: 0 20px 50px rgba(0, 82, 159, 0.06);
}

.hairmist-why-card::before {
  content: "";
  position: absolute;
  right: -70px;
  bottom: -70px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: rgba(0, 82, 159, 0.045);
}

.hairmist-why-card span {
  display: block;
  margin-bottom: 18px;
  color: #00529f;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
}

.hairmist-why-card h3 {
  margin: 0 0 18px;
  color: #1f3144;
  font-size: 24px;
  line-height: 1.55;
}

.hairmist-why-card p {
  position: relative;
  z-index: 1;
  margin: 0;
  color: #5b6c7d;
  font-size: 15px;
  line-height: 1.9;
}

@media (max-width: 900px) {
  .hairmist-why {
    padding: 90px 0;
  }

  .hairmist-why__head {
    margin-bottom: 44px;
    text-align: left;
  }

  .hairmist-why__grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .hairmist-why-card {
    min-height: auto;
    padding: 32px 26px;
    border-radius: 24px;
  }

  .hairmist-why-card h3 {
    font-size: 22px;
  }
}

/* PRODUCT PLANNING */
.hairmist-planning {
  padding: 140px 0;
  background: #fff;
}

.hairmist-planning__inner {
  width: min(1200px, 90%);
  margin: auto;
}

.hairmist-planning__head {
  max-width: 760px;
  margin: 0 auto 70px;
  text-align: center;
}

.hairmist-planning__label {
  margin-bottom: 18px;
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.hairmist-planning h2 {
  margin: 0 0 24px;
  color: #1f3144;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.45;
}

.hairmist-planning__head p {
  color: #5b6c7d;
  line-height: 2;
}

.hairmist-planning__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}

.hairmist-planning-card {
  padding: 42px;
  border-radius: 30px;
  background: #f8fafc;
  border: 1px solid rgba(0, 82, 159, 0.08);
  transition: 0.3s;
}

.hairmist-planning-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0, 82, 159, 0.08);
}

.hairmist-planning-card span {
  display: block;
  margin-bottom: 14px;
  color: #00529f;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
}

.hairmist-planning-card h3 {
  margin: 0 0 16px;
  color: #1f3144;
  font-size: 26px;
  line-height: 1.5;
}

.hairmist-planning-card p {
  margin: 0;
  color: #5b6c7d;
  line-height: 1.9;
}

@media (max-width: 768px) {
  .hairmist-planning {
    padding: 90px 0;
  }

  .hairmist-planning__head {
    text-align: left;
    margin-bottom: 40px;
  }

  .hairmist-planning__grid {
    grid-template-columns: 1fr;
  }

  .hairmist-planning-card {
    padding: 32px 28px;
  }

  .hairmist-planning-card h3 {
    font-size: 22px;
  }
}

/* BRAND CONCEPT */
.hairmist-concept {
  padding: 140px 0;
  background: #f8fafc;
}

.hairmist-concept__inner {
  width: min(1320px, 90%);
  margin: auto;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 90px;
}

.hairmist-concept__image {
  height: 100%;
}

.hairmist-concept__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 40px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.08);
}

.hairmist-concept__label {
  margin-bottom: 18px;
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.hairmist-concept h2 {
  margin: 0 0 28px;
  color: #1f3144;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.45;
}

.hairmist-concept__lead {
  margin-bottom: 42px;
  color: #526776;
  line-height: 2;
}

.hairmist-concept__list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(0, 82, 159, 0.12);
}

.hairmist-concept__item {
  padding: 28px 0;
  border-bottom: 1px solid rgba(0, 82, 159, 0.12);
}

.hairmist-concept__item span {
  display: block;
  margin-bottom: 10px;
  color: #00529f;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
}

.hairmist-concept__item h3 {
  margin: 0 0 10px;
  color: #1f3144;
  font-size: 24px;
}

.hairmist-concept__item p {
  margin: 0;
  color: #5b6c7d;
  line-height: 1.9;
}

@media (max-width: 900px) {
  .hairmist-concept {
    padding: 90px 0;
  }

  .hairmist-concept__inner {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .hairmist-concept__image img {
    aspect-ratio: 4 / 3;
    border-radius: 30px;
  }
}

/* CONSULTATION */
.hairmist-consultation {
  padding: 140px 0;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.hairmist-consultation__inner {
  width: min(1320px, 90%);
  margin: auto;
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 90px;
  align-items: start;
}

.hairmist-consultation__image {
  position: sticky;
  top: 120px;
}

.hairmist-consultation__image img {
  width: 100%;
  display: block;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 36px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.08);
}

.hairmist-consultation__label {
  margin-bottom: 18px;
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.hairmist-consultation h2 {
  margin: 0 0 28px;
  color: #1f3144;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.04em;
}

.hairmist-consultation__lead {
  margin: 0 0 50px;
  color: #526776;
  line-height: 2;
}

.hairmist-consultation__list {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.hairmist-consultation__item {
  padding: 30px 34px;
  border-radius: 26px;
  background: #fff;
  border: 1px solid rgba(0, 82, 159, 0.08);
  box-shadow: 0 16px 38px rgba(0, 82, 159, 0.055);
}

.hairmist-consultation__item h3 {
  margin: 0 0 12px;
  color: #1f3144;
  font-size: 22px;
  line-height: 1.5;
}

.hairmist-consultation__item p {
  margin: 0;
  color: #5b6c7d;
  line-height: 1.9;
}

@media (max-width: 900px) {
  .hairmist-consultation {
    padding: 90px 0;
  }

  .hairmist-consultation__inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .hairmist-consultation__image {
    position: static;
  }

  .hairmist-consultation__image img {
    aspect-ratio: 4 / 3;
    border-radius: 30px;
  }

  .hairmist-consultation__lead {
    margin-bottom: 36px;
  }

  .hairmist-consultation__item {
    padding: 26px 24px;
  }

  .hairmist-consultation__item h3 {
    font-size: 20px;
  }
}

/* WHY QBI WORLD */
.hairmist-strength {
  padding: 140px 0;
  background: #fff;
}

.hairmist-strength__inner {
  width: min(1100px, 90%);
  margin: auto;
}

.hairmist-strength__head {
  max-width: 760px;
  margin: 0 auto 80px;
  text-align: center;
}

.hairmist-strength__label {
  margin-bottom: 18px;
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.hairmist-strength h2 {
  margin: 0 0 28px;
  color: #1f3144;
  font-size: clamp(26px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.45;
}

.hairmist-strength__head p {
  color: #5b6c7d;
  line-height: 2;
}

.hairmist-strength__timeline {
  position: relative;
  max-width: 900px;
  margin: auto;
}

.hairmist-strength__timeline::before {
  content: "";
  position: absolute;
  left: 32px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(0, 82, 159, 0.15);
}

.hairmist-step {
  position: relative;
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 40px;
  padding-bottom: 60px;
}

.hairmist-step:last-child {
  padding-bottom: 0;
}

.hairmist-step span {
  position: relative;
  z-index: 2;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #00529f;
  color: #fff;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 700;
}

.hairmist-step small {
  display: block;
  margin-bottom: 10px;
  color: #00529f;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.hairmist-step h3 {
  margin: 0 0 14px;
  color: #1f3144;
  font-size: 28px;
}

.hairmist-step p {
  margin: 0;
  color: #5b6c7d;
  line-height: 2;
}

@media (max-width: 768px) {
  .hairmist-strength {
    padding: 90px 0;
  }

  .hairmist-step {
    gap: 24px;
  }

  .hairmist-step h3 {
    font-size: 22px;
  }
}

/* CTA */
.hairmist-cta {
  position: relative;
  overflow: hidden;
  padding: 140px 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.15)),
    url("../../assets/img/lineup/haircare/hair-mist/cta-bg.webp");
  background-size: cover;
  background-position: center;
}

.hairmist-cta__inner {
  width: min(900px, 90%);
  margin: auto;
  text-align: center;
  padding: 70px 40px;
  border-radius: 36px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: 0 20px 60px rgba(0, 82, 159, 0.08);
}

.hairmist-cta__label {
  margin-bottom: 18px;
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.hairmist-cta h2 {
  margin: 0 0 28px;
  color: #1f3144;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.45;
}

.hairmist-cta__text {
  margin: 0 auto;
  max-width: 700px;
  color: #42576b;
  line-height: 2;
}

.hairmist-cta__buttons {
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 42px;
}

.hairmist-cta__btn {
  min-width: 240px;
  padding: 16px 28px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  transition: 0.3s;
}

.hairmist-cta__btn:hover {
  transform: translateY(-3px);
}

.hairmist-cta__btn--primary {
  background: #00529f;
  color: #fff;
}

.hairmist-cta__btn--secondary {
  background: rgba(255, 255, 255, 0.85);
  color: #00529f;
  border: 1px solid rgba(0, 82, 159, 0.15);
}

@media (max-width: 768px) {
  .hairmist-cta {
    padding: 90px 0;
  }

  .hairmist-cta__inner {
    padding: 50px 24px;
  }

  .hairmist-cta__buttons {
    flex-direction: column;
  }

  .hairmist-cta__btn {
    width: 100%;
    min-width: auto;
  }
}

/* /lineup/haircare/hair-oil/ */
/* FV */
.hairoil-fv {
  position: relative;
  overflow: hidden;
  padding: 160px 0 110px;
  background: linear-gradient(180deg, #f8fbff 0%, #eef5fb 100%);
}

.hairoil-fv::before {
  content: "";
  position: absolute;
  right: -140px;
  bottom: -140px;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: rgba(0, 82, 159, 0.05);
}

.hairoil-fv::after {
  content: "HAIR OIL";
  position: absolute;
  z-index: 2;
  right: -20px;
  bottom: 20px;
  color: rgba(0, 82, 159, 0.045);
  font-size: clamp(72px, 10vw, 150px);
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1;
  pointer-events: none;
}

.hairoil-fv__inner {
  position: relative;
  z-index: 3;
  width: min(1200px, 90%);
  margin: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.hairoil-fv__label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.15em;
}

.hairoil-fv__label::before {
  content: "";
  width: 38px;
  height: 1px;
  background: #00529f;
}

.hairoil-fv__title {
  margin-bottom: 32px;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.3;
  color: #1c2539;
}

.hairoil-fv__lead {
  max-width: 620px;
  margin-bottom: 42px;
  font-size: 17px;
  line-height: 2;
  color: #4d5d74;
}

.hairoil-fv__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.hairoil-fv__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 270px;
  height: 56px;
  border-radius: 999px;
  text-decoration: none;
  font-size: 15px;
  font-weight: 700;
  transition: 0.3s;
}

.hairoil-fv__btn--primary {
  background: #00529f;
  color: #fff;
  box-shadow: 0 12px 30px rgba(0, 82, 159, 0.18);
}

.hairoil-fv__btn--primary:hover {
  transform: translateY(-3px);
}

.hairoil-fv__btn--secondary {
  background: #fff;
  color: #00529f;
  border: 1px solid rgba(0, 82, 159, 0.15);
}

.hairoil-fv__btn--secondary:hover {
  transform: translateY(-3px);
}

.hairoil-fv__image {
  position: relative;
}

.hairoil-fv__image img {
  width: 100%;
  display: block;
  border-radius: 34px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.08);
}

@media (max-width: 1024px) {
  .hairoil-fv {
    padding: 140px 0 90px;
  }

  .hairoil-fv__inner {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .hairoil-fv__image {
    order: -1;
  }
}

@media (max-width: 767px) {
  .hairoil-fv {
    padding: 120px 0 70px;
  }

  .hairoil-fv::before {
    width: 320px;
    height: 320px;
    right: -120px;
    bottom: -120px;
  }

  .hairoil-fv::after {
    font-size: 64px;
    right: -10px;
    bottom: 20px;
  }

  .hairoil-fv__lead {
    font-size: 15px;
  }

  .hairoil-fv__buttons {
    flex-direction: column;
  }

  .hairoil-fv__btn {
    width: 100%;
    min-width: auto;
  }
}

/* WHY HAIR OIL */
.hairoil-reason {
  padding: 120px 0;
  background: #fff;
}

.hairoil-reason__inner {
  width: min(1200px, 90%);
  margin: auto;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 80px;
  align-items: center;
}

.hairoil-reason__image {
  overflow: hidden;
  border-radius: 34px;
}

.hairoil-reason__image img {
  width: 100%;
  display: block;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.hairoil-reason__label {
  margin-bottom: 18px;
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.15em;
}

.hairoil-reason__content h2 {
  margin-bottom: 28px;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.35;
  color: #1c2539;
}

.hairoil-reason__content p {
  margin-bottom: 18px;
  font-size: 16px;
  line-height: 2;
  color: #4d5d74;
}

.hairoil-reason__cards {
  width: min(1200px, 90%);
  margin: 70px auto 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.hairoil-reason-card {
  padding: 32px 28px;
  border-radius: 24px;
  background: #f8fbff;
  border: 1px solid rgba(0, 82, 159, 0.08);
}

.hairoil-reason-card span {
  display: block;
  margin-bottom: 14px;
  color: #00529f;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.hairoil-reason-card h3 {
  margin-bottom: 14px;
  font-size: 20px;
  line-height: 1.5;
  color: #1c2539;
}

.hairoil-reason-card p {
  font-size: 15px;
  line-height: 1.8;
  color: #5c6675;
}

@media (max-width: 1024px) {
  .hairoil-reason__inner {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .hairoil-reason__cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .hairoil-reason {
    padding: 80px 0;
  }

  .hairoil-reason__content h2 {
    font-size: 30px;
  }

  .hairoil-reason__cards {
    grid-template-columns: 1fr;
    margin-top: 45px;
  }

  .hairoil-reason-card {
    padding: 28px 24px;
  }
}

/* PRODUCT PLANNING */
.hairoil-planning {
  padding: 120px 0;
  background: #f8fbff;
}

.hairoil-planning__inner {
  width: min(1200px, 90%);
  margin: auto;
}

.hairoil-planning__head {
  max-width: 1000px;
  margin: 0 auto 70px;
  text-align: center;
}

.hairoil-planning__label {
  margin-bottom: 18px;
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.15em;
}

.hairoil-planning__head h2 {
  margin-bottom: 24px;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.4;
  color: #1c2539;
}

.hairoil-planning__head p {
  line-height: 2;
  color: #5c6675;
}

.hairoil-planning__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}

.hairoil-plan-card {
  padding: 36px;
  background: #fff;
  border-radius: 28px;
  border: 1px solid rgba(0, 82, 159, 0.08);
}

.hairoil-plan-card span {
  display: block;
  margin-bottom: 12px;
  color: #00529f;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.hairoil-plan-card h3 {
  margin-bottom: 14px;
  font-size: 28px;
  line-height: 1.4;
  color: #1c2539;
}

.hairoil-plan-card p {
  line-height: 1.9;
  color: #5c6675;
}

.hairoil-planning__visual {
  grid-column: 1 / -1;
  overflow: hidden;
  border-radius: 36px;
}

.hairoil-planning__visual img {
  width: 100%;
  display: block;
}

@media (max-width: 767px) {
  .hairoil-planning {
    padding: 80px 0;
  }

  .hairoil-planning__grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .hairoil-planning__visual {
    order: -1;
  }

  .hairoil-plan-card {
    padding: 28px 24px;
  }

  .hairoil-plan-card h3 {
    font-size: 24px;
  }
}

/* BRAND DESIGN */
.hairoil-design {
  padding: 120px 0;
  background: #fff;
}

.hairoil-design__inner {
  width: min(1200px, 90%);
  margin: auto;
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 80px;
  align-items: center;
}

.hairoil-design__label {
  margin-bottom: 18px;
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.15em;
}

.hairoil-design__content h2 {
  margin-bottom: 28px;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.35;
  color: #1c2539;
}

.hairoil-design__content p {
  margin-bottom: 18px;
  font-size: 16px;
  line-height: 2;
  color: #4d5d74;
}

.hairoil-design__image {
  overflow: hidden;
  border-radius: 34px;
}

.hairoil-design__image img {
  width: 100%;
  display: block;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.hairoil-design__points {
  width: min(1200px, 90%);
  margin: 70px auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.hairoil-design-card {
  padding: 36px 32px;
  border-radius: 26px;
  background: #f8fbff;
  border: 1px solid rgba(0, 82, 159, 0.08);
}

.hairoil-design-card span {
  display: block;
  margin-bottom: 14px;
  color: #00529f;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.hairoil-design-card h3 {
  margin-bottom: 14px;
  font-size: 22px;
  line-height: 1.5;
  color: #1c2539;
}

.hairoil-design-card p {
  font-size: 15px;
  line-height: 1.9;
  color: #5c6675;
}

@media (max-width: 1024px) {
  .hairoil-design__inner {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .hairoil-design__points {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .hairoil-design {
    padding: 80px 0;
  }

  .hairoil-design-card {
    padding: 28px 24px;
  }
}

/* CONSULTATION */
.hairoil-consultation {
  padding: 120px 0;
  background: #f8fbff;
}

.hairoil-consultation__inner {
  width: min(1200px, 90%);
  margin: auto;
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 70px;
  align-items: start;
}

.hairoil-consultation__image {
  position: sticky;
  top: 120px;
  overflow: hidden;
  border-radius: 32px;
}

.hairoil-consultation__image img {
  width: 100%;
  display: block;
}

.hairoil-consultation__label {
  margin-bottom: 18px;
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.15em;
}

.hairoil-consultation__content h2 {
  margin-bottom: 24px;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.4;
  color: #1c2539;
}

.hairoil-consultation__lead {
  margin-bottom: 40px;
  line-height: 2;
  color: #5c6675;
}

.hairoil-consultation__list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.hairoil-consultation-item {
  padding: 28px;
  background: #fff;
  border-radius: 24px;
  border: 1px solid rgba(0, 82, 159, 0.08);
}

.hairoil-consultation-item h3 {
  margin-bottom: 10px;
  font-size: 22px;
  line-height: 1.5;
  color: #1c2539;
}

.hairoil-consultation-item p {
  line-height: 1.8;
  color: #5c6675;
}

@media (max-width: 1024px) {
  .hairoil-consultation__inner {
    grid-template-columns: 1fr;
  }

  .hairoil-consultation__image {
    position: static;
  }
}

@media (max-width: 767px) {
  .hairoil-consultation {
    padding: 80px 0;
  }

  .hairoil-consultation-item {
    padding: 24px;
  }

  .hairoil-consultation-item h3 {
    font-size: 20px;
  }
}

/* WHY QBI WORLD */
.hairoil-strength {
  padding: 120px 0;
  background: #fff;
}

.hairoil-strength__inner {
  width: min(1100px, 90%);
  margin: auto;
}

.hairoil-strength__head {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 80px;
}

.hairoil-strength__label {
  margin-bottom: 18px;
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.15em;
}

.hairoil-strength__head h2 {
  margin-bottom: 24px;
  font-size: clamp(26px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.4;
  color: #1c2539;
}

.hairoil-strength__head p {
  line-height: 2;
  color: #5c6675;
}

.hairoil-strength__timeline {
  position: relative;
}

.hairoil-strength__timeline::before {
  content: "";
  position: absolute;
  left: 32px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgba(0, 82, 159, 0.12);
}

.hairoil-strength-item {
  position: relative;
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 36px;
  margin-bottom: 50px;
}

.hairoil-strength-item:last-child {
  margin-bottom: 0;
}

.hairoil-strength-item__number {
  position: relative;
  z-index: 2;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #00529f;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hairoil-strength-item__content {
  padding: 28px 32px;
  background: #f8fbff;
  border-radius: 24px;
  border: 1px solid rgba(0, 82, 159, 0.08);
}

.hairoil-strength-item__content h3 {
  margin-bottom: 12px;
  font-size: 24px;
  color: #1c2539;
}

.hairoil-strength-item__content p {
  line-height: 1.9;
  color: #5c6675;
}

@media (max-width: 767px) {
  .hairoil-strength {
    padding: 80px 0;
  }

  .hairoil-strength-item {
    grid-template-columns: 50px 1fr;
    gap: 20px;
  }

  .hairoil-strength__timeline::before {
    left: 24px;
  }

  .hairoil-strength-item__number {
    width: 50px;
    height: 50px;
    font-size: 14px;
  }

  .hairoil-strength-item__content {
    padding: 24px;
  }

  .hairoil-strength-item__content h3 {
    font-size: 20px;
  }
}

/* CTA */
.hairoil-cta {
  position: relative;
  overflow: hidden;
  padding: 120px 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.15)),
    url("../../assets/img/lineup/haircare/hair-oil/cta-bg.webp");
  background-size: cover;
  background-position: center;
}

.hairoil-cta__inner {
  width: min(900px, 90%);
  margin: auto;
  text-align: center;
  padding: 70px 40px;
  border-radius: 32px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: 0 20px 50px rgba(0, 82, 159, 0.08);
}

.hairoil-cta__label {
  margin-bottom: 18px;
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.15em;
}

.hairoil-cta h2 {
  margin-bottom: 24px;
  font-size: clamp(26px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.4;
  color: #1c2539;
}

.hairoil-cta__text {
  margin-bottom: 40px;
  font-size: 16px;
  line-height: 2;
  color: #3f4c61;
}

.hairoil-cta__buttons {
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}

.hairoil-cta__btn {
  min-width: 280px;
  padding: 18px 32px;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  transition: 0.3s;
}

.hairoil-cta__btn--primary {
  background: #00529f;
  color: #fff;
}

.hairoil-cta__btn--primary:hover {
  transform: translateY(-3px);
}

.hairoil-cta__btn--secondary {
  background: rgba(255, 255, 255, 0.85);
  color: #00529f;
  border: 1px solid rgba(0, 82, 159, 0.15);
}

.hairoil-cta__btn--secondary:hover {
  background: #fff;
}

@media (max-width: 767px) {
  .hairoil-cta {
    padding: 80px 0;
  }

  .hairoil-cta__inner {
    padding: 50px 24px;
  }

  .hairoil-cta__btn {
    width: 100%;
    min-width: auto;
  }
}

/* lineup/haircare/mens/ */
/* MEN'S HAIRCARE FV */
.menshair-fv {
  position: relative;
  overflow: hidden;
  padding: 170px 0 110px;
  background:
    radial-gradient(circle at 88% 18%, rgba(0, 82, 159, 0.08), transparent 34%),
    linear-gradient(135deg, #ffffff 0%, #f7fafc 52%, #eef4f8 100%);
}

.menshair-fv::before {
  content: "";
  position: absolute;
  right: -160px;
  bottom: -180px;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  background: rgba(0, 82, 159, 0.05);
}

.menshair-fv__inner {
  position: relative;
  z-index: 1;
  width: min(1200px, 90%);
  margin: auto;
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: 72px;
  align-items: center;
}

.menshair-fv__label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.menshair-fv__label::before {
  content: "";
  width: 42px;
  height: 1px;
  background: #00529f;
}

.menshair-fv__title {
  margin: 0;
  color: #1a2d3d;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.04em;
}

.menshair-fv__lead {
  margin-top: 28px;
  color: #4f6275;
  font-size: 16px;
  line-height: 2;
}

.menshair-fv__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 42px;
}

.menshair-fv__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 270px;
  padding: 16px 28px;
  border-radius: 999px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  transition: 0.3s;
}

.menshair-fv__btn:hover {
  transform: translateY(-3px);
}

.menshair-fv__btn--primary {
  background: #00529f;
  color: #fff;
  box-shadow: 0 15px 35px rgba(0, 82, 159, 0.25);
}

.menshair-fv__btn--secondary {
  background: #fff;
  color: #00529f;
  border: 1px solid rgba(0, 82, 159, 0.22);
}

.menshair-fv__visual {
  position: relative;
}

.menshair-fv__image {
  overflow: hidden;
  border-radius: 42px;
  box-shadow: 0 32px 76px rgba(0, 0, 0, 0.12);
}

.menshair-fv__image img {
  width: 100%;
  display: block;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center bottom;
}

.menshair-fv__points {
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 24px;
}

.menshair-fv__points li {
  position: relative;
  padding-left: 28px;
  color: #2f4458;
  font-size: 15px;
  font-weight: 600;
}

.menshair-fv__points li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: #00529f;
  font-weight: 700;
}

@media (max-width: 768px) {
  .menshair-fv__points {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

@media (max-width: 900px) {
  .menshair-fv {
    padding: 140px 0 80px;
  }

  .menshair-fv__inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .menshair-fv__visual {
    order: -1;
  }

  .menshair-fv__image {
    border-radius: 32px;
  }

  .menshair-fv__image img {
    aspect-ratio: 4 / 4.8;
    object-position: center bottom;
  }

  .menshair-fv__buttons {
    flex-direction: column;
  }

  .menshair-fv__btn {
    width: 100%;
    min-width: auto;
  }
}

/* WHY MEN'S HAIRCARE */
.menshair-brand {
  padding: 140px 0;
  background: #fff;
}

.menshair-brand__inner {
  width: min(1320px, 90%);
  margin: auto;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 90px;
  align-items: center;
}

.menshair-brand__visual img {
  width: 100%;
  display: block;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  border-radius: 40px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.08);
}

.menshair-brand__label {
  margin-bottom: 20px;
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.menshair-brand h2 {
  margin-bottom: 34px;
  color: #1f3144;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.04em;
}

.menshair-brand__lead {
  margin-bottom: 24px;
  color: #33485d;
  font-size: 18px;
  line-height: 2;
}

.menshair-brand__content p {
  color: #5b6c7d;
  line-height: 2;
}

.menshair-brand__message {
  margin-top: 46px;
  padding-top: 28px;
  border-top: 1px solid rgba(0, 82, 159, 0.15);
}

.menshair-brand__message span {
  display: block;
  margin-bottom: 14px;
  color: #00529f;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.menshair-brand__message p {
  margin: 0;
  color: #1f3144;
  font-size: 18px;
  line-height: 1.9;
}

@media (max-width: 900px) {
  .menshair-brand {
    padding: 90px 0;
  }

  .menshair-brand__inner {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .menshair-brand__visual {
    order: -1;
  }

  .menshair-brand__lead {
    font-size: 16px;
  }
}

/* PRODUCT PLANNING */
.menshair-planning {
  padding: 140px 0;
  background: #f8fafc;
}

.menshair-planning__inner {
  width: min(1320px, 90%);
  margin: auto;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 90px;
}

.menshair-planning__visual {
  position: sticky;
  top: 120px;
  align-self: start;
}

.menshair-planning__visual img {
  width: 100%;
  display: block;
  border-radius: 40px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.08);
}

.menshair-planning__head {
  margin-bottom: 50px;
}

.menshair-planning__label {
  margin-bottom: 18px;
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.menshair-planning__head h2 {
  margin-bottom: 24px;
  color: #1f3144;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.45;
}

.menshair-planning__head p {
  color: #5b6c7d;
  line-height: 2;
}

.menshair-planning__list {
  display: flex;
  flex-direction: column;
}

.menshair-plan {
  padding: 34px 0;
  border-bottom: 1px solid rgba(0, 82, 159, 0.12);
}

.menshair-plan:first-child {
  border-top: 1px solid rgba(0, 82, 159, 0.12);
}

.menshair-plan span {
  display: block;
  margin-bottom: 10px;
  color: #00529f;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
}

.menshair-plan h3 {
  margin-bottom: 12px;
  color: #1f3144;
  font-size: 24px;
}

.menshair-plan p {
  margin: 0;
  color: #5b6c7d;
  line-height: 1.9;
}

@media (max-width: 900px) {
  .menshair-planning {
    padding: 90px 0;
  }

  .menshair-planning__inner {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .menshair-planning__visual {
    position: static;
  }

  .menshair-planning__visual img {
    aspect-ratio: 4 / 3;
  }
}

/* BRAND DESIGN */
.menshair-design {
  padding: 140px 0;
  background: #fff;
}

.menshair-design__inner {
  width: min(1320px, 90%);
  margin: auto;
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 90px;
  align-items: center;
}

.menshair-design__content {
  order: 1;
}

.menshair-design__visual {
  order: 2;
}

.menshair-design__visual img {
  width: 100%;
  display: block;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 32px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.08);
}

.menshair-design__label {
  margin-bottom: 20px;
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.menshair-design h2 {
  margin-bottom: 32px;
  color: #1f3144;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.04em;
}

.menshair-design__lead {
  margin-bottom: 44px;
  color: #4f6275;
  font-size: 16px;
  line-height: 2;
}

.menshair-design__list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(0, 82, 159, 0.14);
}

.menshair-design-item {
  padding: 28px 0;
  border-bottom: 1px solid rgba(0, 82, 159, 0.14);
}

.menshair-design-item span {
  display: block;
  margin-bottom: 10px;
  color: #00529f;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
}

.menshair-design-item h3 {
  margin-bottom: 10px;
  color: #1f3144;
  font-size: 22px;
  line-height: 1.5;
}

.menshair-design-item p {
  margin: 0;
  color: #5b6c7d;
  font-size: 15px;
  line-height: 1.9;
}

@media (max-width: 900px) {
  .menshair-design {
    padding: 90px 0;
  }

  .menshair-design__inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .menshair-design__visual {
    order: -1;
  }

  .menshair-design__visual img {
    aspect-ratio: 4 / 3;
  }

  .menshair-design__lead {
    margin-bottom: 34px;
  }
}

/* TARGET BRAND */
.menshair-target {
  padding: 140px 0;
  background: #f8fafc;
}

.menshair-target__inner {
  width: min(1320px, 90%);
  margin: auto;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 90px;
  align-items: center;
}

.menshair-target__visual img {
  width: 100%;
  display: block;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 40px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.08);
}

.menshair-target__label {
  margin-bottom: 18px;
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.menshair-target__head h2 {
  margin-bottom: 24px;
  color: #1f3144;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.45;
}

.menshair-target__head p {
  margin-bottom: 42px;
  color: #5b6c7d;
  line-height: 2;
}

.menshair-target__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.menshair-target-card {
  padding: 28px;
  background: #fff;
  border-radius: 24px;
  border: 1px solid rgba(0, 82, 159, 0.1);
  transition: 0.3s;
}

.menshair-target-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 15px 40px rgba(0, 82, 159, 0.08);
}

.menshair-target-card span {
  display: block;
  margin-bottom: 10px;
  color: #00529f;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.menshair-target-card h3 {
  margin-bottom: 12px;
  color: #1f3144;
  font-size: 22px;
}

.menshair-target-card p {
  margin: 0;
  color: #5b6c7d;
  line-height: 1.8;
}

@media (max-width: 900px) {
  .menshair-target {
    padding: 90px 0;
  }

  .menshair-target__inner {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .menshair-target__grid {
    grid-template-columns: 1fr;
  }

  .menshair-target__visual {
    order: -1;
  }

  .menshair-target__visual img {
    aspect-ratio: 4 / 3;
  }
}

/* CONSULTATION */
.menshair-consultation {
  padding: 140px 0;
  background: #fff;
}

.menshair-consultation__inner {
  width: min(1320px, 90%);
  margin: auto;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 90px;
}

.menshair-consultation__image {
  position: sticky;
  top: 120px;
  align-self: start;
}

.menshair-consultation__image img {
  width: 100%;
  display: block;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 40px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.08);
}

.menshair-consultation__label {
  margin-bottom: 18px;
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.menshair-consultation h2 {
  margin-bottom: 26px;
  color: #1f3144;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.45;
}

.menshair-consultation__lead {
  margin-bottom: 50px;
  color: #5b6c7d;
  line-height: 2;
}

.menshair-consultation__list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.menshair-consultation-item {
  padding: 32px;
  background: #f8fafc;
  border-radius: 24px;
  border: 1px solid rgba(0, 82, 159, 0.08);
}

.menshair-consultation-item h3 {
  margin-bottom: 12px;
  color: #1f3144;
  font-size: 22px;
  line-height: 1.5;
}

.menshair-consultation-item p {
  margin: 0;
  color: #5b6c7d;
  line-height: 1.9;
}

@media (max-width: 900px) {
  .menshair-consultation {
    padding: 90px 0;
  }

  .menshair-consultation__inner {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .menshair-consultation__image {
    position: static;
  }

  .menshair-consultation__image img {
    aspect-ratio: 4 / 3;
  }

  .menshair-consultation__lead {
    margin-bottom: 36px;
  }

  .menshair-consultation-item {
    padding: 24px;
  }

  .menshair-consultation-item h3 {
    font-size: 20px;
  }
}

/* WHY QBI WORLD */
.menshair-strength {
  padding: 140px 0;
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}

.menshair-strength__inner {
  width: min(1120px, 90%);
  margin: auto;
}

.menshair-strength__head {
  max-width: 780px;
  margin: 0 auto 80px;
  text-align: center;
}

.menshair-strength__label {
  margin-bottom: 18px;
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.menshair-strength__head h2 {
  margin-bottom: 28px;
  color: #1f3144;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.04em;
}

.menshair-strength__head p {
  color: #5b6c7d;
  line-height: 2;
}

.menshair-strength__timeline {
  position: relative;
  max-width: 920px;
  margin: auto;
}

.menshair-strength__timeline::before {
  content: "";
  position: absolute;
  left: 150px;
  top: 12px;
  bottom: 12px;
  width: 1px;
  background: rgba(0, 82, 159, 0.16);
}

.menshair-strength-step {
  position: relative;
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 46px;
  padding-bottom: 54px;
}

.menshair-strength-step:last-child {
  padding-bottom: 0;
}

.menshair-strength-step__mark {
  position: relative;
  z-index: 2;
  align-self: start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 22px;
  border-radius: 999px;
  background: #00529f;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  box-shadow: 0 12px 28px rgba(0, 82, 159, 0.18);
}

.menshair-strength-step__body {
  padding: 34px 38px;
  background: #fff;
  border-radius: 28px;
  border: 1px solid rgba(0, 82, 159, 0.08);
  box-shadow: 0 18px 48px rgba(0, 82, 159, 0.06);
}

.menshair-strength-step__body span {
  display: block;
  margin-bottom: 12px;
  color: #00529f;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.menshair-strength-step__body h3 {
  margin-bottom: 14px;
  color: #1f3144;
  font-size: 25px;
  line-height: 1.5;
}

.menshair-strength-step__body p {
  margin: 0;
  color: #5b6c7d;
  line-height: 1.9;
}

@media (max-width: 900px) {
  .menshair-strength {
    padding: 90px 0;
  }

  .menshair-strength__head {
    text-align: left;
    margin-bottom: 52px;
  }

  .menshair-strength__timeline::before {
    left: 20px;
  }

  .menshair-strength-step {
    grid-template-columns: 1fr;
    gap: 18px;
    padding-left: 46px;
    padding-bottom: 34px;
  }

  .menshair-strength-step__mark {
    justify-self: start;
    min-height: 38px;
    padding: 0 18px;
  }

  .menshair-strength-step__body {
    padding: 26px 24px;
    border-radius: 24px;
  }

  .menshair-strength-step__body h3 {
    font-size: 21px;
  }
}

/* CTA */
.menshair-cta {
  position: relative;
  overflow: hidden;
  padding: 140px 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.2)),
    url("../../assets/img/lineup/haircare/mens/cta-bg.webp");
  background-size: cover;
  background-position: center;
}

.menshair-cta__inner {
  width: min(900px, 90%);
  margin: auto;
  text-align: center;
  padding: 70px 40px;
  border-radius: 36px;
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 25px 60px rgba(0, 82, 159, 0.08);
}

.menshair-cta__label {
  margin-bottom: 18px;
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.menshair-cta h2 {
  margin-bottom: 26px;
  color: #000000;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.45;
}

.menshair-cta__text {
  max-width: 720px;
  margin: 0 auto 42px;
  color: #ffffff;
  line-height: 2;
}

.menshair-cta__buttons {
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}

.menshair-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 300px;
  padding: 18px 24px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  transition: 0.3s;
}

.menshair-cta__btn--primary {
  background: #00529f;
  color: #fff;
  box-shadow: 0 14px 32px rgba(0, 82, 159, 0.22);
}

.menshair-cta__btn--primary:hover {
  transform: translateY(-3px);
}

.menshair-cta__btn--secondary {
  background: rgba(255, 255, 255, 0.82);
  color: #00529f;
  border: 1px solid rgba(0, 82, 159, 0.18);
}

.menshair-cta__btn--secondary:hover {
  background: #fff;
}

@media (max-width: 768px) {
  .menshair-cta {
    padding: 100px 0;
    background-position: center;
  }

  .menshair-cta__inner {
    padding: 50px 24px;
  }

  .menshair-cta__btn {
    width: 100%;
    min-width: auto;
  }
}

/* /lineup/haircare/non-silicone/ */
/* NON SILICONE FV */
.nonsilicone-fv {
  position: relative;
  overflow: hidden;
  min-height: 760px;
  padding: 160px 0 110px;
  display: flex;
  align-items: center;
  background: #f8fafc;
}

.nonsilicone-fv__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.nonsilicone-fv__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.05) 0%,
    rgba(255, 255, 255, 0.15) 42%,
    rgba(255, 255, 255, 0.78) 62%,
    rgba(255, 255, 255, 0.92) 100%
  );
}

.nonsilicone-fv__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.nonsilicone-fv__inner {
  position: relative;
  z-index: 1;
  width: min(1200px, 90%);
  margin: auto;
  display: flex;
  justify-content: flex-end;
}

.nonsilicone-fv__content {
  width: min(560px, 100%);
  padding: 54px 48px;
  border-radius: 32px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow: 0 24px 60px rgba(0, 82, 159, 0.08);
}

.nonsilicone-fv__label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
  color: #00529f;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.nonsilicone-fv__label::before {
  content: "";
  width: 38px;
  height: 1px;
  background: #00529f;
}

.nonsilicone-fv__title {
  margin: 0;
  color: #1f3144;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.42;
  letter-spacing: 0.04em;
}

.nonsilicone-fv__lead {
  margin-top: 26px;
  color: #4f6275;
  font-size: 16px;
  line-height: 2;
}

.nonsilicone-fv__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 40px;
}

.nonsilicone-fv__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 250px;
  padding: 16px 26px;
  border-radius: 999px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  transition: 0.3s;
}

.nonsilicone-fv__btn:hover {
  transform: translateY(-3px);
}

.nonsilicone-fv__btn--primary {
  background: #00529f;
  color: #fff;
  box-shadow: 0 14px 34px rgba(0, 82, 159, 0.24);
}

.nonsilicone-fv__btn--secondary {
  background: rgba(255, 255, 255, 0.86);
  color: #00529f;
  border: 1px solid rgba(0, 82, 159, 0.18);
}

@media (max-width: 900px) {
  .nonsilicone-fv {
    min-height: auto;
    padding: 130px 0 70px;
    align-items: flex-end;
  }

  .nonsilicone-fv__bg::after {
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.08) 0%,
      rgba(255, 255, 255, 0.58) 45%,
      rgba(255, 255, 255, 0.96) 100%
    );
  }

  .nonsilicone-fv__bg img {
    object-position: 28% center;
  }

  .nonsilicone-fv__inner {
    justify-content: center;
  }

  .nonsilicone-fv__content {
    padding: 40px 26px;
    border-radius: 28px;
  }

  .nonsilicone-fv__buttons {
    flex-direction: column;
  }

  .nonsilicone-fv__btn {
    width: 100%;
    min-width: auto;
  }
}

/* WHY NON SILICONE */
.nonsilicone-why {
  padding: 140px 0;
  background: #fff;
}

.nonsilicone-why__inner {
  width: min(1320px, 90%);
  margin: auto;
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 90px;
}

.nonsilicone-why__image {
  position: sticky;
  top: 120px;
  align-self: start;
}

.nonsilicone-why__image img {
  width: 100%;
  display: block;
  border-radius: 36px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.nonsilicone-why__label {
  margin-bottom: 18px;
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.nonsilicone-why h2 {
  margin-bottom: 28px;
  color: #1f3144;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.45;
}

.nonsilicone-why__lead {
  margin-bottom: 50px;
  color: #526776;
  font-size: 17px;
  line-height: 2;
}

.nonsilicone-why__list {
  display: flex;
  flex-direction: column;
}

.nonsilicone-why-item {
  padding: 30px 0;
  border-top: 1px solid rgba(0, 82, 159, 0.12);
}

.nonsilicone-why-item:last-child {
  border-bottom: 1px solid rgba(0, 82, 159, 0.12);
}

.nonsilicone-why-item span {
  display: block;
  margin-bottom: 10px;
  color: #00529f;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
}

.nonsilicone-why-item h3 {
  margin-bottom: 12px;
  color: #1f3144;
  font-size: 24px;
}

.nonsilicone-why-item p {
  color: #5b6c7d;
  line-height: 1.9;
}

@media (max-width: 900px) {
  .nonsilicone-why {
    padding: 90px 0;
  }

  .nonsilicone-why__inner {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .nonsilicone-why__image {
    position: static;
  }

  .nonsilicone-why__image img {
    aspect-ratio: 4 / 3;
  }
}

/* TARGET BRAND */
.nonsilicone-target {
  position: relative;
  overflow: hidden;
  padding: 130px 0;
  background: linear-gradient(135deg, #f8fbff 0%, #eef5fa 55%, #ffffff 100%);
}

.nonsilicone-target::before {
  content: "";
  position: absolute;
  right: -160px;
  top: -180px;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: rgba(0, 82, 159, 0.05);
}

.nonsilicone-target__inner {
  position: relative;
  z-index: 1;
  width: min(1200px, 90%);
  margin: auto;
}

.nonsilicone-target__head {
  margin-bottom: 64px;
}

.nonsilicone-target__label {
  margin-bottom: 18px;
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.nonsilicone-target__head h2 {
  margin-bottom: 26px;
  color: #1f3144;
  font-size: clamp(26px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.04em;
}

.nonsilicone-target__head p {
  color: #526776;
  font-size: 16px;
  line-height: 2;
}

.nonsilicone-target__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.nonsilicone-target-card {
  min-height: 280px;
  padding: 34px 28px;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(0, 82, 159, 0.1);
  box-shadow: 0 18px 44px rgba(0, 82, 159, 0.06);
  transition: 0.35s;
  display: flex;
  flex-direction: column;
}

.nonsilicone-target-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 60px rgba(0, 82, 159, 0.1);
}

.nonsilicone-target-card span {
  display: block;
  margin-bottom: 18px;
  color: #00529f;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
}

.nonsilicone-target-card h3 {
  margin-bottom: 18px;
  color: #1f3144;
  font-size: 23px;
  line-height: 1.5;
}

.nonsilicone-target-card p {
  margin: 0;
  color: #5b6c7d;
  font-size: 15px;
  line-height: 1.9;
  margin-top: auto;
}

.nonsilicone-target-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.nonsilicone-target-card__tags span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(0, 82, 159, 0.08);
  color: #00529f;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
}

@media (max-width: 1100px) {
  .nonsilicone-target__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .nonsilicone-target {
    padding: 90px 0;
  }

  .nonsilicone-target__head {
    margin-bottom: 44px;
  }

  .nonsilicone-target__grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .nonsilicone-target-card {
    min-height: auto;
    padding: 30px 24px;
  }
}

/* PRODUCT PLANNING */
.nonsilicone-planning {
  padding: 140px 0;
  background: #fff;
}

.nonsilicone-planning__inner {
  width: min(1320px, 90%);
  margin: auto;
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 90px;
}

.nonsilicone-planning__image {
  position: sticky;
  top: 120px;
  align-self: start;
}

.nonsilicone-planning__image img {
  width: 100%;
  display: block;
  border-radius: 36px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
}

.nonsilicone-planning__label {
  margin-bottom: 18px;
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.nonsilicone-planning h2 {
  margin-bottom: 28px;
  color: #1f3144;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.45;
}

.nonsilicone-planning__lead {
  margin-bottom: 50px;
  color: #526776;
  font-size: 17px;
  line-height: 2;
}

.nonsilicone-planning__list {
  display: flex;
  flex-direction: column;
}

.nonsilicone-planning-item {
  padding: 32px 0;
  border-top: 1px solid rgba(0, 82, 159, 0.12);
}

.nonsilicone-planning-item:last-child {
  border-bottom: 1px solid rgba(0, 82, 159, 0.12);
}

.nonsilicone-planning-item span {
  display: block;
  margin-bottom: 10px;
  color: #00529f;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
}

.nonsilicone-planning-item h3 {
  margin-bottom: 12px;
  color: #1f3144;
  font-size: 24px;
}

.nonsilicone-planning-item p {
  color: #5b6c7d;
  line-height: 1.9;
}

@media (max-width: 900px) {
  .nonsilicone-planning {
    padding: 90px 0;
  }

  .nonsilicone-planning__inner {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .nonsilicone-planning__image {
    position: static;
  }

  .nonsilicone-planning__image img {
    aspect-ratio: 4 / 3;
  }
}

/* CONSULTATION */
.nonsilicone-consultation {
  padding: 140px 0;
  background: #f8fafc;
}

.nonsilicone-consultation__inner {
  width: min(1320px, 90%);
  margin: auto;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 90px;
}

.nonsilicone-consultation__label {
  margin-bottom: 18px;
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.nonsilicone-consultation h2 {
  margin-bottom: 28px;
  color: #1f3144;
  font-size: clamp(30px, 4vw, 34px);
  font-weight: 700;
  line-height: 1.45;
}

.nonsilicone-consultation__lead {
  margin-bottom: 50px;
  color: #526776;
  line-height: 2;
}

.nonsilicone-consultation__list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.nonsilicone-consultation-item {
  padding: 30px;
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 12px 35px rgba(0, 82, 159, 0.05);
}

.nonsilicone-consultation-item h3 {
  margin-bottom: 12px;
  color: #1f3144;
  font-size: 22px;
}

.nonsilicone-consultation-item p {
  color: #5b6c7d;
  line-height: 1.9;
}

.nonsilicone-consultation__image {
  position: sticky;
  top: 120px;
  align-self: start;
}

.nonsilicone-consultation__image img {
  width: 100%;
  display: block;
  border-radius: 36px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
}

@media (max-width: 900px) {
  .nonsilicone-consultation {
    padding: 90px 0;
  }

  .nonsilicone-consultation__inner {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .nonsilicone-consultation__image {
    position: static;
    order: -1;
  }

  .nonsilicone-consultation__image img {
    aspect-ratio: 4 / 3;
  }
}

/* WHY QBI WORLD */
.nonsilicone-strength {
  padding: 140px 0;
  background: #fff;
}

.nonsilicone-strength__inner {
  width: min(1100px, 90%);
  margin: auto;
}

.nonsilicone-strength__head {
  margin: 0 auto 80px;
  text-align: center;
}

.nonsilicone-strength__label {
  margin-bottom: 18px;
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.nonsilicone-strength__head h2 {
  margin-bottom: 28px;
  color: #1f3144;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.45;
}

.nonsilicone-strength__head p {
  color: #5b6c7d;
  line-height: 2;
}

.nonsilicone-strength__timeline {
  position: relative;
  max-width: 900px;
  margin: auto;
}

.nonsilicone-strength__timeline::before {
  content: "";
  position: absolute;
  left: 32px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(0, 82, 159, 0.15);
}

.nonsilicone-step {
  position: relative;
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 40px;
  padding-bottom: 60px;
}

.nonsilicone-step:last-child {
  padding-bottom: 0;
}

.nonsilicone-step span {
  position: relative;
  z-index: 2;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #00529f;
  color: #fff;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 700;
}

.nonsilicone-step h3 {
  margin-bottom: 14px;
  color: #1f3144;
  font-size: 28px;
}

.nonsilicone-step p {
  color: #5b6c7d;
  line-height: 2;
}

@media (max-width: 768px) {
  .nonsilicone-strength {
    padding: 90px 0;
  }

  .nonsilicone-strength__head {
    margin-bottom: 50px;
    text-align: left;
  }

  .nonsilicone-step {
    gap: 24px;
  }

  .nonsilicone-step h3 {
    font-size: 22px;
  }
}

/* CTA */
.nonsilicone-cta {
  position: relative;
  overflow: hidden;
  padding: 140px 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.2)),
    url("../../assets/img/lineup/haircare/non-silicone/cta-bg.webp");
  background-size: cover;
  background-position: center;
}

.nonsilicone-cta__inner {
  width: min(900px, 90%);
  margin: auto;
  text-align: center;
  padding: 70px 40px;
  border-radius: 36px;
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.58);
  box-shadow: 0 25px 60px rgba(0, 82, 159, 0.08);
}

.nonsilicone-cta__label {
  margin-bottom: 18px;
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.nonsilicone-cta h2 {
  margin-bottom: 26px;
  color: #1f3144;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.45;
}

.nonsilicone-cta__text {
  max-width: 760px;
  margin: 0 auto 42px;
  color: #42566a;
  line-height: 2;
}

.nonsilicone-cta__buttons {
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}

.nonsilicone-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 300px;
  padding: 18px 10px;
  border-radius: 999px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  transition: 0.3s;
}

.nonsilicone-cta__btn--primary {
  background: #00529f;
  color: #fff;
  box-shadow: 0 14px 34px rgba(0, 82, 159, 0.22);
}

.nonsilicone-cta__btn--primary:hover {
  transform: translateY(-3px);
}

.nonsilicone-cta__btn--secondary {
  background: rgba(255, 255, 255, 0.82);
  color: #00529f;
  border: 1px solid rgba(0, 82, 159, 0.18);
}

.nonsilicone-cta__btn--secondary:hover {
  background: #fff;
}

@media (max-width: 768px) {
  .nonsilicone-cta {
    padding: 100px 0;
    background-position: center;
  }

  .nonsilicone-cta__inner {
    padding: 50px 24px;
    border-radius: 28px;
  }

  .nonsilicone-cta__btn {
    width: 100%;
    min-width: auto;
  }
}

/* /lineup/haircare/organic/ */
/* ORGANIC FV */
.organic-fv {
  position: relative;
  min-height: 720px;
  padding: 140px 0 90px;
  overflow: hidden;
  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.96) 0%,
      rgba(255, 255, 255, 0.88) 34%,
      rgba(255, 255, 255, 0.34) 58%,
      rgba(255, 255, 255, 0.08) 100%
    ),
    url("../../assets/img/lineup/haircare/organic/fv.webp");
  background-size: cover;
  background-position: center center;
}

.organic-fv__inner {
  width: min(1200px, 90%);
  margin: auto;
}

.organic-fv__content {
  width: min(560px, 100%);
  padding: 46px 42px;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow: 0 24px 60px rgba(0, 82, 159, 0.08);
}

.organic-fv__label {
  display: inline-block;
  margin-bottom: 18px;
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.organic-fv__title {
  margin: 0;
  color: #1d2b38;
  font-size: clamp(30px, 4vw, 40px);
  line-height: 1.35;
  letter-spacing: 0.04em;
  font-weight: 700;
}

.organic-fv__lead {
  margin-top: 24px;
  color: #4d5d68;
  font-size: 16px;
  line-height: 2;
}

.organic-fv__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}

.organic-fv__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 26px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: 0.3s ease;
}

.organic-fv__btn--primary {
  background: #00529f;
  color: #fff;
  box-shadow: 0 12px 28px rgba(0, 82, 159, 0.22);
}

.organic-fv__btn--secondary {
  background: rgba(255, 255, 255, 0.8);
  color: #00529f;
  border: 1px solid rgba(0, 82, 159, 0.2);
}

.organic-fv__btn:hover {
  transform: translateY(-3px);
  opacity: 0.88;
}

.organic-fv__features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 20px;
  margin-top: 28px;
  list-style: none;
  padding: 0;
  margin-left: 0;
}

.organic-fv__features li {
  position: relative;
  padding-left: 28px;
  font-weight: 600;
  color: #344556;
}

.organic-fv__features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: #00529f;
  font-weight: 700;
}

.organic-fv__features,
.organic-fv__features li {
  list-style: none;
}

@media screen and (max-width: 900px) {
  .organic-fv {
    min-height: auto;
    padding: 120px 0 70px;
    background:
      linear-gradient(rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.82)),
      url("../../assets/img/lineup/haircare/organic/fv.webp");
    background-size: cover;
    background-position: 62% center;
  }

  .organic-fv__content {
    padding: 34px 26px;
    border-radius: 24px;
  }

  .organic-fv__lead {
    font-size: 15px;
  }

  .organic-fv__buttons {
    flex-direction: column;
  }

  .organic-fv__btn {
    width: 100%;
  }
}

@media screen and (max-width: 520px) {
  .organic-fv {
    padding: 105px 0 56px;
    background-position: 66% center;
  }

  .organic-fv__content {
    padding: 30px 22px;
  }
}

/* BRAND CONCEPT */
.organic-concept {
  padding: 120px 0;
  background: #fff;
}

.organic-concept__inner {
  width: min(1200px, 90%);
  margin: auto;
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 70px;
  align-items: start;
}

.organic-concept__visual {
  position: sticky;
  top: 120px;
  overflow: hidden;
  border-radius: 32px;
}

.organic-concept__visual img {
  width: 100%;
  display: block;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.organic-concept__label {
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.organic-concept__content h2 {
  margin: 16px 0 24px;
  font-size: clamp(30px, 4vw, 36px);
  font-weight: 700;
  line-height: 1.4;
  color: #1d2b38;
}

.organic-concept__lead {
  margin-bottom: 40px;
  line-height: 2;
  color: #55626d;
}

.organic-concept__list {
  display: grid;
  gap: 22px;
}

.organic-concept-card {
  padding: 30px;
  border-radius: 24px;
  background: #f8fbff;
  border: 1px solid rgba(0, 82, 159, 0.08);
}

.organic-concept-card span {
  display: inline-block;
  margin-bottom: 10px;
  color: #00529f;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.organic-concept-card h3 {
  margin-bottom: 12px;
  font-size: 22px;
  color: #1d2b38;
}

.organic-concept-card p {
  line-height: 1.9;
  color: #5c6872;
}

@media (max-width: 960px) {
  .organic-concept__inner {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .organic-concept__visual {
    position: static;
  }

  .organic-concept__visual img {
    aspect-ratio: 16 / 10;
  }
}

/* PRODUCT PLANNING */
.organic-planning {
  padding: 120px 0;
  background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
}

.organic-planning__inner {
  width: min(1200px, 90%);
  margin: auto;
}

.organic-planning__head {
  margin: 0 auto 54px;
  text-align: center;
}

.organic-planning__label {
  margin-bottom: 16px;
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.organic-planning__head h2 {
  margin: 0 0 22px;
  color: #1d2b38;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.04em;
}

.organic-planning__head p {
  margin: 0;
  color: #56636d;
  font-size: 16px;
  line-height: 2;
}

.organic-planning__visual {
  overflow: hidden;
  margin-bottom: 34px;
  border-radius: 34px;
  box-shadow: 0 24px 60px rgba(0, 82, 159, 0.08);
}

.organic-planning__visual img {
  width: 100%;
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.organic-planning__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}

.organic-planning-card {
  padding: 26px 22px;
  border-radius: 22px;
  background: #fff;
  border: 1px solid rgba(0, 82, 159, 0.09);
  box-shadow: 0 14px 34px rgba(0, 82, 159, 0.04);
}

.organic-planning-card span {
  display: block;
  margin-bottom: 12px;
  color: #00529f;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.organic-planning-card h3 {
  margin: 0 0 12px;
  color: #1d2b38;
  font-size: 18px;
  line-height: 1.55;
}

.organic-planning-card p {
  margin: 0;
  color: #5c6872;
  font-size: 14px;
  line-height: 1.9;
}

@media screen and (max-width: 1100px) {
  .organic-planning__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media screen and (max-width: 760px) {
  .organic-planning {
    padding: 80px 0;
  }

  .organic-planning__head {
    margin-bottom: 36px;
    text-align: left;
  }

  .organic-planning__visual {
    border-radius: 24px;
  }

  .organic-planning__visual img {
    aspect-ratio: 4 / 3;
  }

  .organic-planning__grid {
    grid-template-columns: 1fr;
  }

  .organic-planning-card {
    padding: 24px 22px;
  }
}

/* CONSULTATION */
.organic-consultation {
  padding: 120px 0;
  background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
}

.organic-consultation__inner {
  width: min(1200px, 90%);
  margin: auto;
}

.organic-consultation__head {
  margin: 0 auto 60px;
  text-align: center;
}

.organic-consultation__label {
  display: inline-block;
  margin-bottom: 16px;
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.organic-consultation__head h2 {
  margin-bottom: 20px;
  color: #1d2b38;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.4;
}

.organic-consultation__head p {
  color: #5c6872;
  line-height: 2;
}

.organic-consultation__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.organic-consultation-card {
  padding: 38px;
  border-radius: 28px;
  background: #fff;
  border: 1px solid rgba(0, 82, 159, 0.08);
  box-shadow: 0 16px 40px rgba(0, 82, 159, 0.05);
}

.organic-consultation-card h3 {
  margin-bottom: 16px;
  color: #1d2b38;
  font-size: 24px;
  line-height: 1.5;
}

.organic-consultation-card p {
  color: #5c6872;
  line-height: 1.9;
}

.organic-consultation__message {
  margin-top: 50px;
  padding: 40px;
  text-align: center;
  border-radius: 28px;
  background: linear-gradient(135deg, #00529f 0%, #0f6dc7 100%);
  color: #fff;
}

.organic-consultation__message strong {
  display: block;
  margin-bottom: 14px;
  font-size: 24px;
  font-weight: 700;
}

.organic-consultation__message p {
  max-width: 720px;
  margin: auto;
  line-height: 2;
  opacity: 0.95;
}

@media (max-width: 768px) {
  .organic-consultation {
    padding: 80px 0;
  }

  .organic-consultation__grid {
    grid-template-columns: 1fr;
  }

  .organic-consultation-card {
    padding: 30px;
  }

  .organic-consultation__message {
    padding: 30px 24px;
  }

  .organic-consultation__message strong {
    font-size: 22px;
  }
}

/* WHY QBI WORLD */
.organic-strength {
  padding: 120px 0;
  background: #fff;
}

.organic-strength__inner {
  width: min(1000px, 90%);
  margin: auto;
}

.organic-strength__head {
  text-align: center;
  margin: 0 auto 80px;
}

.organic-strength__label {
  display: inline-block;
  margin-bottom: 16px;
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.organic-strength__head h2 {
  margin-bottom: 24px;
  color: #1d2b38;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.4;
}

.organic-strength__head p {
  color: #5c6872;
  line-height: 2;
}

.organic-strength__timeline {
  position: relative;
}

.organic-strength__timeline::before {
  content: "";
  position: absolute;
  left: 35px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgba(0, 82, 159, 0.15);
}

.organic-step {
  position: relative;
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 30px;
  margin-bottom: 50px;
}

.organic-step:last-child {
  margin-bottom: 0;
}

.organic-step__number {
  position: relative;
  z-index: 2;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: #00529f;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.organic-step__content {
  padding: 30px;
  border-radius: 24px;
  background: #f8fbff;
  border: 1px solid rgba(0, 82, 159, 0.08);
}

.organic-step__content h3 {
  margin-bottom: 14px;
  color: #1d2b38;
  font-size: 24px;
}

.organic-step__content p {
  color: #5c6872;
  line-height: 1.9;
}

@media (max-width: 768px) {
  .organic-strength {
    padding: 80px 0;
  }

  .organic-step {
    grid-template-columns: 60px 1fr;
    gap: 20px;
  }

  .organic-step__number {
    width: 60px;
    height: 60px;
    font-size: 16px;
  }

  .organic-strength__timeline::before {
    left: 29px;
  }
}

/* CTA */
.organic-cta {
  position: relative;
  overflow: hidden;
  padding: 120px 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.15)),
    url("../../assets/img/lineup/haircare/organic/cta-bg.webp");
  background-size: cover;
  background-position: center;
}

.organic-cta__inner {
  width: min(900px, 90%);
  margin: auto;
  text-align: center;
  padding: 60px 40px;
  border-radius: 32px;
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 20px 50px rgba(0, 82, 159, 0.08);
}

.organic-cta__label {
  margin-bottom: 18px;
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.organic-cta h2 {
  margin-bottom: 24px;
  color: #1d2b38;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.4;
}

.organic-cta__lead {
  max-width: 700px;
  margin: auto;
  color: #44515c;
  line-height: 2;
}

.organic-cta__buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 40px;
}

.organic-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  padding: 0 32px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  transition: 0.3s;
}

.organic-cta__btn--primary {
  background: #00529f;
  color: #fff;
}

.organic-cta__btn--secondary {
  background: rgba(255, 255, 255, 0.85);
  color: #00529f;
  border: 1px solid rgba(0, 82, 159, 0.15);
}

.organic-cta__btn:hover {
  transform: translateY(-3px);
}

@media (max-width: 768px) {
  .organic-cta {
    padding: 80px 0;
  }

  .organic-cta__inner {
    padding: 40px 24px;
  }

  .organic-cta__buttons {
    flex-direction: column;
  }

  .organic-cta__btn {
    width: 100%;
  }
}

/* /lineup/haircare/salon-shampoo/ */
/* SALON SHAMPOO FV */
.salon-shampoo-fv {
  position: relative;
  min-height: 760px;
  padding: 180px 0 120px;
  overflow: hidden;
  background: #f8fafb;
}

.salon-shampoo-fv__bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.96) 0%,
      rgba(255, 255, 255, 0.92) 26%,
      rgba(255, 255, 255, 0.62) 47%,
      rgba(255, 255, 255, 0.08) 72%,
      rgba(255, 255, 255, 0.02) 100%
    ),
    url("../../assets/img/lineup/haircare/salon-shampoo/fv.webp");
  background-size: cover;
  background-position: center center;
  z-index: 0;
}

.salon-shampoo-fv__inner {
  position: relative;
  z-index: 1;
  width: min(1200px, 90%);
  margin: auto;
}

.salon-shampoo-fv__content {
  max-width: 620px;
}

.salon-shampoo-fv__label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.salon-shampoo-fv__label::before {
  content: "";
  width: 34px;
  height: 1px;
  background: #00529f;
}

.salon-shampoo-fv__title {
  margin: 0;
  color: #1c2539;
  font-size: clamp(26px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: 0.04em;
}

.salon-shampoo-fv__lead {
  margin: 28px 0 0;
  color: #344056;
  font-size: 17px;
  line-height: 2;
  letter-spacing: 0.04em;
}

.salon-shampoo-fv__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 42px;
}

.salon-shampoo-fv__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 250px;
  padding: 17px 28px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: 0.3s ease;
}

.salon-shampoo-fv__btn--primary {
  background: #00529f;
  color: #fff;
  box-shadow: 0 18px 36px rgba(0, 82, 159, 0.22);
}

.salon-shampoo-fv__btn--primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 44px rgba(0, 82, 159, 0.28);
}

@media (max-width: 900px) {
  .salon-shampoo-fv {
    min-height: auto;
    padding: 140px 0 70px;
  }

  .salon-shampoo-fv__bg {
    background:
      linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.96) 0%,
        rgba(255, 255, 255, 0.9) 42%,
        rgba(255, 255, 255, 0.62) 100%
      ),
      url("../../assets/img/lineup/haircare/salon-shampoo/fv.webp");
    background-size: cover;
    background-position: 64% center;
  }

  .salon-shampoo-fv__content {
    max-width: 100%;
  }

  .salon-shampoo-fv__lead {
    font-size: 15px;
    line-height: 1.9;
  }

  .salon-shampoo-fv__buttons {
    flex-direction: column;
  }

  .salon-shampoo-fv__btn {
    width: 100%;
    min-width: auto;
  }
}

@media (max-width: 520px) {
  .salon-shampoo-fv {
    padding: 128px 0 56px;
  }

  .salon-shampoo-fv__bg {
    background-position: 70% center;
  }
}

/* SALON BRAND VALUE */
.salon-brand-value {
  padding: 120px 0;
  background: #fff;
}

.salon-brand-value__inner {
  width: min(1200px, 90%);
  margin: auto;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 72px;
  align-items: center;
}

.salon-brand-value__image {
  position: sticky;
  top: 120px;
  align-self: start;
  overflow: hidden;
  border-radius: 32px;
}

.salon-brand-value__image img {
  width: 100%;
  height: 540px;
  object-fit: cover;
  object-position: center;
  display: block;
}

.salon-brand-value__label {
  margin-bottom: 16px;
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.15em;
}

.salon-brand-value__content h2 {
  margin: 0 0 26px;
  color: #1c2539;
  font-size: clamp(30px, 4vw, 36px);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.04em;
}

.salon-brand-value__lead {
  margin: 0 0 38px;
  color: #4d5a72;
  font-size: 16px;
  line-height: 2;
  letter-spacing: 0.04em;
}

.salon-brand-value__list {
  display: grid;
  gap: 18px;
}

.salon-brand-value-item {
  padding: 26px 30px;
  background: #fff;
  border: 1px solid rgba(0, 82, 159, 0.08);
  border-left: 2px solid #00529f;
  border-radius: 20px;
  transition: 0.3s ease;
}

.salon-brand-value-item h3 {
  margin: 0 0 8px;
  color: #1c2539;
  font-size: 20px;
  line-height: 1.5;
}

.salon-brand-value-item p {
  margin: 0;
  color: #4d5a72;
  font-size: 14px;
  line-height: 1.8;
}

@media (max-width: 900px) {
  .salon-brand-value {
    padding: 80px 0;
  }

  .salon-brand-value__inner {
    grid-template-columns: 1fr;
    gap: 44px;
  }

  .salon-brand-value__image img {
    height: 420px;
  }

  .salon-brand-value__image {
    position: static;
  }
}

@media (max-width: 520px) {
  .salon-brand-value__image {
    border-radius: 24px;
  }

  .salon-brand-value__image img {
    height: 320px;
  }

  .salon-brand-value-item {
    padding: 22px 22px;
  }
}

/* PRODUCT PLANNING */
.salon-product-planning {
  padding: 120px 0;
  background: #f8fafc;
}

.salon-product-planning__inner {
  width: min(1200px, 90%);
  margin: auto;
}

.salon-product-planning__head {
  margin: 0 auto 70px;
  text-align: center;
}

.salon-product-planning__label {
  margin-bottom: 16px;
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.15em;
}

.salon-product-planning__head h2 {
  margin: 0 0 26px;
  color: #1c2539;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.04em;
}

.salon-product-planning__head p {
  margin: 0;
  color: #4d5a72;
  font-size: 16px;
  line-height: 2;
  letter-spacing: 0.04em;
}

.salon-product-planning__body {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 56px;
  align-items: center;
}

.salon-product-planning__image {
  overflow: hidden;
  border-radius: 32px;
  box-shadow: 0 24px 60px rgba(0, 82, 159, 0.08);
  position: sticky;
  top: 120px;
  align-self: start;
}

.salon-product-planning__image img {
  display: block;
  width: 100%;
  height: 560px;
  object-fit: cover;
  object-position: center;
}

.salon-product-planning__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

.salon-product-planning-card {
  padding: 26px 30px;
  background: #fff;
  border: 1px solid rgba(0, 82, 159, 0.08);
  border-radius: 22px;
  box-shadow: 0 10px 30px rgba(0, 82, 159, 0.03);
}

.salon-product-planning-card span {
  display: block;
  margin-bottom: 8px;
  color: #00529f;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.salon-product-planning-card h3 {
  margin: 0 0 10px;
  color: #1c2539;
  font-size: 21px;
  line-height: 1.45;
}

.salon-product-planning-card p {
  margin: 0;
  color: #4d5a72;
  font-size: 14px;
  line-height: 1.85;
}

@media (max-width: 900px) {
  .salon-product-planning {
    padding: 80px 0;
  }

  .salon-product-planning__head {
    margin-bottom: 44px;
    text-align: left;
  }

  .salon-product-planning__body {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .salon-product-planning__image img {
    height: 420px;
  }

  .salon-product-planning__image {
    position: static;
  }
}

@media (max-width: 520px) {
  .salon-product-planning__image {
    border-radius: 24px;
  }

  .salon-product-planning__image img {
    height: 300px;
  }

  .salon-product-planning-card {
    padding: 24px 22px;
  }
}

/* SALON PRODUCT DESIGN */
.salon-product-design {
  padding: 120px 0;
  background: #fff;
}

.salon-product-design__inner {
  width: min(1200px, 90%);
  margin: auto;
}

.salon-product-design__head {
  margin: 0 auto 70px;
  text-align: center;
}

.salon-product-design__label {
  margin-bottom: 16px;
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.15em;
}

.salon-product-design__head h2 {
  margin: 0 0 26px;
  color: #1c2539;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.04em;
}

.salon-product-design__head p {
  margin: 0;
  color: #4d5a72;
  font-size: 16px;
  line-height: 2;
  letter-spacing: 0.04em;
}

.salon-product-design__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.salon-product-design-card {
  overflow: hidden;
  border-radius: 28px;
  background: #fff;
  border: 1px solid rgba(0, 82, 159, 0.08);
  box-shadow: 0 14px 34px rgba(0, 82, 159, 0.04);
}

.salon-product-design-card__image {
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.salon-product-design-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: 0.5s ease;
}

.salon-product-design-card:hover .salon-product-design-card__image img {
  transform: scale(1.05);
}

.salon-product-design-card__body {
  padding: 28px 26px 30px;
}

.salon-product-design-card__body span {
  display: block;
  margin-bottom: 10px;
  color: #00529f;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.salon-product-design-card__body h3 {
  margin: 0 0 12px;
  color: #1c2539;
  font-size: 21px;
  line-height: 1.45;
}

.salon-product-design-card__body p {
  margin: 0;
  color: #4d5a72;
  font-size: 14px;
  line-height: 1.85;
}

@media (max-width: 1000px) {
  .salon-product-design__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .salon-product-design {
    padding: 80px 0;
  }

  .salon-product-design__head {
    margin-bottom: 44px;
    text-align: left;
  }

  .salon-product-design__grid {
    grid-template-columns: 1fr;
  }

  .salon-product-design-card__body {
    padding: 24px 22px 26px;
  }
}

/* CONSULTATION */
.salon-consultation {
  padding: 120px 0;
  background: #f8fafc;
}

.salon-consultation__inner {
  width: min(1200px, 90%);
  margin: auto;
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 70px;
  align-items: start;
}

.salon-consultation__content {
  padding-top: 10px;
}

.salon-consultation__label {
  margin-bottom: 16px;
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.15em;
}

.salon-consultation__content h2 {
  margin: 0 0 26px;
  color: #1c2539;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.35;
}

.salon-consultation__lead {
  margin-bottom: 40px;
  color: #4d5a72;
  font-size: 16px;
  line-height: 2;
}

.salon-consultation__list {
  display: grid;
  gap: 18px;
}

.salon-consultation-item {
  padding: 26px 28px;
  background: #fff;
  border-radius: 20px;
  border: 1px solid rgba(0, 82, 159, 0.08);
}

.salon-consultation-item h3 {
  margin: 0 0 10px;
  color: #1c2539;
  font-size: 20px;
  line-height: 1.5;
}

.salon-consultation-item p {
  margin: 0;
  color: #4d5a72;
  font-size: 14px;
  line-height: 1.9;
}

.salon-consultation__image {
  position: sticky;
  top: 120px;
  align-self: start;
  overflow: hidden;
  border-radius: 32px;
}

.salon-consultation__image img {
  width: 100%;
  height: 760px;
  object-fit: cover;
  object-position: center;
  display: block;
}

@media (max-width: 900px) {
  .salon-consultation {
    padding: 80px 0;
  }

  .salon-consultation__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .salon-consultation__image {
    position: static;
    order: -1;
  }

  .salon-consultation__image img {
    height: 480px;
  }
}

@media (max-width: 520px) {
  .salon-consultation__image {
    border-radius: 24px;
  }

  .salon-consultation__image img {
    height: 360px;
  }
}

/* WHY QBI WORLD */
.salon-strength {
  padding: 120px 0;
  background: #fff;
}

.salon-strength__inner {
  width: min(1000px, 90%);
  margin: auto;
}

.salon-strength__head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 80px;
}

.salon-strength__label {
  margin-bottom: 16px;
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.15em;
}

.salon-strength__head h2 {
  margin: 0 0 24px;
  color: #1c2539;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.35;
}

.salon-strength__head p {
  margin: 0;
  color: #4d5a72;
  font-size: 16px;
  line-height: 2;
}

.salon-strength__timeline {
  position: relative;
}

.salon-strength__timeline::before {
  content: "";
  position: absolute;
  left: 34px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgba(0, 82, 159, 0.15);
}

.salon-strength-step {
  position: relative;
  display: flex;
  gap: 40px;
  margin-bottom: 50px;
}

.salon-strength-step:last-child {
  margin-bottom: 0;
}

.salon-strength-step__number {
  position: relative;
  z-index: 2;
  width: 70px;
  height: 70px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #00529f;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.salon-strength-step__content {
  flex: 1;
  padding: 26px 32px;
  border-radius: 24px;
  background: #f8fafc;
  border: 1px solid rgba(0, 82, 159, 0.08);
}

.salon-strength-step__content h3 {
  margin: 0 0 12px;
  color: #1c2539;
  font-size: 24px;
}

.salon-strength-step__content p {
  margin: 0;
  color: #4d5a72;
  line-height: 1.9;
}

@media (max-width: 768px) {
  .salon-strength {
    padding: 80px 0;
  }

  .salon-strength-step {
    gap: 20px;
  }

  .salon-strength-step__number {
    width: 56px;
    height: 56px;
    font-size: 16px;
  }

  .salon-strength__timeline::before {
    left: 27px;
  }

  .salon-strength-step__content {
    padding: 22px;
  }
}

/* CTA */
.salon-shampoo-cta {
  position: relative;
  overflow: hidden;
  padding: 120px 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.15)),
    url("../../assets/img/lineup/haircare/salon-shampoo/cta-bg.webp");
  background-size: cover;
  background-position: center;
}

.salon-shampoo-cta__inner {
  width: min(900px, 90%);
  margin: auto;
  text-align: center;
  padding: 60px 18px;
  border-radius: 32px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 20px 50px rgba(0, 82, 159, 0.08);
}

.salon-shampoo-cta__label {
  margin-bottom: 16px;
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.15em;
}

.salon-shampoo-cta h2 {
  margin: 0 0 24px;
  color: #1c2539;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.35;
}

.salon-shampoo-cta__text {
  max-width: 720px;
  margin: 0 auto;
  color: #344056;
  font-size: 16px;
  line-height: 2;
}

.salon-shampoo-cta__buttons {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-top: 40px;
}

.salon-shampoo-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 320px;
  padding: 18px 10px;
  border-radius: 999px;
  text-decoration: none;
  font-size: 15px;
  font-weight: 700;
  transition: 0.3s ease;
}

.salon-shampoo-cta__btn--primary {
  background: #00529f;
  color: #fff;
}

.salon-shampoo-cta__btn--primary:hover {
  transform: translateY(-3px);
}

.salon-shampoo-cta__btn--secondary {
  background: rgba(255, 255, 255, 0.75);
  color: #00529f;
  border: 1px solid rgba(0, 82, 159, 0.15);
}

.salon-shampoo-cta__btn--secondary:hover {
  background: #fff;
}

@media (max-width: 768px) {
  .salon-shampoo-cta {
    padding: 80px 0;
  }

  .salon-shampoo-cta__buttons {
    flex-direction: column;
  }

  .salon-shampoo-cta__btn {
    width: 100%;
    min-width: auto;
  }
}

/* lineup/haircare/scalp-care/ */
/* SCALP FV */
.scalp-fv {
  position: relative;
  min-height: 760px;
  padding: 180px 0 120px;
  overflow: hidden;
  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.96) 0%,
      rgba(255, 255, 255, 0.92) 34%,
      rgba(255, 255, 255, 0.52) 58%,
      rgba(255, 255, 255, 0.08) 100%
    ),
    url("../../assets/img/lineup/haircare/scalp-care/fv.webp");
  background-size: cover;
  background-position: center;
}

.scalp-fv__inner {
  width: min(1200px, 90%);
  margin: auto;
}

.scalp-fv__content {
  width: min(620px, 100%);
}

.scalp-fv__label {
  display: inline-flex;
  align-items: center;
  margin-bottom: 22px;
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.scalp-fv__title {
  margin: 0 0 28px;
  color: #1c2539;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: 0.04em;
}

.scalp-fv__lead {
  margin: 0;
  color: #3d4656;
  font-size: 16px;
  line-height: 2;
  letter-spacing: 0.04em;
}

.scalp-fv__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 42px;
}

.scalp-fv__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 220px;
  padding: 16px 24px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: 0.3s ease;
}

.scalp-fv__btn--primary {
  background: #00529f;
  color: #fff;
  box-shadow: 0 16px 34px rgba(0, 82, 159, 0.22);
}

.scalp-fv__btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 42px rgba(0, 82, 159, 0.28);
}

.scalp-fv__btn--secondary {
  background: rgba(255, 255, 255, 0.72);
  color: #00529f;
  border: 1px solid rgba(0, 82, 159, 0.24);
  backdrop-filter: blur(8px);
}

.scalp-fv__btn--secondary:hover {
  background: #fff;
  transform: translateY(-2px);
}

.scalp-fv__keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  margin-top: 32px;
  color: #00529f;
  font-size: 14px;
  font-weight: 600;
}

.scalp-fv__keywords span {
  position: relative;
  padding-left: 14px;
}

.scalp-fv__keywords span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #00529f;
}

@media screen and (max-width: 768px) {
  .scalp-fv {
    min-height: auto;
    padding: 140px 0 70px;
    background:
      linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.96) 0%,
        rgba(255, 255, 255, 0.9) 48%,
        rgba(255, 255, 255, 0.58) 100%
      ),
      url("../../assets/img/lineup/haircare/scalp-care/fv.webp");
    background-size: cover;
    background-position: center right 34%;
  }

  .scalp-fv__content {
    width: 100%;
  }

  .scalp-fv__lead {
    font-size: 14px;
    line-height: 1.9;
  }

  .scalp-fv__buttons {
    margin-top: 34px;
  }

  .scalp-fv__btn {
    width: 100%;
    min-width: auto;
  }
}

/* WHY SCALP CARE */
.scalp-reason {
  padding: 120px 0;
  background: #fff;
}

.scalp-reason__inner {
  width: min(1200px, 90%);
  margin: auto;
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 70px;
}

.scalp-reason__visual {
  position: sticky;
  top: 120px;
  height: fit-content;
  overflow: hidden;
  border-radius: 30px;
}

.scalp-reason__visual img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.scalp-reason__label {
  margin-bottom: 12px;
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.15em;
}

.scalp-reason__head h2 {
  margin-bottom: 50px;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.4;
  color: #1c2539;
}

.scalp-reason-item {
  padding: 34px;
  margin-bottom: 24px;
  border-radius: 24px;
  background: #f7fafe;
  border: 1px solid rgba(0, 82, 159, 0.08);
  box-shadow: 0 15px 35px rgba(0, 82, 159, 0.06);
}

.scalp-reason-item span {
  display: inline-block;
  margin-bottom: 12px;
  color: #00529f;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.scalp-reason-item h3 {
  margin-bottom: 14px;
  font-size: 24px;
  color: #1c2539;
}

.scalp-reason-item p {
  margin: 0;
  line-height: 2;
  color: #555;
}

@media (max-width: 768px) {
  .scalp-reason {
    padding: 80px 0;
  }

  .scalp-reason__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .scalp-reason__visual {
    position: static;
  }

  .scalp-reason-item {
    padding: 24px;
  }

  .scalp-reason-item h3 {
    font-size: 20px;
  }
}

/* SCALP CARE SERIES */
.scalp-series {
  padding: 120px 0;
  background: #f7fafd;
}

.scalp-series__inner {
  width: min(1200px, 90%);
  margin: auto;
}

.scalp-series__head {
  margin: 0 auto 60px;
  text-align: center;
}

.scalp-series__label {
  margin-bottom: 14px;
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.scalp-series__head h2 {
  margin-bottom: 20px;
  color: #1c2539;
  font-size: clamp(26px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.4;
}

.scalp-series__head p {
  color: #555;
  line-height: 2;
}

.scalp-series__visual {
  max-width: 900px;
  margin: 0 auto 70px;
  overflow: hidden;
  border-radius: 32px;
  box-shadow: 0 25px 60px rgba(0, 82, 159, 0.08);
}

.scalp-series__visual img {
  width: 100%;
  display: block;
}

.scalp-series__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.scalp-series-card {
  position: relative;
  padding: 36px 28px;
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 15px 35px rgba(0, 82, 159, 0.05);
  border-top: 3px solid #00529f;
}

.scalp-series-card__number {
  margin-bottom: 18px;
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.15em;
}

.scalp-series-card h3 {
  margin-bottom: 14px;
  color: #1c2539;
  font-size: 22px;
  line-height: 1.4;
}

.scalp-series-card p {
  margin: 0;
  color: #555;
  line-height: 1.9;
  font-size: 14px;
}

@media (max-width: 992px) {
  .scalp-series__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .scalp-series {
    padding: 80px 0;
  }

  .scalp-series__visual {
    margin-bottom: 40px;
  }

  .scalp-series__grid {
    grid-template-columns: 1fr;
  }

  .scalp-series-card {
    padding: 28px 24px;
  }
}

/* BRAND CONCEPT */
.scalp-concept {
  padding: 120px 0;
  background: #fff;
}

.scalp-concept__inner {
  width: min(1200px, 90%);
  margin: auto;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 70px;
  align-items: start;
}

.scalp-concept__visual {
  position: sticky;
  top: 120px;
  height: fit-content;
  overflow: hidden;
  border-radius: 32px;
}

.scalp-concept__visual img {
  width: 100%;
  display: block;
}

.scalp-concept__label {
  margin-bottom: 12px;
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.scalp-concept__head h2 {
  margin-bottom: 20px;
  color: #1c2539;
  font-size: clamp(26px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.4;
}

.scalp-concept__head p {
  margin-bottom: 40px;
  color: #555;
  line-height: 2;
}

.scalp-concept__list {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.scalp-concept-item {
  padding: 32px;
  background: #f7fafd;
  border-radius: 24px;
  border-left: 4px solid #00529f;
  transition: 0.3s ease;
}

.scalp-concept-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 35px rgba(0, 82, 159, 0.08);
}

.scalp-concept-item span {
  display: inline-block;
  margin-bottom: 10px;
  color: #00529f;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.scalp-concept-item h3 {
  margin-bottom: 12px;
  color: #1c2539;
  font-size: 24px;
  line-height: 1.4;
}

.scalp-concept-item p {
  margin: 0;
  color: #555;
  line-height: 1.9;
}

@media (max-width: 768px) {
  .scalp-concept {
    padding: 80px 0;
  }

  .scalp-concept__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .scalp-concept__visual {
    position: static;
  }

  .scalp-concept-item {
    padding: 24px;
  }

  .scalp-concept-item h3 {
    font-size: 20px;
  }
}

/* CONSULTATION */
.scalp-consultation {
  padding: 120px 0;
  background: #f7fafd;
}

.scalp-consultation__inner {
  width: min(1200px, 90%);
  margin: auto;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 70px;
  align-items: start;
}

.scalp-consultation__content {
  min-width: 0;
}

.scalp-consultation__label {
  margin-bottom: 12px;
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.scalp-consultation__content h2 {
  margin-bottom: 22px;
  color: #1c2539;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.4;
}

.scalp-consultation__lead {
  margin: 0 0 42px;
  color: #555;
  line-height: 2;
}

.scalp-consultation__list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.scalp-consultation-item {
  padding: 30px 32px;
  background: #fff;
  border-radius: 24px;
  border: 1px solid rgba(0, 82, 159, 0.08);
  box-shadow: 0 14px 34px rgba(0, 82, 159, 0.04);
  transition: 0.3s ease;
}

.scalp-consultation-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 42px rgba(0, 82, 159, 0.08);
}

.scalp-consultation-item span {
  display: inline-block;
  margin-bottom: 10px;
  color: #00529f;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.scalp-consultation-item h3 {
  margin-bottom: 10px;
  color: #1c2539;
  font-size: 23px;
  line-height: 1.4;
}

.scalp-consultation-item p {
  margin: 0;
  color: #555;
  line-height: 1.9;
}

.scalp-consultation__visual {
  position: sticky;
  top: 120px;
  height: fit-content;
  overflow: hidden;
  border-radius: 32px;
}

.scalp-consultation__visual img {
  width: 100%;
  display: block;
}

@media (max-width: 768px) {
  .scalp-consultation {
    padding: 80px 0;
  }

  .scalp-consultation__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .scalp-consultation__visual {
    position: static;
    order: -1;
  }

  .scalp-consultation-item {
    padding: 24px;
  }

  .scalp-consultation-item h3 {
    font-size: 20px;
  }
}

/* WHY QBI WORLD */
.scalp-strength {
  padding: 120px 0;
  background: #fff;
}

.scalp-strength__inner {
  width: min(1200px, 90%);
  margin: auto;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 80px;
  align-items: start;
}

.scalp-strength__head {
  position: sticky;
  top: 120px;
}

.scalp-strength__label {
  margin-bottom: 14px;
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.scalp-strength__head h2 {
  margin-bottom: 24px;
  color: #1c2539;
  font-size: clamp(26px, 4vw, 36px);
  font-weight: 700;
  line-height: 1.4;
}

.scalp-strength__head p {
  color: #555;
  line-height: 2;
}

.scalp-strength__timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.scalp-strength__timeline::before {
  content: "";
  position: absolute;
  left: 22px;
  top: 18px;
  bottom: 18px;
  width: 1px;
  background: rgba(0, 82, 159, 0.18);
}

.scalp-strength-item {
  position: relative;
  padding: 34px 34px 34px 74px;
  background: #f7fafd;
  border-radius: 26px;
  border: 1px solid rgba(0, 82, 159, 0.08);
}

.scalp-strength-item::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 38px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #00529f;
  box-shadow: 0 0 0 8px rgba(0, 82, 159, 0.1);
  z-index: 1;
}

.scalp-strength-item span {
  display: inline-block;
  margin-bottom: 10px;
  color: #00529f;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.scalp-strength-item h3 {
  margin-bottom: 12px;
  color: #1c2539;
  font-size: 24px;
  line-height: 1.4;
}

.scalp-strength-item p {
  margin: 0;
  color: #555;
  line-height: 1.9;
}

@media (max-width: 768px) {
  .scalp-strength {
    padding: 80px 0;
  }

  .scalp-strength__inner {
    grid-template-columns: 1fr;
    gap: 44px;
  }

  .scalp-strength__head {
    position: static;
  }

  .scalp-strength__timeline {
    gap: 22px;
  }

  .scalp-strength-item {
    padding: 28px 24px 28px 58px;
  }

  .scalp-strength__timeline::before {
    left: 17px;
  }

  .scalp-strength-item::before {
    left: 10px;
    top: 34px;
  }

  .scalp-strength-item h3 {
    font-size: 20px;
  }
}

/* CTA */
.scalp-cta {
  position: relative;
  overflow: hidden;
  padding: 120px 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.16)),
    url("../../assets/img/lineup/haircare/scalp-care/cta-bg.webp");
  background-size: cover;
  background-position: center;
}

.scalp-cta__inner {
  width: min(900px, 90%);
  margin: auto;
  text-align: center;
  padding: 62px 34px;
  border-radius: 32px;
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.58);
  box-shadow: 0 22px 55px rgba(0, 82, 159, 0.1);
}

.scalp-cta__label {
  margin-bottom: 16px;
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.scalp-cta h2 {
  margin-bottom: 24px;
  color: #1c2539;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.45;
}

.scalp-cta__text {
  max-width: 800px;
  margin: 0 auto 40px;
  color: #3d4656;
  line-height: 2;
}

.scalp-cta__buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
}

.scalp-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 250px;
  padding: 16px 26px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: 0.3s ease;
}

.scalp-cta__btn--primary {
  background: #00529f;
  color: #fff;
  box-shadow: 0 16px 34px rgba(0, 82, 159, 0.22);
}

.scalp-cta__btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 42px rgba(0, 82, 159, 0.28);
}

.scalp-cta__btn--secondary {
  background: rgba(255, 255, 255, 0.78);
  color: #00529f;
  border: 1px solid rgba(0, 82, 159, 0.22);
  backdrop-filter: blur(8px);
}

.scalp-cta__btn--secondary:hover {
  background: #fff;
  transform: translateY(-2px);
}

@media (max-width: 768px) {
  .scalp-cta {
    padding: 80px 0;
    background-position: center;
  }

  .scalp-cta__inner {
    padding: 44px 24px;
    border-radius: 26px;
  }

  .scalp-cta__text {
    font-size: 14px;
    line-height: 1.9;
  }

  .scalp-cta__btn {
    width: 100%;
    min-width: auto;
  }
}

/* /lineup/haircare/shampoo/ */
/* SHAMPOO FV */
.shampoo-fv {
  position: relative;
  overflow: hidden;
  padding: 170px 0 110px;
  background:
    radial-gradient(circle at 90% 20%, rgba(0, 82, 159, 0.08), transparent 35%),
    linear-gradient(135deg, #ffffff 0%, #f7fafc 55%, #eef5fa 100%);
}

.shampoo-fv::after {
  content: "SHAMPOO";
  position: absolute;
  z-index: 2;
  right: -20px;
  bottom: 20px;
  color: rgba(0, 82, 159, 0.045);
  font-size: clamp(72px, 10vw, 150px);
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1;
  pointer-events: none;
}

.shampoo-fv::before {
  content: "";
  position: absolute;
  right: -140px;
  bottom: -140px;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: rgba(0, 82, 159, 0.05);
}

.shampoo-fv__inner {
  width: min(1200px, 90%);
  margin: auto;
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 70px;
  align-items: center;
  position: relative;
  z-index: 1;
}

.shampoo-fv__label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.shampoo-fv__label::before {
  content: "";
  width: 42px;
  height: 1px;
  background: #00529f;
}

.shampoo-fv__title {
  margin: 0;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.35;
  color: #1a2d3d;
  letter-spacing: 0.04em;
}

.shampoo-fv__lead {
  margin-top: 28px;
  font-size: 16px;
  line-height: 2;
  color: #506273;
}

.shampoo-fv__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 42px;
}

.shampoo-fv__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 250px;
  padding: 16px 28px;
  border-radius: 999px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  transition: 0.3s;
}

.shampoo-fv__btn:hover {
  transform: translateY(-3px);
}

.shampoo-fv__btn--primary {
  background: #00529f;
  color: #fff;
  box-shadow: 0 15px 35px rgba(0, 82, 159, 0.25);
}

.shampoo-fv__btn--secondary {
  background: #fff;
  color: #00529f;
  border: 1px solid rgba(0, 82, 159, 0.2);
}

.shampoo-fv__visual {
  position: relative;
}

.shampoo-fv__image {
  overflow: hidden;
  border-radius: 42px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.1);
}

.shampoo-fv__image img {
  width: 100%;
  display: block;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

@media (max-width: 900px) {
  .shampoo-fv {
    padding: 140px 0 80px;
  }

  .shampoo-fv__inner {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .shampoo-fv__buttons {
    flex-direction: column;
  }

  .shampoo-fv__btn {
    width: 100%;
    min-width: auto;
  }
}

/* SHAMPOO BRAND */
.shampoo-brand {
  padding: 140px 0;
  background: #fff;
}

.shampoo-brand__inner {
  width: min(1320px, 90%);
  margin: auto;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 90px;
  align-items: center;
}

.shampoo-brand__visual {
  position: relative;
}

.shampoo-brand__visual img {
  width: 100%;
  display: block;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  border-radius: 40px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.08);
}

.shampoo-brand__label {
  margin-bottom: 20px;
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.shampoo-brand h2 {
  margin-bottom: 36px;
  color: #1f3144;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.04em;
}

.shampoo-brand__lead {
  margin-bottom: 22px;
  color: #33485d;
  font-size: 18px;
  line-height: 2;
}

.shampoo-brand__content p {
  color: #5b6c7d;
  line-height: 2;
}

.shampoo-brand__message {
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid rgba(0, 82, 159, 0.15);
}

.shampoo-brand__message span {
  display: block;
  margin-bottom: 14px;
  color: #00529f;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.shampoo-brand__message p {
  margin: 0;
  color: #1f3144;
  font-size: 18px;
  line-height: 1.9;
}
@media (max-width: 768px) {
  .shampoo-brand {
    padding: 80px 0;
  }

  .shampoo-brand__inner {
    width: min(100%, 90%);
    grid-template-columns: 1fr;
    gap: 42px;
  }

  .shampoo-brand__visual img {
    aspect-ratio: 4 / 3;
    border-radius: 26px;
  }

  .shampoo-brand__label {
    margin-bottom: 14px;
    font-size: 12px;
  }

  .shampoo-brand__lead {
    margin-bottom: 18px;
    font-size: 16px;
    line-height: 1.9;
  }

  .shampoo-brand__content p {
    font-size: 15px;
    line-height: 1.9;
  }

  .shampoo-brand__message {
    margin-top: 34px;
    padding-top: 24px;
  }

  .shampoo-brand__message p {
    font-size: 16px;
    line-height: 1.8;
  }
}

/* PRODUCT PLANNING */
.shampoo-planning {
  padding: 140px 0;
  background: #f8fafc;
}

.shampoo-planning__inner {
  width: min(1320px, 90%);
  margin: auto;
}

.shampoo-planning__heading {
  margin-bottom: 70px;
}

.shampoo-planning__label {
  margin-bottom: 18px;
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.shampoo-planning__heading h2 {
  margin-bottom: 24px;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.45;
  color: #1f3144;
}

.shampoo-planning__heading p {
  color: #5b6c7d;
  line-height: 2;
}

.shampoo-planning__layout {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 70px;
  align-items: center;
}

.shampoo-planning__visual img {
  width: 100%;
  display: block;
  border-radius: 40px;
}

.shampoo-planning__list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.shampoo-plan {
  padding: 30px 0;
  border-bottom: 1px solid rgba(0, 82, 159, 0.12);
}

.shampoo-plan:first-child {
  border-top: 1px solid rgba(0, 82, 159, 0.12);
}

.shampoo-plan span {
  display: block;
  margin-bottom: 10px;
  color: #00529f;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
}

.shampoo-plan h3 {
  margin-bottom: 12px;
  color: #1f3144;
  font-size: 24px;
}

.shampoo-plan p {
  color: #5b6c7d;
  line-height: 1.9;
}

@media (max-width: 900px) {
  .shampoo-planning__layout {
    grid-template-columns: 1fr;
  }
}

/* HAIRCARE EXPERIENCE */
.shampoo-experience {
  padding: 140px 0;
  background: #fff;
}

.shampoo-experience__inner {
  width: min(1320px, 90%);
  margin: auto;
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 90px;
  align-items: center;
}

.shampoo-experience__visual img {
  width: 100%;
  display: block;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 32px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.08);
}

.shampoo-experience__label {
  margin-bottom: 20px;
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.shampoo-experience h2 {
  margin-bottom: 32px;
  color: #1f3144;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.04em;
}

.shampoo-experience__lead {
  margin-bottom: 44px;
  color: #4f6275;
  font-size: 16px;
  line-height: 2;
}

.shampoo-experience__list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(0, 82, 159, 0.14);
}

.shampoo-experience__item {
  padding: 26px 0;
  border-bottom: 1px solid rgba(0, 82, 159, 0.14);
}

.shampoo-experience__item span {
  display: block;
  margin-bottom: 10px;
  color: #00529f;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
}

.shampoo-experience__item h3 {
  margin-bottom: 10px;
  color: #1f3144;
  font-size: 22px;
  line-height: 1.5;
}

.shampoo-experience__item p {
  margin: 0;
  color: #5b6c7d;
  font-size: 15px;
  line-height: 1.9;
}

@media (max-width: 900px) {
  .shampoo-experience {
    padding: 90px 0;
  }

  .shampoo-experience__inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .shampoo-experience__visual img {
    aspect-ratio: 4 / 3.2;
    border-radius: 32px;
  }

  .shampoo-experience__lead {
    margin-bottom: 34px;
  }
}

/* CONSULTATION */
.shampoo-consultation {
  padding: 140px 0;
  background: #f8fafc;
}

.shampoo-consultation__inner {
  width: min(1320px, 90%);
  margin: auto;
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 90px;
}

.shampoo-consultation__visual {
  position: sticky;
  top: 120px;
  align-self: start;
}

.shampoo-consultation__visual img {
  width: 100%;
  display: block;
  border-radius: 32px;
}

.shampoo-consultation__label {
  margin-bottom: 20px;
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.shampoo-consultation h2 {
  margin-bottom: 28px;
  color: #1f3144;
  font-size: clamp(30px, 4vw, 36px);
  font-weight: 700;
  line-height: 1.45;
}

.shampoo-consultation__lead {
  margin-bottom: 50px;
  color: #5b6c7d;
  line-height: 2;
}

.shampoo-consultation__list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.shampoo-consultation__item {
  padding: 30px;
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
}

.shampoo-consultation__item h3 {
  margin-bottom: 12px;
  color: #1f3144;
  font-size: 22px;
}

.shampoo-consultation__item p {
  color: #5b6c7d;
  line-height: 1.9;
}

@media (max-width: 900px) {
  .shampoo-consultation__inner {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .shampoo-consultation__visual {
    position: static;
  }
}

/* WHY QBI WORLD */
.shampoo-strength {
  padding: 140px 0;
  background: #fff;
}

.shampoo-strength__inner {
  width: min(1100px, 90%);
  margin: auto;
}

.shampoo-strength__head {
  margin: 0 auto 80px;
  text-align: center;
}

.shampoo-strength__label {
  margin-bottom: 18px;
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.shampoo-strength h2 {
  margin-bottom: 28px;
  color: #1f3144;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.45;
}

.shampoo-strength__head p {
  color: #5b6c7d;
  line-height: 2;
}

.shampoo-strength__timeline {
  position: relative;
  max-width: 900px;
  margin: auto;
}

.shampoo-strength__timeline::before {
  content: "";
  position: absolute;
  left: 32px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(0, 82, 159, 0.15);
}

.shampoo-step {
  position: relative;
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 40px;
  padding-bottom: 60px;
}

.shampoo-step:last-child {
  padding-bottom: 0;
}

.shampoo-step span {
  position: relative;
  z-index: 2;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #00529f;
  color: #fff;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 700;
}

.shampoo-step h3 {
  margin-bottom: 14px;
  color: #1f3144;
  font-size: 28px;
}

.shampoo-step p {
  color: #5b6c7d;
  line-height: 2;
}

@media (max-width: 768px) {
  .shampoo-step {
    gap: 24px;
  }

  .shampoo-step h3 {
    font-size: 22px;
  }
}

/* CTA */
.shampoo-cta {
  position: relative;
  overflow: hidden;
  padding: 140px 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.18)),
    url("../../assets/img/lineup/haircare/shampoo/cta-bg.webp");
  background-size: cover;
  background-position: center;
}

.shampoo-cta__inner {
  width: min(900px, 90%);
  margin: auto;
  text-align: center;
  padding: 70px 40px;
  border-radius: 36px;
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 25px 60px rgba(0, 82, 159, 0.08);
}

.shampoo-cta__label {
  margin-bottom: 18px;
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.shampoo-cta h2 {
  margin-bottom: 26px;
  color: #1f3144;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.45;
}

.shampoo-cta__text {
  max-width: 720px;
  margin: 0 auto 42px;
  color: #42566a;
  line-height: 2;
}

.shampoo-cta__buttons {
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}

.shampoo-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 280px;
  padding: 18px 34px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  transition: 0.3s;
}

.shampoo-cta__btn--primary {
  background: #00529f;
  color: #fff;
}

.shampoo-cta__btn--primary:hover {
  transform: translateY(-3px);
}

.shampoo-cta__btn--secondary {
  background: rgba(255, 255, 255, 0.8);
  color: #00529f;
  border: 1px solid rgba(0, 82, 159, 0.18);
}

.shampoo-cta__btn--secondary:hover {
  background: #fff;
}

@media (max-width: 768px) {
  .shampoo-cta {
    padding: 100px 0;
  }

  .shampoo-cta__inner {
    padding: 50px 24px;
  }

  .shampoo-cta__btn {
    width: 100%;
    min-width: auto;
  }
}

/* /lineup/haircare/treatment/ */
/* TREATMENT FV */
.treatment-fv {
  position: relative;
  overflow: hidden;
  padding: 170px 0 110px;
  background:
    radial-gradient(circle at 90% 20%, rgba(0, 82, 159, 0.08), transparent 35%),
    linear-gradient(135deg, #ffffff 0%, #f8fbfd 55%, #eef6fa 100%);
}

.treatment-fv::after {
  content: "TREATMENT";
  position: absolute;
  z-index: 2;
  right: -20px;
  bottom: 20px;
  color: rgba(0, 82, 159, 0.045);
  font-size: clamp(72px, 10vw, 150px);
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1;
  pointer-events: none;
}

.treatment-fv::before {
  content: "";
  position: absolute;
  right: -140px;
  bottom: -140px;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: rgba(0, 82, 159, 0.05);
}

.treatment-fv__inner {
  width: min(1200px, 90%);
  margin: auto;
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 70px;
  align-items: center;
  position: relative;
  z-index: 1;
}

.treatment-fv__label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.treatment-fv__label::before {
  content: "";
  width: 42px;
  height: 1px;
  background: #00529f;
}

.treatment-fv__title {
  margin: 0;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.35;
  color: #1a2d3d;
  letter-spacing: 0.04em;
}

.treatment-fv__lead {
  margin-top: 28px;
  font-size: 16px;
  line-height: 2;
  color: #506273;
}

.treatment-fv__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 42px;
}

.treatment-fv__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 270px;
  padding: 16px 28px;
  border-radius: 999px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  transition: 0.3s;
}

.treatment-fv__btn:hover {
  transform: translateY(-3px);
}

.treatment-fv__btn--primary {
  background: #00529f;
  color: #fff;
  box-shadow: 0 15px 35px rgba(0, 82, 159, 0.25);
}

.treatment-fv__btn--secondary {
  background: #fff;
  color: #00529f;
  border: 1px solid rgba(0, 82, 159, 0.2);
}

.treatment-fv__visual {
  position: relative;
}

.treatment-fv__image {
  overflow: hidden;
  border-radius: 42px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.1);
}

.treatment-fv__image img {
  width: 100%;
  display: block;
  aspect-ratio: 5 / 4.6;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 900px) {
  .treatment-fv {
    padding: 140px 0 80px;
  }

  .treatment-fv__inner {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .treatment-fv__buttons {
    flex-direction: column;
  }

  .treatment-fv__btn {
    width: 100%;
    min-width: auto;
  }

  .treatment-fv__image {
    border-radius: 32px;
  }

  .treatment-fv__image img {
    aspect-ratio: 4 / 3.2;
  }
}

/* TREATMENT BRAND */
.treatment-brand {
  padding: 140px 0;
  background: #fff;
}

.treatment-brand__inner {
  width: min(1320px, 90%);
  margin: auto;
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 90px;
  align-items: center;
}

.treatment-brand__visual {
  position: relative;
}

.treatment-brand__visual img {
  width: 100%;
  display: block;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  object-position: center;
  border-radius: 40px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.08);
}

.treatment-brand__label {
  margin-bottom: 20px;
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.treatment-brand h2 {
  margin: 0 0 36px;
  color: #1f3144;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.04em;
}

.treatment-brand__lead {
  margin-bottom: 22px;
  color: #33485d;
  font-size: 18px;
  line-height: 2;
}

.treatment-brand__content p {
  color: #5b6c7d;
  line-height: 2;
}

.treatment-brand__message {
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid rgba(0, 82, 159, 0.15);
}

.treatment-brand__message span {
  display: block;
  margin-bottom: 14px;
  color: #00529f;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.treatment-brand__message p {
  margin: 0;
  color: #1f3144;
  font-size: 18px;
  line-height: 1.9;
}

@media (max-width: 900px) {
  .treatment-brand {
    padding: 90px 0;
  }

  .treatment-brand__inner {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .treatment-brand__visual img {
    aspect-ratio: 4 / 3.2;
    border-radius: 32px;
  }
}

/* PRODUCT PLANNING */
.treatment-planning {
  padding: 140px 0;
  background: #f8fafc;
}

.treatment-planning__inner {
  width: min(1320px, 90%);
  margin: auto;
}

.treatment-planning__head {
  margin: 0 auto 70px;
  text-align: center;
}

.treatment-planning__label {
  margin-bottom: 18px;
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.treatment-planning__head h2 {
  margin-bottom: 24px;
  color: #1f3144;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.45;
}

.treatment-planning__head p {
  color: #5b6c7d;
  line-height: 2;
}

.treatment-planning__visual {
  margin-bottom: 60px;
}

.treatment-planning__visual img {
  width: 100%;
  display: block;
  border-radius: 40px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.08);
}

.treatment-planning__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.treatment-plan-card {
  padding: 36px 30px;
  border-radius: 24px;
  background: #fff;
  border: 1px solid rgba(0, 82, 159, 0.08);
  transition: 0.3s;
}

.treatment-plan-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(0, 82, 159, 0.08);
}

.treatment-plan-card span {
  display: inline-block;
  margin-bottom: 14px;
  color: #00529f;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
}

.treatment-plan-card h3 {
  margin-bottom: 16px;
  color: #1f3144;
  font-size: 22px;
  line-height: 1.5;
}

.treatment-plan-card p {
  color: #667789;
  line-height: 1.9;
}

@media (max-width: 1024px) {
  .treatment-planning__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .treatment-planning {
    padding: 90px 0;
  }

  .treatment-planning__head {
    margin-bottom: 50px;
  }

  .treatment-planning__visual {
    margin-bottom: 40px;
  }

  .treatment-planning__visual img {
    border-radius: 28px;
  }

  .treatment-planning__grid {
    grid-template-columns: 1fr;
  }

  .treatment-plan-card {
    padding: 28px 24px;
  }
}

/* TREATMENT EXPERIENCE */
.treatment-experience {
  padding: 140px 0;
  background: #fff;
}

.treatment-experience__inner {
  width: min(1200px, 90%);
  margin: auto;
}

.treatment-experience__head {
  margin: 0 auto 70px;
  text-align: center;
}

.treatment-experience__label {
  margin-bottom: 18px;
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.treatment-experience__head h2 {
  margin-bottom: 24px;
  color: #1f3144;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.45;
}

.treatment-experience__head p {
  color: #5b6c7d;
  line-height: 2;
}

.treatment-experience__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.treatment-experience-card {
  padding: 40px 30px;
  text-align: center;
  border-radius: 24px;
  background: #f8fafc;
  border: 1px solid rgba(0, 82, 159, 0.08);
}

.treatment-experience-card__icon {
  font-size: 34px;
  margin-bottom: 20px;
}

.treatment-experience-card h3 {
  margin-bottom: 16px;
  color: #1f3144;
  font-size: 22px;
}

.treatment-experience-card p {
  color: #667789;
  line-height: 1.9;
}

@media (max-width: 900px) {
  .treatment-experience {
    padding: 90px 0;
  }

  .treatment-experience__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .treatment-experience__grid {
    grid-template-columns: 1fr;
  }
}

/* CONSULTATION */
.treatment-consultation {
  padding: 140px 0;
  background: #f8fafc;
}

.treatment-consultation__inner {
  width: min(1200px, 90%);
  margin: auto;
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 70px;
  align-items: start;
}

.treatment-consultation__visual {
  position: sticky;
  top: 120px;
}

.treatment-consultation__visual img {
  width: 100%;
  display: block;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center;
  border-radius: 36px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.08);
}

.treatment-consultation__label {
  margin-bottom: 18px;
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.treatment-consultation__content h2 {
  margin-bottom: 24px;
  color: #1f3144;
  font-size: clamp(30px, 4vw, 36px);
  font-weight: 700;
  line-height: 1.4;
}

.treatment-consultation__lead {
  margin-bottom: 40px;
  color: #5b6c7d;
  line-height: 2;
}

.treatment-consultation__list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.treatment-consultation-item {
  padding: 28px 32px;
  background: #fff;
  border-radius: 24px;
  border: 1px solid rgba(0, 82, 159, 0.08);
  transition: 0.3s;
}

.treatment-consultation-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 15px 35px rgba(0, 82, 159, 0.08);
}

.treatment-consultation-item h3 {
  margin-bottom: 10px;
  color: #1f3144;
  font-size: 20px;
  line-height: 1.5;
}

.treatment-consultation-item p {
  color: #667789;
  line-height: 1.9;
}

@media (max-width: 900px) {
  .treatment-consultation {
    padding: 90px 0;
  }

  .treatment-consultation__inner {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .treatment-consultation__visual {
    position: static;
  }

  .treatment-consultation__visual img {
    aspect-ratio: 16 / 10;
    border-radius: 28px;
  }
}

/* WHY QBI WORLD */
.treatment-strength {
  padding: 140px 0;
  background: #fff;
}

.treatment-strength__inner {
  width: min(1100px, 90%);
  margin: auto;
}

.treatment-strength__head {
  margin: 0 auto 80px;
  text-align: center;
}

.treatment-strength__label {
  margin-bottom: 18px;
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.treatment-strength__head h2 {
  margin-bottom: 24px;
  color: #1f3144;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.45;
}

.treatment-strength__head p {
  color: #5b6c7d;
  line-height: 2;
}

.treatment-strength__timeline {
  position: relative;
}

.treatment-strength__timeline::before {
  content: "";
  position: absolute;
  left: 35px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgba(0, 82, 159, 0.12);
}

.treatment-strength-item {
  position: relative;
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 40px;
  padding-bottom: 60px;
}

.treatment-strength-item:last-child {
  padding-bottom: 0;
}

.treatment-strength-item__num {
  position: relative;
  z-index: 2;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: #00529f;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.treatment-strength-item__content {
  padding-top: 10px;
}

.treatment-strength-item__content span {
  display: block;
  margin-bottom: 12px;
  color: #00529f;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.treatment-strength-item__content h3 {
  margin-bottom: 14px;
  color: #1f3144;
  font-size: 28px;
  line-height: 1.4;
}

.treatment-strength-item__content p {
  color: #667789;
  line-height: 2;
}

@media (max-width: 768px) {
  .treatment-strength {
    padding: 90px 0;
  }

  .treatment-strength__head {
    margin-bottom: 50px;
  }

  .treatment-strength-item {
    grid-template-columns: 60px 1fr;
    gap: 20px;
  }

  .treatment-strength-item__num {
    width: 60px;
    height: 60px;
    font-size: 16px;
  }

  .treatment-strength__timeline::before {
    left: 29px;
  }

  .treatment-strength-item__content h3 {
    font-size: 22px;
  }
}

/* CTA */
.treatment-cta {
  position: relative;
  overflow: hidden;
  padding: 120px 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.1)),
    url("../../assets/img/lineup/haircare/treatment/cta-bg.webp");
  background-size: cover;
  background-position: center;
}

.treatment-cta__inner {
  width: min(900px, 90%);
  margin: auto;
  text-align: center;
  padding: 60px 30px;
  border-radius: 32px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 20px 50px rgba(0, 82, 159, 0.08);
}

.treatment-cta__label {
  margin-bottom: 16px;
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.treatment-cta h2 {
  margin-bottom: 24px;
  color: #1f3144;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.4;
}

.treatment-cta__text {
  max-width: 700px;
  margin: 0 auto 40px;
  color: #33485d;
  line-height: 2;
}

.treatment-cta__buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
}

.treatment-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 280px;
  padding: 16px 28px;
  border-radius: 999px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  transition: 0.3s;
}

.treatment-cta__btn:hover {
  transform: translateY(-3px);
}

.treatment-cta__btn--primary {
  background: #00529f;
  color: #fff;
}

.treatment-cta__btn--secondary {
  background: rgba(255, 255, 255, 0.9);
  color: #00529f;
}

@media (max-width: 768px) {
  .treatment-cta {
    padding: 90px 0;
  }

  .treatment-cta__inner {
    padding: 50px 24px;
  }

  .treatment-cta__buttons {
    flex-direction: column;
  }

  .treatment-cta__btn {
    width: 100%;
    min-width: auto;
  }
}

/* /lineup/petcare/shampoo/ */
/* =====================================================
       ① FV : 2カラムヒーロー
    ===================================================== */
.dd-fv {
  position: relative;
  overflow: hidden;
  padding: 170px 0 110px;
  background:
    radial-gradient(circle at 90% 20%, rgba(0, 82, 159, 0.07), transparent 35%),
    linear-gradient(135deg, #ffffff 0%, #f7fafc 55%, #eef5fa 100%);
}

.dd-fv::before {
  content: "";
  position: absolute;
  right: -140px;
  bottom: -140px;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: rgba(0, 82, 159, 0.05);
}

.dd-fv__inner {
  width: min(1200px, 90%);
  margin: auto;
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 70px;
  align-items: center;
  position: relative;
  z-index: 1;
}

.dd-fv__label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.dd-fv__label::before {
  content: "";
  width: 42px;
  height: 1px;
  background: #00529f;
}

.dd-fv__title {
  margin: 0;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.35;
  color: #1a2d3d;
  letter-spacing: 0.04em;
}

.dd-fv__lead {
  margin-top: 28px;
  font-size: 16px;
  line-height: 2;
  color: #506273;
}

.dd-fv__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 42px;
}

.dd-fv__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 260px;
  padding: 16px 28px;
  border-radius: 999px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  transition: 0.3s;
}

.dd-fv__btn:hover {
  transform: translateY(-3px);
}

.dd-fv__btn--primary {
  background: #00529f;
  color: #fff;
  box-shadow: 0 15px 35px rgba(0, 82, 159, 0.25);
}

.dd-fv__btn--secondary {
  background: #fff;
  color: #00529f;
  border: 1px solid rgba(0, 82, 159, 0.2);
}

.dd-fv__image {
  overflow: hidden;
  border-radius: 42px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.1);
}

.dd-fv__image img {
  width: 100%;
  display: block;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

@media (max-width: 900px) {
  .dd-fv {
    padding: 140px 0 80px;
  }

  .dd-fv__inner {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .dd-fv__buttons {
    flex-direction: column;
  }

  .dd-fv__btn {
    width: 100%;
    min-width: auto;
  }
}

/* =====================================================
       ② WHY PET DEODORANT : センター見出し + 事実訴求カード
    ===================================================== */
.dd-why {
  padding: 140px 0;
  background: #fff;
}

.dd-why__inner {
  width: min(1200px, 90%);
  margin: auto;
}

.dd-why__head {
  margin: 0 auto 70px;
  text-align: center;
}

.dd-why__label {
  margin-bottom: 18px;
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.dd-why h2 {
  margin-bottom: 26px;
  color: #1f3144;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.45;
}

.dd-why__lead {
  color: #5b6c7d;
  line-height: 2;
}

.dd-why__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.dd-why__card {
  padding: 48px 40px;
  background: #f8fafc;
  border-radius: 28px;
  position: relative;
}

.dd-why__card::before {
  content: "";
  display: block;
  width: 44px;
  height: 3px;
  margin-bottom: 28px;
  background: #00529f;
}

.dd-why__card h3 {
  margin-bottom: 16px;
  color: #1f3144;
  font-size: 22px;
  line-height: 1.5;
}

.dd-why__card p {
  color: #5b6c7d;
  line-height: 1.9;
  font-size: 15px;
}

@media (max-width: 900px) {
  .dd-why {
    padding: 90px 0;
  }

  .dd-why__grid {
    grid-template-columns: 1fr;
  }
}

/* =====================================================
       ③ PRODUCT PLANNING : センター見出し + 2×2 カードグリッド
    ===================================================== */
.dd-planning {
  padding: 140px 0;
  background: #f8fafc;
}

.dd-planning__inner {
  width: min(1200px, 90%);
  margin: auto;
}

.dd-planning__heading {
  margin: 0 auto 70px;
  text-align: center;
}

.dd-planning__label {
  margin-bottom: 18px;
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.dd-planning__heading h2 {
  margin-bottom: 22px;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.45;
  color: #1f3144;
}

.dd-planning__heading p {
  color: #5b6c7d;
  line-height: 2;
}

.dd-planning__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.dd-plan-card {
  padding: 52px 48px;
  background: #fff;
  border-radius: 28px;
  border: 1px solid rgba(0, 82, 159, 0.07);
  transition: 0.3s;
}

.dd-plan-card:hover {
  box-shadow: 0 24px 56px rgba(0, 82, 159, 0.09);
  transform: translateY(-5px);
}

.dd-plan-card > span {
  display: inline-block;
  margin-bottom: 22px;
  padding: 6px 16px;
  background: rgba(0, 82, 159, 0.07);
  color: #00529f;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  border-radius: 999px;
}

.dd-plan-card h3 {
  margin-bottom: 18px;
  color: #1f3144;
  font-size: 26px;
  line-height: 1.4;
}

.dd-plan-card p {
  color: #5b6c7d;
  line-height: 2;
  font-size: 15px;
}

@media (max-width: 768px) {
  .dd-planning {
    padding: 90px 0;
  }

  .dd-planning__grid {
    grid-template-columns: 1fr;
  }

  .dd-plan-card {
    padding: 40px 32px;
  }
}

/* =====================================================
       ④ SALES SCENE : フルブリード・スプリット
    ===================================================== */
.dd-scene {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 640px;
  overflow: hidden;
}

.dd-scene__visual {
  position: relative;
  overflow: hidden;
}

.dd-scene__visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.dd-scene__content {
  background: #fff;
  display: flex;
  align-items: center;
  padding: 80px clamp(40px, 8%, 110px);
}

.dd-scene__body {
  max-width: 560px;
}

.dd-scene__label {
  margin-bottom: 20px;
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.dd-scene h2 {
  margin-bottom: 32px;
  color: #1f3144;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.04em;
}

.dd-scene__lead {
  margin-bottom: 20px;
  color: #33485d;
  font-size: 17px;
  line-height: 2;
}

.dd-scene__body > p {
  color: #5b6c7d;
  line-height: 2;
}

.dd-scene__message {
  margin-top: 44px;
  padding-top: 26px;
  border-top: 1px solid rgba(0, 82, 159, 0.15);
}

.dd-scene__message > span {
  display: block;
  margin-bottom: 12px;
  color: #00529f;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.dd-scene__message > p {
  margin: 0;
  color: #1f3144;
  font-size: 17px;
  line-height: 1.9;
}

@media (max-width: 900px) {
  .dd-scene {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .dd-scene__visual {
    height: 320px;
    position: relative;
  }

  .dd-scene__content {
    padding: 60px 7%;
  }
}

/* =====================================================
       ⑤ CONSULTATION : エディトリアルリスト
    ===================================================== */
.dd-consultation {
  padding: 140px 0;
  background: #f8fafc;
}

.dd-consultation__inner {
  width: min(1200px, 90%);
  margin: auto;
}

.dd-consultation__head {
  margin: 0 auto;
  text-align: center;
}

.dd-consultation__label {
  margin-bottom: 18px;
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.dd-consultation h2 {
  margin-bottom: 26px;
  color: #1f3144;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.45;
}

.dd-consultation__lead {
  color: #5b6c7d;
  line-height: 2;
}

.dd-consultation__list {
  margin-top: 70px;
  border-top: 1px solid rgba(0, 82, 159, 0.12);
}

.dd-consultation__item {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 60px;
  padding: 44px 0;
  border-bottom: 1px solid rgba(0, 82, 159, 0.12);
  align-items: start;
  transition: background 0.2s;
}

.dd-consultation__item:hover {
  background: rgba(0, 82, 159, 0.02);
  margin: 0 -20px;
  padding-left: 20px;
  padding-right: 20px;
}

.dd-consultation__item h3 {
  color: #1f3144;
  font-size: 21px;
  line-height: 1.65;
}

.dd-consultation__item p {
  color: #5b6c7d;
  line-height: 2;
  padding-top: 3px;
}

@media (max-width: 768px) {
  .dd-consultation {
    padding: 90px 0;
  }

  .dd-consultation__item {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 36px 0;
  }

  .dd-consultation__item:hover {
    margin: 0;
    padding-left: 0;
    padding-right: 0;
  }
}

/* =====================================================
       ⑥ WHY QBI WORLD : タイムライン
    ===================================================== */
.dd-strength {
  padding: 140px 0;
  background: #fff;
}

.dd-strength__inner {
  width: min(1100px, 90%);
  margin: auto;
}

.dd-strength__head {
  margin: 0 auto 80px;
  text-align: center;
}

.dd-strength__label {
  margin-bottom: 18px;
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.dd-strength h2 {
  margin-bottom: 28px;
  color: #1f3144;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.45;
}

.dd-strength__head p {
  color: #5b6c7d;
  line-height: 2;
}

.dd-strength__timeline {
  position: relative;
  max-width: 900px;
  margin: auto;
}

.dd-strength__timeline::before {
  content: "";
  position: absolute;
  left: 32px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(0, 82, 159, 0.15);
}

.dd-step {
  position: relative;
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 40px;
  padding-bottom: 60px;
}

.dd-step:last-child {
  padding-bottom: 0;
}

.dd-step > span {
  position: relative;
  z-index: 2;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: #00529f;
  color: #fff;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 700;
}

.dd-step h3 {
  margin-bottom: 14px;
  color: #1f3144;
  font-size: 28px;
}

.dd-step p {
  color: #5b6c7d;
  line-height: 2;
}

@media (max-width: 768px) {
  .dd-strength {
    padding: 90px 0;
  }

  .dd-step {
    gap: 24px;
  }

  .dd-step h3 {
    font-size: 22px;
  }
}

/* =====================================================
       ⑧ CTA
    ===================================================== */
.dd-cta {
  position: relative;
  overflow: hidden;
  padding: 140px 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.18)),
    url("../../assets/img/lineup/petcare/deodorant/cta-bg.webp");
  background-size: cover;
  background-position: center;
}

.dd-cta__inner {
  width: min(900px, 90%);
  margin: auto;
  text-align: center;
  padding: 70px 40px;
  border-radius: 36px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 30px 70px rgba(0, 82, 159, 0.14);
}

.dd-cta__label {
  margin-bottom: 18px;
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.dd-cta h2 {
  margin-bottom: 26px;
  color: #1f3144;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.45;
}

.dd-cta__text {
  max-width: 720px;
  margin: 0 auto 42px;
  color: #42566a;
  line-height: 2;
}

.dd-cta__buttons {
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}

.dd-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 280px;
  padding: 18px 34px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  transition: 0.3s;
}

.dd-cta__btn--primary {
  background: #00529f;
  color: #fff;
}

.dd-cta__btn--primary:hover {
  transform: translateY(-3px);
}

.dd-cta__btn--secondary {
  background: rgba(255, 255, 255, 0.8);
  color: #00529f;
  border: 1px solid rgba(0, 82, 159, 0.18);
}

.dd-cta__btn--secondary:hover {
  background: #fff;
}

@media (max-width: 768px) {
  .dd-cta {
    padding: 100px 0;
  }

  .dd-cta__inner {
    padding: 50px 24px;
  }

  .dd-cta__btn {
    width: 100%;
    min-width: auto;
  }
}

/* /lineup/petcare/oral-care/ */
/* =====================================================
       ① FV : 2カラムヒーロー
    ===================================================== */
.oc-fv {
  position: relative;
  overflow: hidden;
  padding: 170px 0 110px;
  background:
    radial-gradient(circle at 90% 20%, rgba(0, 82, 159, 0.07), transparent 35%),
    linear-gradient(135deg, #ffffff 0%, #f7fafc 55%, #eef5fa 100%);
}

.oc-fv::before {
  content: "";
  position: absolute;
  right: -140px;
  bottom: -140px;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: rgba(0, 82, 159, 0.05);
}

.oc-fv__inner {
  width: min(1200px, 90%);
  margin: auto;
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 70px;
  align-items: center;
  position: relative;
  z-index: 1;
}

.oc-fv__label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.oc-fv__label::before {
  content: "";
  width: 42px;
  height: 1px;
  background: #00529f;
}

.oc-fv__title {
  margin: 0;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.35;
  color: #1a2d3d;
  letter-spacing: 0.04em;
}

.oc-fv__lead {
  margin-top: 28px;
  font-size: 16px;
  line-height: 2;
  color: #506273;
}

.oc-fv__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 42px;
}

.oc-fv__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 260px;
  padding: 16px 28px;
  border-radius: 999px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  transition: 0.3s;
}

.oc-fv__btn:hover {
  transform: translateY(-3px);
}

.oc-fv__btn--primary {
  background: #00529f;
  color: #fff;
  box-shadow: 0 15px 35px rgba(0, 82, 159, 0.25);
}

.oc-fv__btn--secondary {
  background: #fff;
  color: #00529f;
  border: 1px solid rgba(0, 82, 159, 0.2);
}

.oc-fv__image {
  overflow: hidden;
  border-radius: 42px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.1);
}

.oc-fv__image img {
  width: 100%;
  display: block;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

@media (max-width: 900px) {
  .oc-fv {
    padding: 140px 0 80px;
  }

  .oc-fv__inner {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .oc-fv__buttons {
    flex-direction: column;
  }

  .oc-fv__btn {
    width: 100%;
    min-width: auto;
  }
}

/* =====================================================
       ② WHY ORAL CARE : センター見出し + 事実訴求カード
    ===================================================== */
.oc-why {
  padding: 140px 0;
  background: #fff;
}

.oc-why__inner {
  width: min(1200px, 90%);
  margin: auto;
}

.oc-why__head {
  margin: 0 auto 70px;
  text-align: center;
}

.oc-why__label {
  margin-bottom: 18px;
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.oc-why h2 {
  margin-bottom: 26px;
  color: #1f3144;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.45;
}

.oc-why__lead {
  color: #5b6c7d;
  line-height: 2;
}

.oc-why__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.oc-why__card {
  padding: 48px 40px;
  background: #f8fafc;
  border-radius: 28px;
  position: relative;
}

.oc-why__card::before {
  content: "";
  display: block;
  width: 44px;
  height: 3px;
  margin-bottom: 28px;
  background: #00529f;
}

.oc-why__card h3 {
  margin-bottom: 16px;
  color: #1f3144;
  font-size: 22px;
  line-height: 1.5;
}

.oc-why__card p {
  color: #5b6c7d;
  line-height: 1.9;
  font-size: 15px;
}

@media (max-width: 900px) {
  .oc-why {
    padding: 90px 0;
  }

  .oc-why__grid {
    grid-template-columns: 1fr;
  }
}

/* =====================================================
       ③ MARKET OPPORTUNITY : ブランドブルーのフルカラーバンド
    ===================================================== */
.oc-market {
  padding: 130px 0;
  background: linear-gradient(135deg, #00529f 0%, #003a72 100%);
}

.oc-market__inner {
  width: min(1200px, 90%);
  margin: auto;
}

.oc-market__head {
  margin: 0 auto 70px;
  text-align: center;
}

.oc-market__label {
  margin-bottom: 18px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.oc-market h2 {
  margin-bottom: 26px;
  color: #fff;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.45;
}

.oc-market__lead {
  color: rgba(255, 255, 255, 0.8);
  line-height: 2;
}

.oc-market__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.oc-market__item {
  padding: 40px 36px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 24px;
}

.oc-market__item h3 {
  margin-bottom: 16px;
  color: #fff;
  font-size: 21px;
  line-height: 1.5;
}

.oc-market__item p {
  margin: 0;
  color: rgba(255, 255, 255, 0.76);
  font-size: 15px;
  line-height: 1.9;
}

@media (max-width: 900px) {
  .oc-market {
    padding: 90px 0;
  }

  .oc-market__grid {
    grid-template-columns: 1fr;
  }
}

/* =====================================================
       ④ PRODUCT PLANNING : センター見出し + 2×2 カードグリッド
    ===================================================== */
.oc-planning {
  padding: 140px 0;
  background: #f8fafc;
}

.oc-planning__inner {
  width: min(1200px, 90%);
  margin: auto;
}

.oc-planning__heading {
  margin: 0 auto 70px;
  text-align: center;
}

.oc-planning__label {
  margin-bottom: 18px;
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.oc-planning__heading h2 {
  margin-bottom: 22px;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.45;
  color: #1f3144;
}

.oc-planning__heading p {
  color: #5b6c7d;
  line-height: 2;
}

.oc-planning__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.oc-plan-card {
  padding: 52px 48px;
  background: #fff;
  border-radius: 28px;
  border: 1px solid rgba(0, 82, 159, 0.07);
  transition: 0.3s;
}

.oc-plan-card:hover {
  box-shadow: 0 24px 56px rgba(0, 82, 159, 0.09);
  transform: translateY(-5px);
}

.oc-plan-card > span {
  display: inline-block;
  margin-bottom: 22px;
  padding: 6px 16px;
  background: rgba(0, 82, 159, 0.07);
  color: #00529f;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  border-radius: 999px;
}

.oc-plan-card h3 {
  margin-bottom: 18px;
  color: #1f3144;
  font-size: 26px;
  line-height: 1.4;
}

.oc-plan-card p {
  color: #5b6c7d;
  line-height: 2;
  font-size: 15px;
}

@media (max-width: 768px) {
  .oc-planning {
    padding: 90px 0;
  }

  .oc-planning__grid {
    grid-template-columns: 1fr;
  }

  .oc-plan-card {
    padding: 40px 32px;
  }
}

/* =====================================================
       ⑤ BRAND CONCEPT : フルブリード・スプリット
    ===================================================== */
.oc-brand {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 640px;
  overflow: hidden;
}

.oc-brand__visual {
  position: relative;
  overflow: hidden;
}

.oc-brand__visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.oc-brand__content {
  background: #fff;
  display: flex;
  align-items: center;
  padding: 80px clamp(40px, 8%, 110px);
}

.oc-brand__body {
  max-width: 560px;
}

.oc-brand__label {
  margin-bottom: 20px;
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.oc-brand h2 {
  margin-bottom: 32px;
  color: #1f3144;
  font-size: clamp(26px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.04em;
}

.oc-brand__lead {
  margin-bottom: 20px;
  color: #33485d;
  font-size: 17px;
  line-height: 2;
}

.oc-brand__body > p {
  color: #5b6c7d;
  line-height: 2;
}

.oc-brand__message {
  margin-top: 44px;
  padding-top: 26px;
  border-top: 1px solid rgba(0, 82, 159, 0.15);
}

.oc-brand__message > span {
  display: block;
  margin-bottom: 12px;
  color: #00529f;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.oc-brand__message > p {
  margin: 0;
  color: #1f3144;
  font-size: 17px;
  line-height: 1.9;
}

@media (max-width: 900px) {
  .oc-brand {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .oc-brand__visual {
    height: 320px;
    position: relative;
  }

  .oc-brand__content {
    padding: 60px 7%;
  }
}

/* =====================================================
       ⑥ CONSULTATION : エディトリアルリスト
    ===================================================== */
.oc-consultation {
  padding: 140px 0;
  background: #f8fafc;
}

.oc-consultation__inner {
  width: min(1200px, 90%);
  margin: auto;
}

.oc-consultation__head {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.oc-consultation__label {
  margin-bottom: 18px;
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.oc-consultation h2 {
  margin-bottom: 26px;
  color: #1f3144;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.45;
}

.oc-consultation__lead {
  color: #5b6c7d;
  line-height: 2;
}

.oc-consultation__list {
  margin-top: 70px;
  border-top: 1px solid rgba(0, 82, 159, 0.12);
}

.oc-consultation__item {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 60px;
  padding: 44px 0;
  border-bottom: 1px solid rgba(0, 82, 159, 0.12);
  align-items: start;
  transition: background 0.2s;
}

.oc-consultation__item:hover {
  background: rgba(0, 82, 159, 0.02);
  margin: 0 -20px;
  padding-left: 20px;
  padding-right: 20px;
}

.oc-consultation__item h3 {
  color: #1f3144;
  font-size: 21px;
  line-height: 1.65;
}

.oc-consultation__item p {
  color: #5b6c7d;
  line-height: 2;
  padding-top: 3px;
}

@media (max-width: 768px) {
  .oc-consultation {
    padding: 90px 0;
  }

  .oc-consultation__item {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 36px 0;
  }

  .oc-consultation__item:hover {
    margin: 0;
    padding-left: 0;
    padding-right: 0;
  }
}

/* =====================================================
       ⑦ WHY QBI WORLD : タイムライン
    ===================================================== */
.oc-strength {
  padding: 140px 0;
  background: #fff;
}

.oc-strength__inner {
  width: min(1100px, 90%);
  margin: auto;
}

.oc-strength__head {
  margin: 0 auto 80px;
  text-align: center;
}

.oc-strength__label {
  margin-bottom: 18px;
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.oc-strength h2 {
  margin-bottom: 28px;
  color: #1f3144;
  font-size: clamp(26px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.45;
}

.oc-strength__head p {
  color: #5b6c7d;
  line-height: 2;
}

.oc-strength__timeline {
  position: relative;
  max-width: 900px;
  margin: auto;
}

.oc-strength__timeline::before {
  content: "";
  position: absolute;
  left: 32px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(0, 82, 159, 0.15);
}

.oc-step {
  position: relative;
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 40px;
  padding-bottom: 60px;
}

.oc-step:last-child {
  padding-bottom: 0;
}

.oc-step > span {
  position: relative;
  z-index: 2;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: #00529f;
  color: #fff;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 700;
}

.oc-step h3 {
  margin-bottom: 14px;
  color: #1f3144;
  font-size: 28px;
}

.oc-step p {
  color: #5b6c7d;
  line-height: 2;
}

@media (max-width: 768px) {
  .oc-strength {
    padding: 90px 0;
  }

  .oc-step {
    gap: 24px;
  }

  .oc-step h3 {
    font-size: 22px;
  }
}

/* =====================================================
       ⑨ CTA
    ===================================================== */
.oc-cta {
  position: relative;
  overflow: hidden;
  padding: 140px 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.18)),
    url("../../assets/img/lineup/petcare/oral-care/cta-bg.webp");
  background-size: cover;
  background-position: center;
}

.oc-cta__inner {
  width: min(900px, 90%);
  margin: auto;
  text-align: center;
  padding: 70px 40px;
  border-radius: 36px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 30px 70px rgba(0, 82, 159, 0.14);
}

.oc-cta__label {
  margin-bottom: 18px;
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.oc-cta h2 {
  margin-bottom: 26px;
  color: #1f3144;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.45;
}

.oc-cta__text {
  max-width: 720px;
  margin: 0 auto 42px;
  color: #42566a;
  line-height: 2;
}

.oc-cta__buttons {
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}

.oc-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 280px;
  padding: 18px 34px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  transition: 0.3s;
}

.oc-cta__btn--primary {
  background: #00529f;
  color: #fff;
}

.oc-cta__btn--primary:hover {
  transform: translateY(-3px);
}

.oc-cta__btn--secondary {
  background: rgba(255, 255, 255, 0.8);
  color: #00529f;
  border: 1px solid rgba(0, 82, 159, 0.18);
}

.oc-cta__btn--secondary:hover {
  background: #fff;
}

@media (max-width: 768px) {
  .oc-cta {
    padding: 100px 0;
  }

  .oc-cta__inner {
    padding: 50px 24px;
  }

  .oc-cta__btn {
    width: 100%;
    min-width: auto;
  }
}

/* /lineup/petcare/oral-care/ */
/* =====================================================
       ① FV : 2カラムヒーロー
    ===================================================== */
.ps-fv {
  position: relative;
  overflow: hidden;
  padding: 170px 0 110px;
  background:
    radial-gradient(circle at 90% 20%, rgba(0, 82, 159, 0.07), transparent 35%),
    linear-gradient(135deg, #ffffff 0%, #f7fafc 55%, #eef5fa 100%);
}

.ps-fv::before {
  content: "";
  position: absolute;
  right: -140px;
  bottom: -140px;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: rgba(0, 82, 159, 0.05);
}

.ps-fv__inner {
  width: min(1200px, 90%);
  margin: auto;
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 70px;
  align-items: center;
  position: relative;
  z-index: 1;
}

.ps-fv__label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.ps-fv__label::before {
  content: "";
  width: 42px;
  height: 1px;
  background: #00529f;
}

.ps-fv__title {
  margin: 0;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.35;
  color: #1a2d3d;
  letter-spacing: 0.04em;
}

.ps-fv__lead {
  margin-top: 28px;
  font-size: 16px;
  line-height: 2;
  color: #506273;
}

.ps-fv__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 42px;
}

.ps-fv__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 260px;
  padding: 16px 28px;
  border-radius: 999px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  transition: 0.3s;
}

.ps-fv__btn:hover {
  transform: translateY(-3px);
}

.ps-fv__btn--primary {
  background: #00529f;
  color: #fff;
  box-shadow: 0 15px 35px rgba(0, 82, 159, 0.25);
}

.ps-fv__btn--secondary {
  background: #fff;
  color: #00529f;
  border: 1px solid rgba(0, 82, 159, 0.2);
}

.ps-fv__image {
  overflow: hidden;
  border-radius: 42px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.1);
}

.ps-fv__image img {
  width: 100%;
  display: block;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

@media (max-width: 900px) {
  .ps-fv {
    padding: 140px 0 80px;
  }

  .ps-fv__inner {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .ps-fv__buttons {
    flex-direction: column;
  }

  .ps-fv__btn {
    width: 100%;
    min-width: auto;
  }
}

/* =====================================================
       ② BRAND : フルブリード・スプリット
       ― 内側コンテナを持たず、画像がビューポート端まで到達
    ===================================================== */
.ps-brand {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 640px;
  overflow: hidden;
}

.ps-brand__visual {
  position: relative;
  overflow: hidden;
}

.ps-brand__visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ps-brand__content {
  background: #fff;
  display: flex;
  align-items: center;
  padding: 80px clamp(40px, 8%, 110px);
}

.ps-brand__body {
  max-width: 560px;
}

.ps-brand__label {
  margin-bottom: 20px;
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.ps-brand h2 {
  margin-bottom: 32px;
  color: #1f3144;
  font-size: clamp(26px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.04em;
}

.ps-brand__lead {
  margin-bottom: 20px;
  color: #33485d;
  font-size: 17px;
  line-height: 2;
}

.ps-brand__body > p {
  color: #5b6c7d;
  line-height: 2;
}

.ps-brand__message {
  margin-top: 44px;
  padding-top: 26px;
  border-top: 1px solid rgba(0, 82, 159, 0.15);
}

.ps-brand__message > span {
  display: block;
  margin-bottom: 12px;
  color: #00529f;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.ps-brand__message > p {
  margin: 0;
  color: #1f3144;
  font-size: 17px;
  line-height: 1.9;
}

@media (max-width: 900px) {
  .ps-brand {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .ps-brand__visual {
    height: 320px;
    position: relative;
  }

  .ps-brand__content {
    padding: 60px 7%;
  }
}

/* =====================================================
       ③ PRODUCT PLANNING : センター見出し + 2×2 カードグリッド
    ===================================================== */
.ps-planning {
  padding: 140px 0;
  background: #f8fafc;
}

.ps-planning__inner {
  width: min(1200px, 90%);
  margin: auto;
}

.ps-planning__heading {
  margin: 0 auto 70px;
  text-align: center;
}

.ps-planning__label {
  margin-bottom: 18px;
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.ps-planning__heading h2 {
  margin-bottom: 22px;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.45;
  color: #1f3144;
}

.ps-planning__heading p {
  color: #5b6c7d;
  line-height: 2;
}

.ps-planning__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.ps-plan-card {
  padding: 52px 48px;
  background: #fff;
  border-radius: 28px;
  border: 1px solid rgba(0, 82, 159, 0.07);
  transition: 0.3s;
}

.ps-plan-card:hover {
  box-shadow: 0 24px 56px rgba(0, 82, 159, 0.09);
  transform: translateY(-5px);
}

.ps-plan-card > span {
  display: inline-block;
  margin-bottom: 22px;
  padding: 6px 16px;
  background: rgba(0, 82, 159, 0.07);
  color: #00529f;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  border-radius: 999px;
}

.ps-plan-card h3 {
  margin-bottom: 18px;
  color: #1f3144;
  font-size: 26px;
  line-height: 1.4;
}

.ps-plan-card p {
  color: #5b6c7d;
  line-height: 2;
  font-size: 15px;
}

@media (max-width: 768px) {
  .ps-planning {
    padding: 90px 0;
  }

  .ps-planning__grid {
    grid-template-columns: 1fr;
  }

  .ps-plan-card {
    padding: 40px 32px;
  }
}

/* =====================================================
       ④ EXPERIENCE : センター見出し + 3カラム横並び
    ===================================================== */
.ps-experience {
  padding: 140px 0;
  background: #fff;
}

.ps-experience__inner {
  width: min(1200px, 90%);
  margin: auto;
}

.ps-experience__head {
  margin: 0 auto 80px;
  text-align: center;
}

.ps-experience__label {
  margin-bottom: 18px;
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.ps-experience h2 {
  margin-bottom: 26px;
  color: #1f3144;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.04em;
}

.ps-experience__lead {
  color: #4f6275;
  font-size: 16px;
  line-height: 2;
}

.ps-experience__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(0, 82, 159, 0.12);
}

.ps-experience__col {
  position: relative;
  padding: 56px 48px 56px 0;
  border-right: 1px solid rgba(0, 82, 159, 0.12);
}

.ps-experience__col:first-child {
  padding-left: 0;
}

.ps-experience__col:last-child {
  border-right: none;
  padding-right: 0;
  padding-left: 48px;
}

.ps-experience__col:not(:first-child):not(:last-child) {
  padding-left: 48px;
}

.ps-experience__col::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 44px;
  height: 3px;
  background: #00529f;
}

.ps-experience__col > span {
  display: block;
  margin-bottom: 20px;
  color: #00529f;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
}

.ps-experience__col h3 {
  margin-bottom: 20px;
  color: #1f3144;
  font-size: 28px;
  line-height: 1.4;
}

.ps-experience__col p {
  color: #5b6c7d;
  font-size: 15px;
  line-height: 2;
}

@media (max-width: 900px) {
  .ps-experience {
    padding: 90px 0;
  }

  .ps-experience__cols {
    grid-template-columns: 1fr;
  }

  .ps-experience__col,
  .ps-experience__col:first-child,
  .ps-experience__col:last-child,
  .ps-experience__col:not(:first-child):not(:last-child) {
    padding: 44px 0;
    border-right: none;
    border-bottom: 1px solid rgba(0, 82, 159, 0.12);
  }

  .ps-experience__col:last-child {
    border-bottom: none;
  }
}

/* =====================================================
       ⑤ CONSULTATION : エディトリアルリスト
       ― 各行が「課題見出し（左） ／ 説明（右）」の横組み
    ===================================================== */
.ps-consultation {
  padding: 140px 0;
  background: #f8fafc;
}

.ps-consultation__inner {
  width: min(1200px, 90%);
  margin: auto;
}

.ps-consultation__head {
  margin: 0 auto;
  text-align: center;
}

.ps-consultation__label {
  margin-bottom: 18px;
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.ps-consultation h2 {
  margin-bottom: 26px;
  color: #1f3144;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.45;
}

.ps-consultation__lead {
  color: #5b6c7d;
  line-height: 2;
}

.ps-consultation__list {
  margin-top: 70px;
  border-top: 1px solid rgba(0, 82, 159, 0.12);
}

.ps-consultation__item {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 60px;
  padding: 44px 0;
  border-bottom: 1px solid rgba(0, 82, 159, 0.12);
  align-items: start;
  transition: background 0.2s;
}

.ps-consultation__item:hover {
  background: rgba(0, 82, 159, 0.02);
  margin: 0 -20px;
  padding-left: 20px;
  padding-right: 20px;
}

.ps-consultation__item h3 {
  color: #1f3144;
  font-size: 21px;
  line-height: 1.65;
}

.ps-consultation__item p {
  color: #5b6c7d;
  line-height: 2;
  padding-top: 3px;
}

@media (max-width: 768px) {
  .ps-consultation {
    padding: 90px 0;
  }

  .ps-consultation__item {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 36px 0;
  }

  .ps-consultation__item:hover {
    margin: 0;
    padding-left: 0;
    padding-right: 0;
  }
}

/* =====================================================
       ⑥ WHY QBI WORLD : タイムライン
    ===================================================== */
.ps-strength {
  padding: 140px 0;
  background: #fff;
}

.ps-strength__inner {
  width: min(1100px, 90%);
  margin: auto;
}

.ps-strength__head {
  margin: 0 auto 80px;
  text-align: center;
}

.ps-strength__label {
  margin-bottom: 18px;
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.ps-strength h2 {
  margin-bottom: 28px;
  color: #1f3144;
  font-size: clamp(24px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.45;
}

.ps-strength__head p {
  color: #5b6c7d;
  line-height: 2;
}

.ps-strength__timeline {
  position: relative;
  max-width: 900px;
  margin: auto;
}

.ps-strength__timeline::before {
  content: "";
  position: absolute;
  left: 32px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(0, 82, 159, 0.15);
}

.ps-step {
  position: relative;
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 40px;
  padding-bottom: 60px;
}

.ps-step:last-child {
  padding-bottom: 0;
}

.ps-step > span {
  position: relative;
  z-index: 2;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: #00529f;
  color: #fff;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 700;
}

.ps-step h3 {
  margin-bottom: 14px;
  color: #1f3144;
  font-size: 28px;
}

.ps-step p {
  color: #5b6c7d;
  line-height: 2;
}

@media (max-width: 768px) {
  .ps-strength {
    padding: 90px 0;
  }

  .ps-step {
    gap: 24px;
  }

  .ps-step h3 {
    font-size: 22px;
  }
}

/* =====================================================
       ⑧ CTA
    ===================================================== */
.ps-cta {
  position: relative;
  overflow: hidden;
  padding: 140px 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.18)),
    url("../../assets/img/lineup/petcare/shampoo/cta-bg.webp");
  background-size: cover;
  background-position: center;
}

.ps-cta__inner {
  width: min(900px, 90%);
  margin: auto;
  text-align: center;
  padding: 70px 40px;
  border-radius: 36px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 30px 70px rgba(0, 82, 159, 0.14);
}

.ps-cta__label {
  margin-bottom: 18px;
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.ps-cta h2 {
  margin-bottom: 26px;
  color: #1f3144;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.45;
}

.ps-cta__text {
  max-width: 720px;
  margin: 0 auto 42px;
  color: #42566a;
  line-height: 2;
}

.ps-cta__buttons {
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}

.ps-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 280px;
  padding: 18px 34px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  transition: 0.3s;
}

.ps-cta__btn--primary {
  background: #00529f;
  color: #fff;
}

.ps-cta__btn--primary:hover {
  transform: translateY(-3px);
}

.ps-cta__btn--secondary {
  background: rgba(255, 255, 255, 0.8);
  color: #00529f;
  border: 1px solid rgba(0, 82, 159, 0.18);
}

.ps-cta__btn--secondary:hover {
  background: #fff;
}

@media (max-width: 768px) {
  .ps-cta {
    padding: 100px 0;
  }

  .ps-cta__inner {
    padding: 50px 24px;
  }

  .ps-cta__btn {
    width: 100%;
    min-width: auto;
  }
}

/* /lineup/petcare/skin-care/ */
/* =====================================================
       ① FV : 2カラムヒーロー
    ===================================================== */
.sc-fv {
  position: relative;
  overflow: hidden;
  padding: 170px 0 110px;
  background:
    radial-gradient(circle at 90% 20%, rgba(0, 82, 159, 0.07), transparent 35%),
    linear-gradient(135deg, #ffffff 0%, #f7fafc 55%, #eef5fa 100%);
}

.sc-fv::before {
  content: "";
  position: absolute;
  right: -140px;
  bottom: -140px;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: rgba(0, 82, 159, 0.05);
}

.sc-fv__inner {
  width: min(1200px, 90%);
  margin: auto;
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 70px;
  align-items: center;
  position: relative;
  z-index: 1;
}

.sc-fv__label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.sc-fv__label::before {
  content: "";
  width: 42px;
  height: 1px;
  background: #00529f;
}

.sc-fv__title {
  margin: 0;
  font-size: clamp(26px, 4vw, 36px);
  font-weight: 700;
  line-height: 1.35;
  color: #1a2d3d;
  letter-spacing: 0.04em;
}

.sc-fv__lead {
  margin-top: 28px;
  font-size: 16px;
  line-height: 2;
  color: #506273;
}

.sc-fv__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 42px;
}

.sc-fv__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 260px;
  padding: 16px 28px;
  border-radius: 999px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  transition: 0.3s;
}

.sc-fv__btn:hover {
  transform: translateY(-3px);
}

.sc-fv__btn--primary {
  background: #00529f;
  color: #fff;
  box-shadow: 0 15px 35px rgba(0, 82, 159, 0.25);
}

.sc-fv__btn--secondary {
  background: #fff;
  color: #00529f;
  border: 1px solid rgba(0, 82, 159, 0.2);
}

.sc-fv__image {
  overflow: hidden;
  border-radius: 42px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.1);
}

.sc-fv__image img {
  width: 100%;
  display: block;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

@media (max-width: 900px) {
  .sc-fv {
    padding: 140px 0 80px;
  }

  .sc-fv__inner {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .sc-fv__buttons {
    flex-direction: column;
  }

  .sc-fv__btn {
    width: 100%;
    min-width: auto;
  }
}

/* =====================================================
       ② WHY PET SKINCARE : センター見出し + 事実訴求カード
    ===================================================== */
.sc-why {
  padding: 140px 0;
  background: #fff;
}

.sc-why__inner {
  width: min(1200px, 90%);
  margin: auto;
}

.sc-why__head {
  margin: 0 auto 70px;
  text-align: center;
}

.sc-why__label {
  margin-bottom: 18px;
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.sc-why h2 {
  margin-bottom: 26px;
  color: #1f3144;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.45;
}

.sc-why__lead {
  color: #5b6c7d;
  line-height: 2;
}

.sc-why__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.sc-why__card {
  padding: 48px 40px;
  background: #f8fafc;
  border-radius: 28px;
  position: relative;
}

.sc-why__card::before {
  content: "";
  display: block;
  width: 44px;
  height: 3px;
  margin-bottom: 28px;
  background: #00529f;
}

.sc-why__card h3 {
  margin-bottom: 16px;
  color: #1f3144;
  font-size: 22px;
  line-height: 1.5;
}

.sc-why__card p {
  color: #5b6c7d;
  line-height: 1.9;
  font-size: 15px;
}

@media (max-width: 900px) {
  .sc-why {
    padding: 90px 0;
  }

  .sc-why__grid {
    grid-template-columns: 1fr;
  }
}

/* =====================================================
       ③ PRODUCT PLANNING : センター見出し + 2×2 カードグリッド
    ===================================================== */
.sc-planning {
  padding: 140px 0;
  background: #f8fafc;
}

.sc-planning__inner {
  width: min(1200px, 90%);
  margin: auto;
}

.sc-planning__heading {
  margin: 0 auto 70px;
  text-align: center;
}

.sc-planning__label {
  margin-bottom: 18px;
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.sc-planning__heading h2 {
  margin-bottom: 22px;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.45;
  color: #1f3144;
}

.sc-planning__heading p {
  color: #5b6c7d;
  line-height: 2;
}

.sc-planning__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.sc-plan-card {
  padding: 52px 48px;
  background: #fff;
  border-radius: 28px;
  border: 1px solid rgba(0, 82, 159, 0.07);
  transition: 0.3s;
}

.sc-plan-card:hover {
  box-shadow: 0 24px 56px rgba(0, 82, 159, 0.09);
  transform: translateY(-5px);
}

.sc-plan-card > span {
  display: inline-block;
  margin-bottom: 22px;
  padding: 6px 16px;
  background: rgba(0, 82, 159, 0.07);
  color: #00529f;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  border-radius: 999px;
}

.sc-plan-card h3 {
  margin-bottom: 18px;
  color: #1f3144;
  font-size: 26px;
  line-height: 1.4;
}

.sc-plan-card p {
  color: #5b6c7d;
  line-height: 2;
  font-size: 15px;
}

@media (max-width: 768px) {
  .sc-planning {
    padding: 90px 0;
  }

  .sc-planning__grid {
    grid-template-columns: 1fr;
  }

  .sc-plan-card {
    padding: 40px 32px;
  }
}

/* =====================================================
       ④ TARGET BRAND : フルブリード・スプリット
    ===================================================== */
.sc-target {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 640px;
  overflow: hidden;
}

.sc-target__visual {
  position: relative;
  overflow: hidden;
}

.sc-target__visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sc-target__content {
  background: #fff;
  display: flex;
  align-items: center;
  padding: 80px clamp(40px, 8%, 110px);
}

.sc-target__body {
  max-width: 560px;
}

.sc-target__label {
  margin-bottom: 20px;
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.sc-target h2 {
  margin-bottom: 32px;
  color: #1f3144;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.04em;
}

.sc-target__lead {
  margin-bottom: 20px;
  color: #33485d;
  font-size: 17px;
  line-height: 2;
}

.sc-target__body > p {
  color: #5b6c7d;
  line-height: 2;
}

.sc-target__message {
  margin-top: 44px;
  padding-top: 26px;
  border-top: 1px solid rgba(0, 82, 159, 0.15);
}

.sc-target__message > span {
  display: block;
  margin-bottom: 12px;
  color: #00529f;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.sc-target__message > p {
  margin: 0;
  color: #1f3144;
  font-size: 17px;
  line-height: 1.9;
}

@media (max-width: 900px) {
  .sc-target {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .sc-target__visual {
    height: 320px;
    position: relative;
  }

  .sc-target__content {
    padding: 60px 7%;
  }
}

/* =====================================================
       ⑤ CONSULTATION : エディトリアルリスト
    ===================================================== */
.sc-consultation {
  padding: 140px 0;
  background: #f8fafc;
}

.sc-consultation__inner {
  width: min(1200px, 90%);
  margin: auto;
}

.sc-consultation__head {
  margin: 0 auto;
  text-align: center;
}

.sc-consultation__label {
  margin-bottom: 18px;
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.sc-consultation h2 {
  margin-bottom: 26px;
  color: #1f3144;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.45;
}

.sc-consultation__lead {
  color: #5b6c7d;
  line-height: 2;
}

.sc-consultation__list {
  margin-top: 70px;
  border-top: 1px solid rgba(0, 82, 159, 0.12);
}

.sc-consultation__item {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 60px;
  padding: 44px 0;
  border-bottom: 1px solid rgba(0, 82, 159, 0.12);
  align-items: start;
  transition: background 0.2s;
}

.sc-consultation__item:hover {
  background: rgba(0, 82, 159, 0.02);
  margin: 0 -20px;
  padding-left: 20px;
  padding-right: 20px;
}

.sc-consultation__item h3 {
  color: #1f3144;
  font-size: 21px;
  line-height: 1.65;
}

.sc-consultation__item p {
  color: #5b6c7d;
  line-height: 2;
  padding-top: 3px;
}

@media (max-width: 768px) {
  .sc-consultation {
    padding: 90px 0;
  }

  .sc-consultation__item {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 36px 0;
  }

  .sc-consultation__item:hover {
    margin: 0;
    padding-left: 0;
    padding-right: 0;
  }
}

/* =====================================================
       ⑥ WHY QBI WORLD : タイムライン
    ===================================================== */
.sc-strength {
  padding: 140px 0;
  background: #fff;
}

.sc-strength__inner {
  width: min(1100px, 90%);
  margin: auto;
}

.sc-strength__head {
  margin: 0 auto 80px;
  text-align: center;
}

.sc-strength__label {
  margin-bottom: 18px;
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.sc-strength h2 {
  margin-bottom: 28px;
  color: #1f3144;
  font-size: clamp(26px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.45;
}

.sc-strength__head p {
  color: #5b6c7d;
  line-height: 2;
}

.sc-strength__timeline {
  position: relative;
  max-width: 900px;
  margin: auto;
}

.sc-strength__timeline::before {
  content: "";
  position: absolute;
  left: 32px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(0, 82, 159, 0.15);
}

.sc-step {
  position: relative;
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 40px;
  padding-bottom: 60px;
}

.sc-step:last-child {
  padding-bottom: 0;
}

.sc-step > span {
  position: relative;
  z-index: 2;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: #00529f;
  color: #fff;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 700;
}

.sc-step h3 {
  margin-bottom: 14px;
  color: #1f3144;
  font-size: 28px;
}

.sc-step p {
  color: #5b6c7d;
  line-height: 2;
}

@media (max-width: 768px) {
  .sc-strength {
    padding: 90px 0;
  }

  .sc-step {
    gap: 24px;
  }

  .sc-step h3 {
    font-size: 22px;
  }
}

/* =====================================================
       ⑧ CTA
    ===================================================== */
.sc-cta {
  position: relative;
  overflow: hidden;
  padding: 140px 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.18)),
    url("../../assets/img/lineup/petcare/skin-care/cta-bg.webp");
  background-size: cover;
  background-position: center;
}

.sc-cta__inner {
  width: min(900px, 90%);
  margin: auto;
  text-align: center;
  padding: 70px 40px;
  border-radius: 36px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 30px 70px rgba(0, 82, 159, 0.14);
}

.sc-cta__label {
  margin-bottom: 18px;
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.sc-cta h2 {
  margin-bottom: 26px;
  color: #1f3144;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.45;
}

.sc-cta__text {
  max-width: 720px;
  margin: 0 auto 42px;
  color: #42566a;
  line-height: 2;
}

.sc-cta__buttons {
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}

.sc-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 280px;
  padding: 18px 34px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  transition: 0.3s;
}

.sc-cta__btn--primary {
  background: #00529f;
  color: #fff;
}

.sc-cta__btn--primary:hover {
  transform: translateY(-3px);
}

.sc-cta__btn--secondary {
  background: rgba(255, 255, 255, 0.8);
  color: #00529f;
  border: 1px solid rgba(0, 82, 159, 0.18);
}

.sc-cta__btn--secondary:hover {
  background: #fff;
}

@media (max-width: 768px) {
  .sc-cta {
    padding: 100px 0;
  }

  .sc-cta__inner {
    padding: 50px 24px;
  }

  .sc-cta__btn {
    width: 100%;
    min-width: auto;
  }
}

/* /lineup/healthfood/ */
/* FV */
.healthfood-fv {
  position: relative;
  overflow: hidden;
  min-height: 760px;
  display: flex;
  align-items: center;
}

.healthfood-fv__bg {
  position: absolute;
  inset: 0;
}

.healthfood-fv__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.healthfood-fv__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 255, 255, 0.85) 35%,
    rgba(255, 255, 255, 0.15) 100%
  );
}

.healthfood-fv__inner {
  position: relative;
  z-index: 2;
  width: min(1200px, 90%);
  margin: auto;
  padding: 180px 0 120px;
}

.healthfood-fv__label {
  color: #00529f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.15em;
  margin-bottom: 20px;
}

.healthfood-fv h1 {
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.15;
  color: #1c2539;
  margin-bottom: 24px;
}

.healthfood-fv__lead {
  max-width: 640px;
  font-size: 18px;
  line-height: 2;
  color: #555;
}

.healthfood-fv__actions {
  display: flex;
  gap: 16px;
  margin-top: 40px;
}

.healthfood-fv::after {
  content: "SUPPLEMENT";
  position: absolute;
  right: 40px;
  bottom: 20px;
  font-size: clamp(90px, 14vw, 240px);
  font-weight: 800;
  color: rgba(0, 82, 159, 0.05);
  letter-spacing: 0.04em;
  pointer-events: none;
}

.healthfood-fv__actions {
  display: flex;
  gap: 16px;
  margin-top: 40px;
  flex-wrap: wrap;
}

.healthfood-fv__actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 220px;
  height: 60px;
  padding: 0 32px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: 0.3s;
}

.healthfood-fv__actions .btn-primary {
  background: #00529f;
  color: #fff;
  box-shadow: 0 10px 30px rgba(0, 82, 159, 0.18);
}

.healthfood-fv__actions .btn-primary:hover {
  transform: translateY(-3px);
  background: #003f7b;
  color: #fff;
}

@media (max-width: 768px) {
  .healthfood-fv__actions {
    flex-direction: column;
  }

  .healthfood-fv__actions a {
    width: 100%;
  }
}

/* HEALTH FOOD BRAND PLANNING */
.healthfood-planning {
  padding: 120px 0;
  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
}

.healthfood-planning__inner {
  width: min(1200px, 90%);
  margin: auto;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 70px;
  align-items: start;
}

.healthfood-planning__image {
  position: sticky;
  top: 120px;
  overflow: hidden;
  border-radius: 32px;
  box-shadow: 0 24px 60px rgba(0, 82, 159, 0.1);
}

.healthfood-planning__image img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
}

.healthfood-planning__content {
  padding-top: 10px;
}

.healthfood-planning__label {
  margin-bottom: 18px;
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.healthfood-planning__content h2 {
  margin-bottom: 24px;
  color: #1c2539;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.35;
}

.healthfood-planning__lead {
  margin-bottom: 42px;
  color: #555;
  font-size: 17px;
  line-height: 2;
}

.healthfood-planning__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}

.healthfood-planning-card {
  position: relative;
  overflow: hidden;
  padding: 32px 28px;
  border-radius: 24px;
  background: #fff;
  border: 1px solid rgba(0, 82, 159, 0.1);
  box-shadow: 0 16px 40px rgba(0, 82, 159, 0.06);
}

.healthfood-planning-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 28px;
  width: 54px;
  height: 3px;
  background: #00529f;
  border-radius: 999px;
}

.healthfood-planning-card span {
  display: block;
  margin-bottom: 14px;
  color: rgba(0, 82, 159, 0.7);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.healthfood-planning-card h3 {
  margin-bottom: 14px;
  color: #1c2539;
  font-size: 20px;
  line-height: 1.5;
  font-weight: 700;
}

.healthfood-planning-card p {
  margin: 0;
  color: #666;
  font-size: 15px;
  line-height: 1.9;
}

@media (max-width: 1024px) {
  .healthfood-planning__inner {
    grid-template-columns: 1fr;
    gap: 44px;
  }

  .healthfood-planning__image {
    position: relative;
    top: auto;
  }

  .healthfood-planning__image img {
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 768px) {
  .healthfood-planning {
    padding: 80px 0;
  }

  .healthfood-planning__inner {
    width: min(100% - 32px, 1200px);
  }

  .healthfood-planning__content h2 br {
    display: none;
  }

  .healthfood-planning__lead {
    font-size: 15px;
    line-height: 1.9;
  }

  .healthfood-planning__grid {
    grid-template-columns: 1fr;
  }

  .healthfood-planning-card {
    padding: 28px 24px;
  }
}

/* WHY HEALTH FOOD BRAND */
.healthfood-market {
  padding: 120px 0;
  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
}

.healthfood-market__inner {
  width: min(1200px, 90%);
  margin: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: center;
}

.healthfood-market__label {
  margin-bottom: 18px;
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.healthfood-market h2 {
  margin-bottom: 24px;
  font-size: clamp(30px, 4vw, 30px);
  font-weight: 700;
  line-height: 1.35;
  color: #1c2539;
}

.healthfood-market__lead {
  margin-bottom: 20px;
  color: #33485d;
  font-size: 17px;
  line-height: 2;
}

.healthfood-market__content > p:last-of-type {
  color: #5b6c7d;
  line-height: 2;
}

.healthfood-market__points {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-top: 40px;
}

.healthfood-market__point {
  padding: 24px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid rgba(0, 82, 159, 0.08);
  box-shadow: 0 10px 24px rgba(0, 82, 159, 0.05);
}

.healthfood-market__point strong {
  display: block;
  margin-bottom: 8px;
  color: #00529f;
  font-size: 18px;
}

.healthfood-market__point span {
  color: #667;
  font-size: 14px;
}

.healthfood-market__visual {
  overflow: hidden;
  border-radius: 32px;
  box-shadow: 0 24px 60px rgba(0, 82, 159, 0.1);
}

.healthfood-market__visual img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
}

@media (max-width: 900px) {
  .healthfood-market {
    padding: 80px 0;
  }

  .healthfood-market__inner {
    grid-template-columns: 1fr;
  }

  .healthfood-market__points {
    grid-template-columns: 1fr;
  }
}

/* BRAND CONCEPT */
.healthfood-brand {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 680px;
  overflow: hidden;
  background: #fff;
}

.healthfood-brand__visual {
  position: relative;
  overflow: hidden;
}

.healthfood-brand__visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.healthfood-brand__content {
  display: flex;
  align-items: center;
  padding: 80px clamp(40px, 8%, 110px);
  background: #fff;
}

.healthfood-brand__body {
  max-width: 560px;
}

.healthfood-brand__label {
  margin-bottom: 20px;
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.healthfood-brand h2 {
  margin-bottom: 32px;
  color: #1f3144;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.03em;
}

.healthfood-brand__lead {
  margin-bottom: 20px;
  color: #33485d;
  font-size: 17px;
  line-height: 2;
}

.healthfood-brand__body > p {
  color: #5b6c7d;
  line-height: 2;
}

.healthfood-brand__message {
  margin-top: 44px;
  padding-top: 26px;
  border-top: 1px solid rgba(0, 82, 159, 0.15);
}

.healthfood-brand__message span {
  display: block;
  margin-bottom: 12px;
  color: #00529f;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.healthfood-brand__message p {
  margin: 0;
  color: #1f3144;
  font-size: 17px;
  line-height: 1.9;
  font-weight: 500;
}

@media (max-width: 900px) {
  .healthfood-brand {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .healthfood-brand__visual {
    height: 320px;
    position: relative;
  }

  .healthfood-brand__content {
    padding: 60px 7%;
  }
}

/* CONSULTATION */
.healthfood-consultation {
  padding: 120px 0;
  background: #f7fbff;
}

.healthfood-consultation__inner {
  width: min(1200px, 90%);
  margin: auto;
  display: grid;
  grid-template-columns: 1fr 0.9fr;
  gap: 70px;
  align-items: start;
}

.healthfood-consultation__label {
  margin-bottom: 18px;
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.healthfood-consultation h2 {
  margin-bottom: 24px;
  font-size: clamp(30px, 4vw, 36px);
  font-weight: 700;
  line-height: 1.35;
  color: #1c2539;
}

.healthfood-consultation__lead {
  margin-bottom: 40px;
  color: #555;
  font-size: 17px;
  line-height: 2;
}

.healthfood-consultation__list {
  display: grid;
  gap: 18px;
}

.healthfood-consultation-item {
  padding: 28px 32px;
  background: #fff;
  border-radius: 24px;
  border: 1px solid rgba(0, 82, 159, 0.08);
  box-shadow: 0 12px 30px rgba(0, 82, 159, 0.05);
}

.healthfood-consultation-item h3 {
  margin-bottom: 10px;
  color: #1c2539;
  font-size: 20px;
  line-height: 1.5;
}

.healthfood-consultation-item p {
  margin: 0;
  color: #666;
  font-size: 15px;
  line-height: 1.9;
}

.healthfood-consultation__image {
  position: sticky;
  top: 120px;
  overflow: hidden;
  border-radius: 32px;
  box-shadow: 0 24px 60px rgba(0, 82, 159, 0.1);
}

.healthfood-consultation__image img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
}

@media (max-width: 1024px) {
  .healthfood-consultation__inner {
    grid-template-columns: 1fr;
  }

  .healthfood-consultation__image {
    position: relative;
    top: auto;
    order: -1;
  }

  .healthfood-consultation__image img {
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 768px) {
  .healthfood-consultation {
    padding: 80px 0;
  }

  .healthfood-consultation__list {
    gap: 14px;
  }

  .healthfood-consultation-item {
    padding: 24px;
  }
}

/* WHY QBI WORLD */
.healthfood-strength {
  padding: 120px 0;
  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
}

.healthfood-strength__inner {
  width: min(1000px, 90%);
  margin: auto;
}

.healthfood-strength__head {
  text-align: center;
  margin-bottom: 70px;
}

.healthfood-strength__label {
  margin-bottom: 18px;
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.healthfood-strength h2 {
  margin-bottom: 24px;
  color: #1c2539;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.35;
}

.healthfood-strength__lead {
  max-width: 760px;
  margin: 0 auto;
  color: #555;
  font-size: 17px;
  line-height: 2;
}

.healthfood-strength__timeline {
  position: relative;
  display: grid;
  gap: 32px;
}

.healthfood-strength__timeline::before {
  content: "";
  position: absolute;
  top: 30px;
  bottom: 30px;
  left: 40px;
  width: 1px;
  background: rgba(0, 82, 159, 0.15);
}

.healthfood-strength-step {
  position: relative;
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 30px;
  align-items: start;
}

.healthfood-strength-step span {
  position: relative;
  z-index: 2;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #00529f;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  box-shadow: 0 12px 30px rgba(0, 82, 159, 0.18);
}

.healthfood-strength-step div {
  padding: 34px 36px;
  border-radius: 28px;
  background: #fff;
  border: 1px solid rgba(0, 82, 159, 0.08);
  box-shadow: 0 16px 40px rgba(0, 82, 159, 0.05);
}

.healthfood-strength-step h3 {
  margin-bottom: 12px;
  color: #1c2539;
  font-size: 22px;
  line-height: 1.5;
  font-weight: 700;
}

.healthfood-strength-step p {
  margin: 0;
  color: #666;
  font-size: 15px;
  line-height: 1.9;
}

@media (max-width: 768px) {
  .healthfood-strength {
    padding: 80px 0;
  }

  .healthfood-strength__head {
    margin-bottom: 50px;
  }

  .healthfood-strength__lead {
    font-size: 15px;
    line-height: 1.9;
  }

  .healthfood-strength__timeline::before {
    left: 24px;
  }

  .healthfood-strength-step {
    grid-template-columns: 48px 1fr;
    gap: 16px;
  }

  .healthfood-strength-step span {
    width: 48px;
    height: 48px;
    font-size: 12px;
  }

  .healthfood-strength-step div {
    padding: 24px;
    border-radius: 20px;
  }

  .healthfood-strength-step h3 {
    font-size: 18px;
  }
}

/* CTA */
.healthfood-cta {
  position: relative;
  overflow: hidden;
  padding: 120px 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.64), rgba(255, 255, 255, 0.18)),
    url("../../assets/img/lineup/healthfood/cta-bg.webp");
  background-size: cover;
  background-position: center;
}

.healthfood-cta__inner {
  width: min(900px, 90%);
  margin: auto;
  text-align: center;
  padding: 64px 36px;
  border-radius: 32px;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 24px 60px rgba(0, 82, 159, 0.1);
}

.healthfood-cta__label {
  margin-bottom: 18px;
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.healthfood-cta h2 {
  margin-bottom: 24px;
  color: #1c2539;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.45;
}

.healthfood-cta p {
  max-width: 680px;
  margin: 0 auto 40px;
  color: #33485d;
  font-size: 17px;
  line-height: 2;
}

.healthfood-cta__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 320px;
  min-height: 62px;
  padding: 0 34px;
  border-radius: 999px;
  background: #00529f;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 14px 32px rgba(0, 82, 159, 0.22);
  transition: 0.3s;
}

.healthfood-cta__button:hover {
  transform: translateY(-3px);
  background: #003f7b;
  color: #fff;
}

@media (max-width: 768px) {
  .healthfood-cta {
    padding: 80px 0;
    background-position: center;
  }

  .healthfood-cta__inner {
    width: min(100% - 32px, 900px);
    padding: 48px 24px;
    border-radius: 24px;
  }

  .healthfood-cta h2 br {
    display: none;
  }

  .healthfood-cta p {
    font-size: 15px;
    line-height: 1.9;
  }

  .healthfood-cta__button {
    width: 100%;
    min-width: 0;
    font-size: 15px;
  }
}

/* lineup/fabric/ */
/* FV */
.fabric-fv {
  position: relative;
  overflow: hidden;
  min-height: 760px;
  display: flex;
  align-items: center;
}

.fabric-fv__bg {
  position: absolute;
  inset: 0;
}

.fabric-fv__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fabric-fv__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.96) 0%,
    rgba(255, 255, 255, 0.84) 38%,
    rgba(255, 255, 255, 0.22) 68%,
    rgba(255, 255, 255, 0.06) 100%
  );
}

.fabric-fv__inner {
  position: relative;
  z-index: 2;
  width: min(1200px, 90%);
  margin: auto;
  padding: 180px 0 120px;
}

.fabric-fv__label {
  margin-bottom: 20px;
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.fabric-fv h1 {
  margin-bottom: 24px;
  color: #1c2539;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.15;
}

.fabric-fv h1 span {
  display: block;
  margin-top: 14px;
  color: #00529f;
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.04em;
  margin-bottom: 30px;
}

.fabric-fv__lead {
  max-width: 660px;
  color: #33485d;
  font-size: 17px;
  line-height: 2;
}

.fabric-fv__actions {
  margin-top: 40px;
}

.fabric-fv__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 300px;
  min-height: 60px;
  padding: 0 34px;
  border-radius: 999px;
  background: #00529f;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 14px 32px rgba(0, 82, 159, 0.22);
  transition: 0.3s;
}

.fabric-fv__button:hover {
  transform: translateY(-3px);
  background: #003f7b;
  color: #fff;
}

.fabric-fv::after {
  content: "FABRIC";
  position: absolute;
  right: 40px;
  bottom: 20px;
  color: rgba(0, 82, 159, 0.05);
  font-size: clamp(90px, 14vw, 220px);
  font-weight: 800;
  letter-spacing: 0.04em;
  pointer-events: none;
}

@media (max-width: 768px) {
  .fabric-fv {
    min-height: 680px;
  }

  .fabric-fv__bg img {
    object-position: 62% center;
  }

  .fabric-fv__overlay {
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.96) 0%,
      rgba(255, 255, 255, 0.88) 48%,
      rgba(255, 255, 255, 0.34) 100%
    );
  }

  .fabric-fv__inner {
    width: min(100% - 32px, 1200px);
    padding: 150px 0 80px;
  }

  .fabric-fv h1 span {
    margin-top: 10px;
    font-size: 16px;
    line-height: 1.5;
  }

  .fabric-fv__lead {
    font-size: 15px;
    line-height: 1.9;
  }

  .fabric-fv__button {
    width: 100%;
    min-width: 0;
  }

  .fabric-fv::after {
    right: 16px;
    bottom: 10px;
    font-size: 76px;
  }
}

/* BRAND PLANNING */
.fabric-planning {
  padding: 120px 0;
  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
}

.fabric-planning__inner {
  width: min(1200px, 90%);
  margin: auto;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 70px;
  align-items: start;
}

.fabric-planning__image {
  position: sticky;
  top: 120px;
  overflow: hidden;
  border-radius: 32px;
  box-shadow: 0 24px 60px rgba(0, 82, 159, 0.1);
}

.fabric-planning__image img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
}

.fabric-planning__content {
  padding-top: 10px;
}

.fabric-planning__label {
  margin-bottom: 18px;
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.fabric-planning h2 {
  margin-bottom: 24px;
  color: #1c2539;
  font-size: clamp(30px, 4vw, 40px);
  line-height: 1.35;
  font-weight: 700;
}

.fabric-planning__lead {
  margin-bottom: 42px;
  color: #555;
  font-size: 17px;
  line-height: 2;
}

.fabric-planning__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}

.fabric-planning-card {
  position: relative;
  overflow: hidden;
  padding: 32px 28px;
  border-radius: 24px;
  background: #fff;
  border: 1px solid rgba(0, 82, 159, 0.1);
  box-shadow: 0 16px 40px rgba(0, 82, 159, 0.06);
}

.fabric-planning-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 28px;
  width: 54px;
  height: 3px;
  background: #00529f;
  border-radius: 999px;
}

.fabric-planning-card span {
  display: block;
  margin-bottom: 14px;
  color: rgba(0, 82, 159, 0.7);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.fabric-planning-card h3 {
  margin-bottom: 14px;
  color: #1c2539;
  font-size: 20px;
  line-height: 1.5;
  font-weight: 700;
}

.fabric-planning-card p {
  margin: 0;
  color: #666;
  font-size: 15px;
  line-height: 1.9;
}

@media (max-width: 1024px) {
  .fabric-planning__inner {
    grid-template-columns: 1fr;
    gap: 44px;
  }

  .fabric-planning__image {
    position: relative;
    top: auto;
  }

  .fabric-planning__image img {
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 768px) {
  .fabric-planning {
    padding: 80px 0;
  }

  .fabric-planning__inner {
    width: min(100% - 32px, 1200px);
  }

  .fabric-planning h2 br {
    display: none;
  }

  .fabric-planning__lead {
    font-size: 15px;
    line-height: 1.9;
  }

  .fabric-planning__grid {
    grid-template-columns: 1fr;
  }

  .fabric-planning-card {
    padding: 28px 24px;
  }
}

/* WHY FABRIC BRAND */
.fabric-market {
  padding: 120px 0;
  background: #fff;
}

.fabric-market__inner {
  width: min(1200px, 90%);
  margin: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: center;
}

.fabric-market__label {
  margin-bottom: 18px;
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.fabric-market h2 {
  margin-bottom: 24px;
  color: #1c2539;
  font-size: clamp(30px, 4vw, 40px);
  line-height: 1.35;
  font-weight: 700;
}

.fabric-market__lead {
  margin-bottom: 20px;
  color: #33485d;
  font-size: 17px;
  line-height: 2;
}

.fabric-market__content > p:not(.fabric-market__lead) {
  color: #5b6c7d;
  line-height: 2;
}

.fabric-market__visual {
  overflow: hidden;
  border-radius: 32px;
  box-shadow: 0 24px 60px rgba(0, 82, 159, 0.1);
}

.fabric-market__visual img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
}

@media (max-width: 900px) {
  .fabric-market {
    padding: 80px 0;
  }

  .fabric-market__inner {
    grid-template-columns: 1fr;
    gap: 44px;
  }

  .fabric-market__visual {
    order: -1;
  }

  .fabric-market h2 br {
    display: none;
  }

  .fabric-market__lead {
    font-size: 15px;
    line-height: 1.9;
  }
}

/* BRAND CONCEPT */
.fabric-brand {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 680px;
  overflow: hidden;
  background: #fff;
}

.fabric-brand__visual {
  position: relative;
  overflow: hidden;
}

.fabric-brand__visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.fabric-brand__content {
  display: flex;
  align-items: center;
  padding: 80px clamp(40px, 8%, 110px);
  background: #fff;
}

.fabric-brand__body {
  max-width: 560px;
}

.fabric-brand__label {
  margin-bottom: 20px;
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.fabric-brand h2 {
  margin-bottom: 32px;
  color: #1f3144;
  font-size: clamp(30px, 4vw, 40px);
  line-height: 1.5;
  letter-spacing: 0.03em;
  font-weight: 700;
}

.fabric-brand__lead {
  margin-bottom: 20px;
  color: #33485d;
  font-size: 17px;
  line-height: 2;
}

.fabric-brand__body > p {
  color: #5b6c7d;
  line-height: 2;
}

.fabric-brand__message {
  margin-top: 44px;
  padding-top: 26px;
  border-top: 1px solid rgba(0, 82, 159, 0.15);
}

.fabric-brand__message span {
  display: block;
  margin-bottom: 12px;
  color: #00529f;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.fabric-brand__message p {
  margin: 0;
  color: #1f3144;
  font-size: 17px;
  line-height: 1.9;
  font-weight: 500;
}

@media (max-width: 900px) {
  .fabric-brand {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .fabric-brand__visual {
    height: 320px;
  }

  .fabric-brand__content {
    padding: 60px 7%;
  }

  .fabric-brand h2 br {
    display: none;
  }
}

/* CONSULTATION */
.fabric-consultation {
  padding: 120px 0;
  background: #f7fbff;
}

.fabric-consultation__inner {
  width: min(1200px, 90%);
  margin: auto;
  display: grid;
  grid-template-columns: 1fr 0.9fr;
  gap: 70px;
  align-items: start;
}

.fabric-consultation__label {
  margin-bottom: 18px;
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.fabric-consultation h2 {
  margin-bottom: 24px;
  color: #1c2539;
  font-size: clamp(30px, 4vw, 34px);
  line-height: 1.35;
  font-weight: 700;
}

.fabric-consultation__lead {
  margin-bottom: 40px;
  color: #555;
  font-size: 17px;
  line-height: 2;
}

.fabric-consultation__list {
  display: grid;
  gap: 18px;
}

.fabric-consultation-item {
  padding: 28px 32px;
  background: #fff;
  border-radius: 24px;
  border: 1px solid rgba(0, 82, 159, 0.08);
  box-shadow: 0 12px 30px rgba(0, 82, 159, 0.05);
}

.fabric-consultation-item h3 {
  margin-bottom: 10px;
  color: #1c2539;
  font-size: 20px;
  line-height: 1.5;
  font-weight: 700;
}

.fabric-consultation-item p {
  margin: 0;
  color: #666;
  font-size: 15px;
  line-height: 1.9;
}

.fabric-consultation__image {
  position: sticky;
  top: 120px;
  overflow: hidden;
  border-radius: 32px;
  box-shadow: 0 24px 60px rgba(0, 82, 159, 0.1);
}

.fabric-consultation__image img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
}

@media (max-width: 1024px) {
  .fabric-consultation__inner {
    grid-template-columns: 1fr;
  }

  .fabric-consultation__image {
    position: relative;
    top: auto;
    order: -1;
  }

  .fabric-consultation__image img {
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 768px) {
  .fabric-consultation {
    padding: 80px 0;
  }

  .fabric-consultation__inner {
    width: min(100% - 32px, 1200px);
  }

  .fabric-consultation h2 br {
    display: none;
  }

  .fabric-consultation__lead {
    font-size: 15px;
    line-height: 1.9;
  }

  .fabric-consultation__list {
    gap: 14px;
  }

  .fabric-consultation-item {
    padding: 24px;
  }

  .fabric-consultation-item h3 {
    font-size: 18px;
  }
}

/* WHY QBI WORLD */
.fabric-strength {
  padding: 120px 0;
  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
}

.fabric-strength__inner {
  width: min(1000px, 90%);
  margin: auto;
}

.fabric-strength__head {
  text-align: center;
  margin-bottom: 70px;
}

.fabric-strength__label {
  margin-bottom: 18px;
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.fabric-strength h2 {
  margin-bottom: 24px;
  color: #1c2539;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.35;
}

.fabric-strength__lead {
  max-width: 760px;
  margin: 0 auto;
  color: #555;
  font-size: 17px;
  line-height: 2;
}

.fabric-strength__timeline {
  position: relative;
  display: grid;
  gap: 32px;
}

.fabric-strength__timeline::before {
  content: "";
  position: absolute;
  top: 30px;
  bottom: 30px;
  left: 40px;
  width: 1px;
  background: rgba(0, 82, 159, 0.15);
}

.fabric-strength-step {
  position: relative;
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 30px;
  align-items: start;
}

.fabric-strength-step span {
  position: relative;
  z-index: 2;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #00529f;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  box-shadow: 0 12px 30px rgba(0, 82, 159, 0.18);
}

.fabric-strength-step div {
  padding: 34px 36px;
  border-radius: 28px;
  background: #fff;
  border: 1px solid rgba(0, 82, 159, 0.08);
  box-shadow: 0 16px 40px rgba(0, 82, 159, 0.05);
}

.fabric-strength-step h3 {
  margin-bottom: 12px;
  color: #1c2539;
  font-size: 22px;
  line-height: 1.5;
  font-weight: 700;
}

.fabric-strength-step p {
  margin: 0;
  color: #666;
  font-size: 15px;
  line-height: 1.9;
}

@media (max-width: 768px) {
  .fabric-strength {
    padding: 80px 0;
  }

  .fabric-strength__head {
    margin-bottom: 50px;
  }

  .fabric-strength__lead {
    font-size: 15px;
    line-height: 1.9;
  }

  .fabric-strength__timeline::before {
    left: 24px;
  }

  .fabric-strength-step {
    grid-template-columns: 48px 1fr;
    gap: 16px;
  }

  .fabric-strength-step span {
    width: 48px;
    height: 48px;
    font-size: 12px;
  }

  .fabric-strength-step div {
    padding: 24px;
    border-radius: 20px;
  }

  .fabric-strength-step h3 {
    font-size: 18px;
  }

  .fabric-strength h2 br {
    display: none;
  }
}

/* CTA */
.fabric-cta {
  position: relative;
  overflow: hidden;
  padding: 120px 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.15)),
    url("../../assets/img/lineup/fabric/cta-bg.webp");
  background-size: cover;
  background-position: center;
}

.fabric-cta__inner {
  width: min(900px, 90%);
  margin: auto;
  text-align: center;
  padding: 64px 36px;
  border-radius: 32px;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 24px 60px rgba(0, 82, 159, 0.1);
}

.fabric-cta__label {
  margin-bottom: 18px;
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.fabric-cta h2 {
  margin-bottom: 24px;
  color: #1c2539;
  font-size: clamp(26px, 4vw, 36px);
  font-weight: 700;
  line-height: 1.45;
}

.fabric-cta p {
  max-width: 700px;
  margin: 0 auto 40px;
  color: #33485d;
  font-size: 17px;
  line-height: 2;
}

.fabric-cta__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 340px;
  min-height: 62px;
  padding: 0 14px;
  border-radius: 999px;
  background: #00529f;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  transition: 0.3s;
  box-shadow: 0 14px 32px rgba(0, 82, 159, 0.22);
}

.fabric-cta__button:hover {
  background: #003f7b;
  color: #fff;
  transform: translateY(-3px);
}

@media (max-width: 768px) {
  .fabric-cta {
    padding: 80px 0;
  }

  .fabric-cta__inner {
    width: min(100% - 32px, 900px);
    padding: 48px 24px;
    border-radius: 24px;
  }

  .fabric-cta h2 br {
    display: none;
  }

  .fabric-cta p {
    font-size: 15px;
    line-height: 1.9;
  }

  .fabric-cta__button {
    width: 100%;
    min-width: 0;
  }
}
/* /lineup/petcare/ear-care/ */
/* =====================================================
       ① FV : 2カラムヒーロー
    ===================================================== */
.ec-fv {
  position: relative;
  overflow: hidden;
  padding: 170px 0 110px;
  background:
    radial-gradient(circle at 90% 20%, rgba(0, 82, 159, 0.07), transparent 35%),
    linear-gradient(135deg, #ffffff 0%, #f7fafc 55%, #eef5fa 100%);
}

.ec-fv::before {
  content: "";
  position: absolute;
  right: -140px;
  bottom: -140px;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: rgba(0, 82, 159, 0.05);
}

.ec-fv__inner {
  width: min(1200px, 90%);
  margin: auto;
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 70px;
  align-items: center;
  position: relative;
  z-index: 1;
}

.ec-fv__label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.ec-fv__label::before {
  content: "";
  width: 42px;
  height: 1px;
  background: #00529f;
}

.ec-fv__title {
  margin: 0;
  font-size: clamp(34px, 4.5vw, 48px);
  font-weight: 700;
  line-height: 1.25;
  color: #1a2d3d;
  letter-spacing: 0.04em;
}

.ec-fv__subtitle {
  margin-top: 14px;
  font-size: 16px;
  font-weight: 700;
  color: #00529f;
  letter-spacing: 0.04em;
}

.ec-fv__lead {
  margin-top: 24px;
  font-size: 16px;
  line-height: 2;
  color: #506273;
}

.ec-fv__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 42px;
}

.ec-fv__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 260px;
  padding: 16px 28px;
  border-radius: 999px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  transition: 0.3s;
}

.ec-fv__btn:hover {
  transform: translateY(-3px);
}

.ec-fv__btn--primary {
  background: #00529f;
  color: #fff;
  box-shadow: 0 15px 35px rgba(0, 82, 159, 0.25);
}

.ec-fv__btn--secondary {
  background: #fff;
  color: #00529f;
  border: 1px solid rgba(0, 82, 159, 0.2);
}

.ec-fv__image {
  overflow: hidden;
  border-radius: 42px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.1);
}

.ec-fv__image img {
  width: 100%;
  display: block;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

@media (max-width: 900px) {
  .ec-fv {
    padding: 140px 0 80px;
  }

  .ec-fv__inner {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .ec-fv__buttons {
    flex-direction: column;
  }

  .ec-fv__btn {
    width: 100%;
    min-width: auto;
  }
}

/* =====================================================
       ② WHY EAR CARE : センター見出し + 事実訴求カード
    ===================================================== */
.ec-why {
  padding: 140px 0;
  background: #fff;
}

.ec-why__inner {
  width: min(1200px, 90%);
  margin: auto;
}

.ec-why__head {
  margin: 0 auto 70px;
  text-align: center;
}

.ec-why__label {
  margin-bottom: 18px;
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.ec-why h2 {
  margin-bottom: 26px;
  color: #1f3144;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.45;
}

.ec-why__lead {
  color: #5b6c7d;
  line-height: 2;
}

.ec-why__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.ec-why__card {
  padding: 48px 40px;
  background: #f8fafc;
  border-radius: 28px;
  position: relative;
}

.ec-why__card::before {
  content: "";
  display: block;
  width: 44px;
  height: 3px;
  margin-bottom: 28px;
  background: #00529f;
}

.ec-why__card h3 {
  margin-bottom: 16px;
  color: #1f3144;
  font-size: 22px;
  line-height: 1.5;
}

.ec-why__card p {
  color: #5b6c7d;
  line-height: 1.9;
  font-size: 15px;
}

@media (max-width: 900px) {
  .ec-why {
    padding: 90px 0;
  }

  .ec-why__grid {
    grid-template-columns: 1fr;
  }
}

/* =====================================================
       ③ PRODUCT PLANNING : センター見出し + 2×2 カードグリッド
    ===================================================== */
.ec-planning {
  padding: 140px 0;
  background: #f8fafc;
}

.ec-planning__inner {
  width: min(1200px, 90%);
  margin: auto;
}

.ec-planning__heading {
  margin: 0 auto 70px;
  text-align: center;
}

.ec-planning__label {
  margin-bottom: 18px;
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.ec-planning__heading h2 {
  margin-bottom: 22px;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.45;
  color: #1f3144;
}

.ec-planning__heading p {
  color: #5b6c7d;
  line-height: 2;
}

.ec-planning__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.ec-plan-card {
  padding: 52px 48px;
  background: #fff;
  border-radius: 28px;
  border: 1px solid rgba(0, 82, 159, 0.07);
  transition: 0.3s;
}

.ec-plan-card:hover {
  box-shadow: 0 24px 56px rgba(0, 82, 159, 0.09);
  transform: translateY(-5px);
}

.ec-plan-card > span {
  display: inline-block;
  margin-bottom: 22px;
  padding: 6px 16px;
  background: rgba(0, 82, 159, 0.07);
  color: #00529f;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  border-radius: 999px;
}

.ec-plan-card h3 {
  margin-bottom: 18px;
  color: #1f3144;
  font-size: 26px;
  line-height: 1.4;
}

.ec-plan-card p {
  color: #5b6c7d;
  line-height: 2;
  font-size: 15px;
}

@media (max-width: 768px) {
  .ec-planning {
    padding: 90px 0;
  }

  .ec-planning__grid {
    grid-template-columns: 1fr;
  }

  .ec-plan-card {
    padding: 40px 32px;
  }
}

/* =====================================================
       ④ BRAND CONCEPT : フルブリード・スプリット
    ===================================================== */
.ec-brand {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 640px;
  overflow: hidden;
}

.ec-brand__visual {
  position: relative;
  overflow: hidden;
}

.ec-brand__visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ec-brand__content {
  background: #fff;
  display: flex;
  align-items: center;
  padding: 80px clamp(40px, 8%, 110px);
}

.ec-brand__body {
  max-width: 560px;
}

.ec-brand__label {
  margin-bottom: 20px;
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.ec-brand h2 {
  margin-bottom: 32px;
  color: #1f3144;
  font-size: clamp(26px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.04em;
}

.ec-brand__lead {
  margin-bottom: 20px;
  color: #33485d;
  font-size: 17px;
  line-height: 2;
}

.ec-brand__body > p {
  color: #5b6c7d;
  line-height: 2;
}

.ec-brand__message {
  margin-top: 44px;
  padding-top: 26px;
  border-top: 1px solid rgba(0, 82, 159, 0.15);
}

.ec-brand__message > span {
  display: block;
  margin-bottom: 12px;
  color: #00529f;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.ec-brand__message > p {
  margin: 0;
  color: #1f3144;
  font-size: 17px;
  line-height: 1.9;
}

@media (max-width: 900px) {
  .ec-brand {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .ec-brand__visual {
    height: 320px;
    position: relative;
  }

  .ec-brand__content {
    padding: 60px 7%;
  }
}

/* =====================================================
       ⑤ CONSULTATION : エディトリアルリスト
    ===================================================== */
.ec-consultation {
  padding: 140px 0;
  background: #f8fafc;
}

.ec-consultation__inner {
  width: min(1200px, 90%);
  margin: auto;
}

.ec-consultation__head {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.ec-consultation__label {
  margin-bottom: 18px;
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.ec-consultation h2 {
  margin-bottom: 26px;
  color: #1f3144;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.45;
}

.ec-consultation__lead {
  color: #5b6c7d;
  line-height: 2;
}

.ec-consultation__list {
  margin-top: 70px;
  border-top: 1px solid rgba(0, 82, 159, 0.12);
}

.ec-consultation__item {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 60px;
  padding: 44px 0;
  border-bottom: 1px solid rgba(0, 82, 159, 0.12);
  align-items: start;
  transition: background 0.2s;
}

.ec-consultation__item:hover {
  background: rgba(0, 82, 159, 0.02);
  margin: 0 -20px;
  padding-left: 20px;
  padding-right: 20px;
}

.ec-consultation__item h3 {
  color: #1f3144;
  font-size: 21px;
  line-height: 1.65;
}

.ec-consultation__item p {
  color: #5b6c7d;
  line-height: 2;
  padding-top: 3px;
}

@media (max-width: 768px) {
  .ec-consultation {
    padding: 90px 0;
  }

  .ec-consultation__item {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 36px 0;
  }

  .ec-consultation__item:hover {
    margin: 0;
    padding-left: 0;
    padding-right: 0;
  }
}

/* =====================================================
       ⑥ WHY QBI WORLD : タイムライン
    ===================================================== */
.ec-strength {
  padding: 140px 0;
  background: #fff;
}

.ec-strength__inner {
  width: min(1100px, 90%);
  margin: auto;
}

.ec-strength__head {
  margin: 0 auto 80px;
  text-align: center;
}

.ec-strength__label {
  margin-bottom: 18px;
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.ec-strength h2 {
  margin-bottom: 28px;
  color: #1f3144;
  font-size: clamp(26px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.45;
}

.ec-strength__head p {
  color: #5b6c7d;
  line-height: 2;
}

.ec-strength__timeline {
  position: relative;
  max-width: 900px;
  margin: auto;
}

.ec-strength__timeline::before {
  content: "";
  position: absolute;
  left: 32px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(0, 82, 159, 0.15);
}

.ec-step {
  position: relative;
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 40px;
  padding-bottom: 60px;
}

.ec-step:last-child {
  padding-bottom: 0;
}

.ec-step > span {
  position: relative;
  z-index: 2;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: #00529f;
  color: #fff;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 700;
}

.ec-step h3 {
  margin-bottom: 14px;
  color: #1f3144;
  font-size: 28px;
}

.ec-step p {
  color: #5b6c7d;
  line-height: 2;
}

@media (max-width: 768px) {
  .ec-strength {
    padding: 90px 0;
  }

  .ec-step {
    gap: 24px;
  }

  .ec-step h3 {
    font-size: 22px;
  }
}

/* =====================================================
       ⑧ RELATED PET CARE OEM : 4カードグリッド
    ===================================================== */
.pet-related {
  padding: 120px 0;
  background: linear-gradient(135deg, #00529f 0%, #003a72 100%);
}

.pet-related__inner {
  width: min(1200px, 90%);
  margin: auto;
}

.pet-related__head {
  text-align: center;
  margin-bottom: 60px;
}

.pet-related__label {
  display: block;
  margin-bottom: 18px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.pet-related h2 {
  color: #fff;
  font-size: clamp(26px, 3.5vw, 36px);
  font-weight: 700;
  line-height: 1.45;
}

.pet-related__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.pet-related__card {
  display: block;
  padding: 36px 28px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 20px;
  text-decoration: none;
  transition: 0.3s;
}

.pet-related__card:hover {
  background: rgba(255, 255, 255, 0.14);
  transform: translateY(-4px);
}

.pet-related__card-label {
  display: block;
  margin-bottom: 14px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.pet-related__card-title {
  margin: 0;
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
}

@media (max-width: 900px) {
  .pet-related {
    padding: 80px 0;
  }

  .pet-related__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .pet-related__grid {
    grid-template-columns: 1fr;
  }
}

/* =====================================================
       ⑨ CTA
    ===================================================== */
.ec-cta {
  position: relative;
  overflow: hidden;
  padding: 140px 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.18)),
    url("../../assets/img/lineup/petcare/ear-care/cta-bg.webp");
  background-size: cover;
  background-position: center;
}

.ec-cta__inner {
  width: min(900px, 90%);
  margin: auto;
  text-align: center;
  padding: 70px 40px;
  border-radius: 36px;
  background: rgba(255, 255, 255, 0.01);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 30px 70px rgba(0, 82, 159, 0.14);
}

.ec-cta__label {
  margin-bottom: 18px;
  color: #00529f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.ec-cta h2 {
  margin-bottom: 26px;
  color: #1f3144;
  font-size: clamp(26px, 3.5vw, 36px);
  font-weight: 700;
  line-height: 1.5;
}

.ec-cta__text {
  max-width: 720px;
  margin: 0 auto 42px;
  color: #42566a;
  line-height: 2;
}

.ec-cta__buttons {
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}

.ec-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 280px;
  padding: 18px 34px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  transition: 0.3s;
}

.ec-cta__btn--primary {
  background: #00529f;
  color: #fff;
}

.ec-cta__btn--primary:hover {
  transform: translateY(-3px);
}

.ec-cta__btn--secondary {
  background: rgba(255, 255, 255, 0.8);
  color: #00529f;
  border: 1px solid rgba(0, 82, 159, 0.18);
}

.ec-cta__btn--secondary:hover {
  background: #fff;
}

@media (max-width: 768px) {
  .ec-cta {
    padding: 100px 0;
  }

  .ec-cta__inner {
    padding: 50px 24px;
  }

  .ec-cta__btn {
    width: 100%;
    min-width: auto;
  }
}