@charset "UTF-8";

:root {
  --navy: #092f56;
  --ink: #122e49;
  --red: #d71919;
  --gold: #e5b400;
  --blue: #4b9bd4;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  background: #e7eaec;
  color: var(--ink);
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  -webkit-font-smoothing: antialiased;
}

.agehack-page {
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
  background: #fff;
  overflow: hidden;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

h1, h2, p, ul {
  margin: 0;
  padding: 0;
}

/* FV */
.hero {
  position: relative;
  min-height: 360px;
  background: url("../images/FV.jpg") center top / 750px 600px no-repeat;
}

.hero__inner {
  width: 560px;
  margin-left: 44px;
  padding-top: 63px;
  padding-bottom: 40px;
}

.hero h1 {
  color: var(--navy);
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
  font-size: 39px;
  line-height: 1.42;
  font-weight: 700;
  letter-spacing: .02em;
  overflow-wrap: break-word;
}

.hero p {
  width: 495px;
  margin-top: 17px;
  color: #18222b;
  font-size: 17px;
  line-height: 1.65;
  letter-spacing: .01em;
}

/* check */
.symptoms {
  position: relative;
  min-height: 228px;
  color: #fff;
  background:
    linear-gradient(90deg, rgba(3,38,71,.93) 0%, rgba(8,48,84,.80) 58%, rgba(7,43,77,.25) 100%),
    url("../images/check-bg.jpg") center 50% / cover no-repeat;
}

.symptoms::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 18px;
  background: #fff;
  clip-path: polygon(0 0, 17% 15%, 35% 30%, 55% 35%, 75% 22%, 100% 0, 100% 100%, 0 100%);
}

.symptoms__inner {
  padding: 23px 44px 20px;
}

.symptoms h2 {
  font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-size: 32px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: .04em;
}

.symptoms ul {
  list-style: none;
  margin-top: 17px;
}

.symptoms li {
  position: relative;
  margin: 9px 0;
  padding-left: 47px;
  font-size: 17px;
  line-height: 1.55;
}

.symptoms li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 50%;
  width: 28px;
  height: 28px;
  transform: translateY(-50%);
  border: 1.5px solid #fff;
  border-radius: 50%;
  font-size: 16px;
  line-height: 25px;
  text-align: center;
}

/* decline */
.decline {
  position: relative;
  height: 315px;
  padding-top: 17px;
  text-align: center;
  background: #fff url("../images/check-bg.jpg") center bottom / 100% auto no-repeat;
}

.decline::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 52px;
  background: #fff;
  clip-path: ellipse(72% 58% at 50% 100%);
}

.decline__title p {
  color: var(--navy);
  font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-size: 28px;
  line-height: 1.34;
  font-weight: 700;
}

.decline__title h2 {
  font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-size: 42px;
  line-height: 1.18;
  font-weight: 700;
  color: var(--navy);
}

.decline__title h2 span {
  font-size: 42px;
}

.decline__title h2 em {
  margin-left: 7px;
  color: var(--red);
  font-size: 42px;
  font-style: normal;
}

.decline__graph {
  width: 505px;
  margin: 9px auto 0;
}

/* causes */
.causes {
  position: relative;
  height: 210px;
  padding-top: 15px;
  background:
    linear-gradient(rgba(235,237,238,.25), rgba(235,237,238,.25)),
    url("../images/cause-bg.jpg") center / cover no-repeat;
  filter: grayscale(100%);
}

.causes h2 {
  text-align: center;
  color: var(--navy);
  font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-size: 38px;
  line-height: 1.1;
  font-weight: 700;
}

.causes h2::after {
  content: "";
  display: block;
  width: 52px;
  height: 2px;
  margin: 8px auto 0;
  background: #b99b72;
}

.causes__list {
  position: absolute;
  left: 184px;
  right: 48px;
  bottom: 17px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.cause-item {
  width: 120px;
  height: 120px;
  flex: 0 0 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-size: 21px;
  font-weight: 700;
  white-space: nowrap;
  filter: grayscale(0);
}

.cause-item__etc {
  color: #444;
  font-size: 16px;
  filter: grayscale(1);
}

/* hope */
.hope {
  position: relative;
  height: 157px;
  background: url("../images/hope-bg.jpg") center / cover no-repeat;
}

.hope__copy {
  position: absolute;
  left: 51px;
  top: 29px;
  color: var(--navy);
  font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
  line-height: .95;
  white-space: nowrap;
}

.hope__copy span {
  display: block;
  margin-left: 7px;
  font-size: 34px;
  font-weight: 700;
}

.hope__copy strong {
  position: relative;
  z-index: 0;
  display: block;
  font-size: 57px;
  font-weight: 800;
  letter-spacing: .015em;
}

.hope__copy strong::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: -5px;
  right: 0;
  bottom: -7px;
  height: 9px;
  background: var(--gold);
  transform: skewX(-18deg) rotate(-1deg);
}

/* product */
.product {
  position: relative;
  height: 300px;
  overflow: hidden;
  background: #fff;
}

.product__copy {
  position: absolute;
  z-index: 2;
  left: 105px;
  top: 17px;
  width: 330px;
}

.product__brand {
  color: #0b3b62;
  font-family: "Arial Narrow", Arial, sans-serif;
  font-size: 58px;
  line-height: .9;
  letter-spacing: -.045em;
}

.product__brand small {
  display: block;
  margin-top: 7px;
  text-align: center;
  color: #0b3b62;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-size: 14px;
  letter-spacing: .14em;
}

.product__copy > p {
  margin-top: 17px;
  color: #102f4a;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-size: 19px;
  line-height: 1.45;
}

.product__pillars {
  display: flex;
  gap: 18px;
  margin-top: 10px;
}

.product__pillars > div {
  text-align: center;
  color: #123c5e;
  font-size: 14px;
}

.pillar-icon {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-size: 30px;
  line-height: 1;
}

.product__pillars b {
  display: block;
  margin-top: 3px;
  font-weight: 400;
}

.product__image {
  position: absolute;
  top: 0;
  right: -18px;
  width: 355px;
  height: 300px;
  overflow: hidden;
}

.product__image img {
  width: 878px;
  max-width: none;
  height: 627px;
  object-fit: contain;
  transform: translate(-430px, -5px);
}

/* medical */
.medical {
  position: relative;
  min-height: 138px;
  display: flex;
  align-items: center;
  padding: 22px 46px;
  border-top: 1px solid #eee;
  background: #fff;
}

.medical__copy {
  width: 440px;
  padding-left: 20px;
  border-left: 3px solid #b99b72;
}

.medical__copy h2 {
  color: var(--navy);
  font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-size: 28px;
  line-height: 1.2;
}

.medical__copy p {
  margin-top: 7px;
  color: #17324d;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-size: 16px;
  line-height: 1.45;
}

.medical > img {
  height: 135px;
  object-fit: contain;
  margin-left: auto;
}

/* details */
.details {
  min-height: 167px;
  margin: 0 47px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #eef5f7;
}

.details__copy {
  z-index: 2;
  width: 50%;
  padding-left: 20px;
}

.details__copy h2 {
  color: var(--navy);
  font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-size: 25px;
  line-height: 1.2;
  white-space: nowrap;
}

.details__copy p {
  margin-top: 11px;
  color: #17324d;
  font-size: 13px;
  line-height: 1.55;
}

.details > img {
  width: 50%;
  height: 164px;
  object-fit: cover;
  object-position: center;
}

/* CTA */
.amazon-cta {
  height: 154px;
  padding: 0 48px 25px;
  overflow: hidden;
  background: #fff;
}

.amazon-cta a {
  display: block;
  width: 100%;
  height: 110px;
  overflow: hidden;
}

.amazon-cta img {
  width: 100%;
  height: 134px;
  transform: translateY(-18px);
}

/* responsive */
@media (max-width: 600px) {
  .hero { min-height: 47.2vw; background-size: 100% auto; }
  .hero__inner { width: 74%; margin-left: 5.9vw; padding-top: 5vw; padding-bottom: 5vw; }
  .hero h1 { font-size: clamp(23px, 5.2vw, 39px); }
  .hero p { width: 66vw; margin-top: 2.2vw; font-size: clamp(10px, 2.27vw, 17px); }

  .symptoms { min-height: 29.7vw; }
  .symptoms__inner { padding: 3.1vw 5.9vw 2vw; }
  .symptoms h2 { font-size: clamp(22px, 4.27vw, 32px); }
  .symptoms ul { margin-top: 2.2vw; }
  .symptoms li { margin: 1.2vw 0; padding-left: 6.2vw; font-size: clamp(11px, 2.27vw, 17px); }
  .symptoms li::before { width: 3.8vw; height: 3.8vw; font-size: 2.1vw; line-height: 3.4vw; }

  .decline { height: 41vw; padding-top: 2.2vw; }
  .decline__title p { font-size: clamp(19px, 3.73vw, 28px); }
  .decline__title h2, .decline__title h2 span, .decline__title h2 em { font-size: clamp(29px, 5.6vw, 42px); }
  .decline__graph { width: 67.3%; margin-top: 1.2vw; }

  .causes { height: 32vw; padding-top: 2vw; }
  .causes h2 { font-size: clamp(27px, 5.1vw, 38px); }
  .causes__list { left: 24.5%; right: 6.4%; bottom: 2.3vw; gap: 2.1vw; }
  .cause-item { width: 16vw; height: 16vw; flex-basis: 16vw; font-size: clamp(13px, 2.8vw, 21px); }
  .cause-item__etc { font-size: 2.1vw; }

  .hope { height: 20.9vw; }
  .hope__copy { left: 6.8%; top: 3.8vw; }
  .hope__copy span { font-size: 4.5vw; }
  .hope__copy strong { font-size: 7.6vw; }

  .product { height: 40vw; }
  .product__copy { left: 14%; top: 2.3vw; width: 44%; }
  .product__brand { font-size: 7.7vw; }
  .product__brand small { margin-top: .9vw; font-size: 1.9vw; }
  .product__copy > p { margin-top: 2.3vw; font-size: 2.55vw; }
  .product__pillars { gap: 2.2vw; margin-top: 1.4vw; }
  .pillar-icon { width: 8.5vw; height: 8.5vw; font-size: 4vw; }
  .product__pillars > div { font-size: 1.9vw; }
  .product__image { right: -2.4%; width: 47.3%; height: 100%; }
  .product__image img { width: 195.3%; height: auto; transform: translate(-57.5%, -1.7%); }

  .medical { min-height: 18.4vw; padding: 0 6.1vw; }
  .medical__copy { width: 62%; padding-left: 2.6vw; }
  .medical__copy h2 { font-size: 3.7vw; }
  .medical__copy p { margin-top: .8vw; font-size: 2.13vw; }
  .medical > img { height: 18.3vw; }

  .details { min-height: 22.13vw; margin: 0 6.3vw; }
  .details__copy { padding-left: 2.7vw; }
  .details__copy h2 { font-size: 3.33vw; }
  .details__copy p { margin-top: 1.5vw; font-size: 1.73vw; }
  .details > img { height: 22.13vw; }

  .amazon-cta { height: 20.5vw; padding: 0 6.4vw 3.3vw; }
  .amazon-cta a { height: 14.7vw; }
  .amazon-cta img { height: 17.9vw; transform: translateY(-2.4vw); }
}

/* ===== Final design corrections ===== */
.symptoms {
  min-height: 228px;
}
.symptoms__inner {
  padding-top: 25px;
  padding-bottom: 29px;
}
.symptoms h2 {
  font-size: 36px;
}
.symptoms ul {
  margin-top: 18px;
}
.symptoms li {
  margin: 10px 0;
  padding-left: 48px;
  font-size: 18px;
  line-height: 1.55;
}
.symptoms li::before {
  width: 29px;
  height: 29px;
  line-height: 26px;
}

.decline {
  height: 320px;
  padding-top: 17px;
  background: #fff;
}
.decline__graph {
  width: 515px;
  margin-top: 10px;
}

.causes {
  height: 210px;
  padding-top: 20px;
  filter: none;
  background:
    linear-gradient(rgba(235,237,238,.28), rgba(235,237,238,.28)),
    url("../images/cause-bg.jpg") center / cover no-repeat;
}
.causes h2 {
  font-size: 40px;
}
.causes__list {
  left: 193px;
  right: 55px;
  bottom: 14px;
  gap: 17px;
}
.cause-item {
  width: 120px;
  height: 120px;
  flex-basis: 120px;
  background: #d71919;
  font-size: 21px;
}
.cause-item__etc {
  color: #222;
  font-size: 20px;
  filter: none;
}

/* Hope + product: one continuous visual, with product.jpg layered on the right. */
.hope {
  display: none;
}
.product {
  display: none;
}
.hope-product {
  position: relative;
  height: 455px;
  overflow: hidden;
  background: #fff;
}
.hope-product__bg {
  position: absolute;
  inset: 0 0 auto 0;
  height: 235px;
  background: url("../images/hope-bg.jpg") center / cover no-repeat;
}
.hope-product__copy {
  position: absolute;
  z-index: 2;
  left: 51px;
  top: 29px;
  color: var(--navy);
  font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
  line-height: .95;
  white-space: nowrap;
}
.hope-product__copy span {
  display: block;
  margin-left: 7px;
  font-size: 34px;
  font-weight: 700;
}
.hope-product__copy strong {
  position: relative;
  display: block;
  font-size: 57px;
  font-weight: 800;
  letter-spacing: .015em;
  transform: rotate(-4deg);
  transform-origin: left center;
}
.hope-product__copy strong::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: -5px;
  right: 0;
  bottom: -7px;
  height: 9px;
  background: var(--gold);
  transform: skewX(-18deg) rotate(-1deg);
}
.hope-product__product {
  position: absolute;
  z-index: 1;
  top: 104px;
  right: -12px;
  width: 470px;
  height: 351px;
  overflow: hidden;
}
.hope-product__product img {
  width: 492px;
  height: auto;
  max-width: none;
  display: block;
  transform: translateY(0);
}

.medical {
  min-height: 138px;
}
.medical__copy p {
  font-size: 19px;
}
.medical__copy p::after {
  content: "";
  display: block;
  width: 365px;
  height: 3px;
  margin-top: 8px;
  background: #b99b72;
}

.details {
  min-height: 167px;
}
.details__copy {
  width: 52%;
  padding-left: 20px;
}
.details__copy h2 {
  font-size: 25px;
}
.details__copy p {
  font-size: 16px;
  line-height: 1.55;
}
.details > img {
  width: 48%;
}

.amazon-cta {
  height: auto;
  padding: 0 48px 25px;
}
.amazon-cta a {
  height: auto;
  overflow: visible;
}
.amazon-cta img {
  width: 100%;
  height: auto;
  transform: none;
}

@media (max-width: 600px) {
  .symptoms {
    min-height: 31vw;
  }
  .symptoms__inner {
    padding: 3.2vw 5.9vw 3.2vw;
  }
  .symptoms h2 {
    font-size: clamp(25px, 4.8vw, 36px);
  }
  .symptoms ul {
    margin-top: 2.4vw;
  }
  .symptoms li {
    margin: 1.35vw 0;
    padding-left: 6.4vw;
    font-size: clamp(11px, 2.4vw, 18px);
  }
  .symptoms li::before {
    width: 3.87vw;
    height: 3.87vw;
    line-height: 3.5vw;
    font-size: 2.1vw;
  }

  .decline {
    height: 42vw;
    padding-top: 2.2vw;
  }
  .decline__graph {
    width: 67.8%;
    margin-top: 1.3vw;
  }

  .causes {
    height: 28vw;
    padding-top: 2.7vw;
  }
  .causes h2 {
    font-size: clamp(29px, 5.3vw, 40px);
  }
  .causes__list {
    left: 25%;
    right: 7.1%;
    bottom: 1.9vw;
    gap: 2.2vw;
  }
  .cause-item {
    width: 16vw;
    height: 16vw;
    flex-basis: 16vw;
    font-size: clamp(13px, 2.8vw, 21px);
  }
  .cause-item__etc {
    font-size: 2.7vw;
  }

  .hope-product {
    height: 60vw;
  }
  .hope-product__bg {
    height: 31vw;
  }
  .hope-product__copy {
    left: 6.8%;
    top: 3.8vw;
  }
  .hope-product__copy span {
    font-size: 4.5vw;
  }
  .hope-product__copy strong {
    font-size: 7.6vw;
  }
  .hope-product__product {
    top: 13.5vw;
    right: -1.6%;
    width: 62.7%;
    height: 47vw;
  }
  .hope-product__product img {
    width: 65.6vw;
    height: auto;
  }

  .medical {
    min-height: 19vw;
    padding: 3vw 6.1vw;
  }
  .medical__copy p {
    font-size: 2.53vw;
  }
  .medical__copy p::after {
    width: 47vw;
    height: .4vw;
    margin-top: 1vw;
  }

  .details {
    min-height: 22.13vw;
    margin: 0 6.3vw;
  }
  .details__copy {
    width: 54%;
    padding-left: 2.7vw;
  }
  .details__copy h2 {
    font-size: 3.33vw;
  }
  .details__copy p {
    margin-top: 1.5vw;
    font-size: 2.13vw;
  }
  .details > img {
    width: 46%;
    height: 22.13vw;
    object-fit: cover;
  }

  .amazon-cta {
    padding: 0 6.4vw 3.3vw;
  }
}


/* ===== Section corrections v3 ===== */
.symptoms::after { display: none; }
.symptoms { min-height: 228px; }
.symptoms__inner { padding-bottom: 34px; }
.symptoms li { margin: 11px 0; }

.decline {
  height: 346px;
  padding-top: 17px;
  background: #fff;
  overflow: visible;
  z-index: 1;
}
.decline::after {
  content: "";
  position: absolute;
  z-index: 3;
  left: -8%;
  right: -8%;
  bottom: -32px;
  height: 72px;
  background: #fff;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
.decline__graph {
  width: 515px;
  height: 215px;
  object-fit: fill;
  margin-top: 10px;
}

.causes {
  height: 210px;
  padding-top: 37px;
  filter: none;
  background:
    linear-gradient(rgba(235,237,238,.28), rgba(235,237,238,.28)),
    url("../images/cause-bg.jpg") center / cover no-repeat;
  z-index: 0;
}
.causes h2 { font-size: 40px; }
.causes h2::after { margin-top: 8px; }
.causes__list {
  left: 193px;
  right: 55px;
  bottom: 14px;
  gap: 17px;
}
.cause-item {
  width: 120px;
  height: 120px;
  flex-basis: 120px;
  background: #d71919;
  color: #fff;
  font-size: 21px;
}
.cause-item__etc {
  color: #222;
  font-size: 20px;
  filter: none;
}

@media (max-width: 600px) {
  .symptoms { min-height: 31vw; }
  .symptoms__inner { padding-bottom: 4.5vw; }
  .symptoms li { margin: 1.45vw 0; }

  .decline {
    height: 45vw;
    padding-top: 2.2vw;
  }
  .decline__graph {
    width: 67.8%;
    height: 28.4vw;
    margin-top: 1.3vw;
  }
  .decline::after {
    left: -8%;
    right: -8%;
    bottom: -4.2vw;
    height: 9.4vw;
  }

  .causes {
    height: 28vw;
    padding-top: 4.8vw;
  }
  .causes__list {
    left: 25%;
    right: 7.1%;
    bottom: 1.9vw;
    gap: 2.2vw;
  }
  .cause-item {
    width: 16vw;
    height: 16vw;
    flex-basis: 16vw;
    font-size: clamp(13px, 2.8vw, 21px);
  }
  .cause-item__etc { font-size: 2.7vw; }
}


/* ===== v4 final corrections ===== */
/* The graph asset is never stretched: its intrinsic aspect ratio is preserved. */
.decline {
  height: 455px;
  padding-top: 17px;
  background: #fff;
  overflow: visible;
  position: relative;
  z-index: 2;
}
.decline::after { display: none; }
.decline__graph {
  display: block;
  width: 470px;
  height: auto;
  max-width: calc(100% - 70px);
  margin: 10px auto 0;
  object-fit: initial;
}

/* Causes uses a grayscale background layer so the red circles remain red. */
.causes {
  position: relative;
  height: 210px;
  margin-top: 0;
  padding-top: 32px;
  overflow: visible;
  background: none;
  z-index: 3;
}
.causes::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background: url("../images/cause-bg.jpg") center / cover no-repeat;
  filter: grayscale(100%);
}
/* White ellipse creates the curved boundary from the decline section. */
.causes::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: -30%;
  top: -42px;
  width: 160%;
  height: 84px;
  background: #fff;
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
}
.causes h2 {
  position: relative;
  z-index: 2;
  font-size: 32px;
  line-height: 1.15;
}
.causes h2::after {
  width: 46px;
  height: 2px;
  margin-top: 7px;
}
.causes__list {
  position: absolute;
  z-index: 2;
  left: 193px;
  right: 55px;
  bottom: 17px;
  gap: 17px;
}
.cause-item {
  width: 120px;
  height: 120px;
  flex-basis: 120px;
  background: #d71919;
  color: #fff;
  filter: none;
}
.cause-item__etc {
  color: #222;
  font-size: 20px;
  filter: none;
  white-space: nowrap;
}
/* Curved transition from causes into the hope/product section. */
.causes__bottom-curve {
  position: absolute;
  z-index: 4;
  left: -10%;
  right: -10%;
  bottom: -1px;
  height: 28px;
  background: #fff;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  transform: translateY(50%);
}

.hope-product {
  position: relative;
  z-index: 1;
  height: 455px;
  margin-top: 0;
  overflow: hidden;
  background: #fff;
}
.hope-product__bg {
  position: absolute;
  inset: 0 0 auto 0;
  height: 330px;
  background: url("../images/hope-bg.jpg") center / cover no-repeat;
}
/* White top overlay keeps the section boundary curved rather than rectangular. */
.hope-product::before {
  content: "";
  position: absolute;
  z-index: 3;
  left: -10%;
  top: -23px;
  width: 120%;
  height: 47px;
  background: #fff;
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
}
.hope-product__copy {
  z-index: 4;
}
.hope-product__product {
  z-index: 4;
}

@media (max-width: 600px) {
  .decline {
    height: 60.7vw;
    padding-top: 2.2vw;
  }
  .decline__graph {
    width: 62.7%;
    max-width: none;
    height: auto;
    margin-top: 1.3vw;
  }
  .causes {
    height: 28vw;
    padding-top: 3.8vw;
  }
  .causes::after {
    top: -5.6vw;
    height: 11.2vw;
  }
  .causes h2 {
    font-size: clamp(23px, 4.3vw, 32px);
  }
  .causes::after {
    left: -30%;
    width: 160%;
  }

  .causes__bottom-curve {
    height: 3.2vw;
  }

  .causes__list {
    left: 25%;
    right: 7.1%;
    bottom: 1.9vw;
    gap: 2.2vw;
  }
  .cause-item {
    width: 16vw;
    height: 16vw;
    flex-basis: 16vw;
    font-size: clamp(13px, 2.8vw, 21px);
  }
  .cause-item__etc {
    font-size: 2.7vw;
  }
  .causes__bottom-curve {
    height: 2.8vw;
  }
  .hope-product {
    height: 60vw;
  }
  .hope-product__bg {
    height: 44vw;
  }
  .hope-product::before {
    top: -3vw;
    height: 6.3vw;
  }
}


/* ===== v4 verification fixes ===== */
.details__copy h2 {
  font-size: 23px;
  letter-spacing: -.02em;
}
.details__copy {
  width: 56%;
  padding-left: 20px;
  padding-right: 10px;
}
.details > img {
  width: 44%;
}

@media (max-width: 600px) {
  .causes {
    padding-top: 3vw;
  }
  .details__copy {
    width: 54%;
    padding-left: 2.7vw;
    padding-right: 1.5vw;
  }
  .details__copy h2 {
    font-size: 3.05vw;
    letter-spacing: -.03em;
  }
  .details__copy p {
    font-size: 2.0vw;
  }
  .details > img {
    width: 46%;
  }
}


/* ===== v4 visual pass: lower copy sizing and product crop ===== */
.medical__copy p { font-size: 19px; }
.details__copy h2 { font-size: 25px; }

/* Show only the package area of product.jpg on the right. */
.hope-product__product {
  top: 104px;
  right: -12px;
  width: 310px;
  height: 351px;
  overflow: hidden;
}
.hope-product__product img {
  width: 492px;
  max-width: none;
  height: auto;
  transform: translateX(-274px);
}

@media (max-width: 600px) {
  .medical__copy p { font-size: 2.8vw; }
  .details__copy h2 { font-size: 3.55vw; }
  .details__copy p { font-size: 2.13vw; }

  .hope-product__product {
    top: 13.5vw;
    right: -1.6%;
    width: 43vw;
    height: 47vw;
  }
  .hope-product__product img {
    width: 65.6vw;
    transform: translateX(-36.5vw);
  }
}

/* ===== v5: causes section — bottom boundary flattened per reference ===== */
.causes__bottom-curve {
  display: block;
  position: absolute;
  z-index: 4;
  left: -10%;
  right: -10%;
  bottom: -1px;
  height: 32px;
  background: #fff;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  transform: translateY(50%);
}

.hope-product::before {
  display: none;
}

/* ===== v10: causes curved boundaries ===== */
.causes::after {
  top: -28px;
  height: 48px;
  left: -30%;
  width: 160%;
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
}

.causes__bottom-curve {
  left: -10%;
  right: -10%;
  bottom: -1px;
  height: 32px;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  transform: translateY(50%);
}

@media (max-width: 600px) {
  .causes::after {
    top: -5.6vw;
    height: 7.8vw;
    left: -30%;
    width: 160%;
  }
  .causes__bottom-curve {
    height: 2.8vw;
  }
}

/* ===== v11: causes boundary geometry ===== */
/* 上端：中央を明確に下げたU字。原因は見出しをグレー背景内に収める。 */
.causes::after {
  top: -46px;
  height: 58px;
  left: -30%;
  width: 160%;
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
}

/* 下端：白い余白を作らず、原因セクションの下端そのものをU字にする。 */
.causes {
  border-bottom-left-radius: 50% 16px;
  border-bottom-right-radius: 50% 16px;
  overflow: hidden;
}
.causes__bottom-curve {
  display: none;
}

@media (max-width: 600px) {
  .causes::after {
    top: -9.2vw;
    height: 11.6vw;
  }
  .causes {
    border-bottom-left-radius: 50% 3.2vw;
    border-bottom-right-radius: 50% 3.2vw;
  }
}

/* ===== v12: bottom curve overlaps the next section ===== */
.causes {
  z-index: 3;
}
.hope-product {
  margin-top: -16px;
  z-index: 1;
}

@media (max-width: 600px) {
  .hope-product {
    margin-top: -3.2vw;
  }
}

/* ===== v13: hope/product visual adjustment ===== */
.hope-product__copy {
  top: 43px;
  line-height: 1.08;
  white-space: nowrap;
  text-shadow: none;
}

.hope-product__copy span,
.hope-product__copy strong {
  display: block;
  font-style: italic;
  color: var(--navy);
  -webkit-text-stroke: 4px #fff;
  paint-order: stroke fill;
  text-shadow: 0 0 1px #fff;
}

.hope-product__copy span {
  margin-left: 7px;
  transform: rotate(-3deg);
  transform-origin: left center;
}

.hope-product__copy strong {
  margin-top: 4px;
  transform: rotate(-4deg);
  transform-origin: left center;
}

.hope-product__product {
  top: 128px;
  left: 50%;
  right: auto;
  width: 360px;
  height: 320px;
  overflow: visible;
  transform: translateX(-50%);
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.hope-product__product img {
  width: 360px;
  max-width: 100%;
  height: auto;
  display: block;
  transform: none;
  object-fit: contain;
}

@media (max-width: 600px) {
  .hope-product__copy {
    top: 6.8vw;
  }

  .hope-product__copy span,
  .hope-product__copy strong {
    -webkit-text-stroke: .55vw #fff;
  }

  .hope-product__copy span {
    transform: rotate(-3deg);
  }

  .hope-product__copy strong {
    margin-top: .55vw;
    transform: rotate(-4deg);
  }

  .hope-product__product {
    top: 20vw;
    left: 50%;
    right: auto;
    width: 48vw;
    height: 39vw;
    transform: translateX(-50%);
  }

  .hope-product__product img {
    width: 48vw;
    max-width: 100%;
    transform: none;
  }
}

/* ===== v14: hope/product final layout ===== */
.hope-product {
  height: 645px;
  overflow: visible;
}

.hope-product__bg {
  background-image:
    linear-gradient(to bottom, rgba(255,255,255,0) 45%, rgba(255,255,255,.28) 68%, rgba(255,255,255,.78) 88%, #fff 100%),
    url("../images/hope-bg.jpg");
}

.hope-product__copy {
  left: 48px;
  top: 44px;
}

.hope-product__product {
  top: 145px;
  left: 50%;
  right: auto;
  width: 700px;
  height: auto;
  overflow: visible;
  transform: translateX(-50%);
  display: block;
}

.hope-product__product img {
  width: 700px;
  max-width: none;
  height: auto;
  display: block;
  margin: 0 auto;
  transform: none;
  object-fit: contain;
}

@media (max-width: 600px) {
  .hope-product {
    height: 91.4vw;
  }

  .hope-product__bg {
    background-image:
      linear-gradient(to bottom, rgba(255,255,255,0) 45%, rgba(255,255,255,.28) 68%, rgba(255,255,255,.78) 88%, #fff 100%),
      url("../images/hope-bg.jpg");
  }

  .hope-product__copy {
    left: 6.4%;
    top: 6.8vw;
  }

  .hope-product__product {
    top: 23.5vw;
    left: 50%;
    width: 95vw;
    height: auto;
    transform: translateX(-50%);
  }

  .hope-product__product img {
    width: 95vw;
    max-width: none;
    height: auto;
    margin: 0 auto;
  }
}