@charset "UTF-8";
/* English healthy-aging page (/en/healthy-aging/) — overrides on top of healthy-aging.css */

/* Intro */
.p-ha-intro {
  max-width: 60rem;
  margin-inline: auto;
  text-align: center;
}

.p-ha-intro .c-h1 {
  margin-block: 0 1em;
}

.p-ha-intro .c-txt + .c-txt {
  margin-block-start: 1.25em;
}

/* Centered section dividers */
.p-healthy-aging02-hd .c-h1,
.p-healthy-aging04-hd .c-h1 {
  text-align: center;
  margin-block: 0 clamp(2.5rem, 1.79rem + 3.57vw, 5rem);
}

/* Small eyebrow above a block title */
.p-ha-eyebrow {
  margin-block: 0 0.5em;
  color: hsl(0, 0%, 25%);
  font-weight: 700;
  font-size: clamp(1.125rem, 1.05rem + 0.36vw, 1.375rem);
  line-height: 1.4;
}

/* Mechanism / Benefit / Confidence / Target Consumers labels in brand green */
.c-flex-dl h3.c-h3 {
  color: hsl(146, 76%, 18%);
  margin-block: 1.25rem 0.35rem;
}

/* Landscape infographics & photos: wider column, keep aspect ratio */
.p-healthy-aging01 img,
.p-healthy-aging02 img,
.p-healthy-aging03 img,
.p-healthy-aging04 img {
  height: auto;
}

.c-flex-img img {
  width: 100%;
  height: auto;
}

/* ── Nurturing Wellness from Within ────────────────────────────── */
.p-healthy-aging04 {
  margin-block-start: clamp(5rem, 3.57rem + 7.14vw, 10rem);
}

.p-ha-wellness-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.p-ha-wellness-item {
  position: relative;
  display: block;
  cursor: pointer;
}

.p-ha-wellness-item img {
  display: block;
  width: 100%;
  height: auto;
}

.p-ha-wellness-hoverItem {
  position: absolute;
  inset: 0;
  background: hsl(146deg, 76%, 18%, 92%);
  opacity: 0;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  padding: clamp(1.5rem, 1rem + 2.5vw, 2.75rem);
  transition: opacity 0.3s ease;
}

.p-ha-wellness-hoverItem .c-h3 {
  width: min(24rem, 100%);
  color: #fff;
  text-align: center;
  margin-block: 0 0.9em;
}

.p-ha-wellness-hoverItem .c-txt {
  width: min(24rem, 100%);
  font-size: 0.8125rem;
  line-height: 1.75;
}

.p-ha-wellness-hoverItem .c-btn-sm {
  color: #fff;
  border-color: #fff;
  margin-block-start: 1em;
}

.p-ha-wellness-item.is-open .p-ha-wellness-hoverItem {
  opacity: 1;
  pointer-events: auto;
}

.p-ha-wellness-close {
  position: absolute;
  inset: 1rem 1rem auto auto;
  background: none;
  border: none;
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  pointer-events: auto;
}

@media screen and (max-width: 767px) {
  .p-ha-wellness-list {
    grid-template-columns: 1fr;
  }
}



/* 2026-10-13: Figma（node 832-3749）準拠。繁体字と同じく、研究チャート（表示 450px）と
   導入グラフ（640px）は本文幅の中に置く。このファイルの .c-flex-img 指定より後に置いて上書きする。 */
@media screen and (min-width: 768px) {
  .p-healthy-aging02 .c-flex .c-flex-img.p-ha-chart {
    width: min(28.125rem, 44%);
    margin-inline: 0;
  }

  .p-healthy-aging02 .c-flex .c-flex-img.p-ha-introImg {
    width: min(40rem, 60%);
    margin-inline: 0;
  }
}


/* No.208: SP でカードの説明文が入りきらない場合は、テキストだけをスクロールさせる。
   カード（オーバーレイ）自体は固定し、閉じるボタンは常に右上に表示したままにする。 */
@media screen and (max-width: 767px) {
  .p-ha-wellness-overlay,
  .p-ha-wellness-hoverItem,
  .p-mh-energy-overlay,
  .p-mh-energy-hoverItem {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow: hidden;
    padding: 3.25rem 1.5rem 1.5rem;
  }

  .p-ha-wellness-desc,
  .p-ha-wellness-hoverItem > .c-txt,
  .p-mh-energy-desc,
  .p-mh-energy-hoverItem > .c-txt {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    margin: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .p-ha-wellness-close,
  .p-mh-energy-close {
    z-index: 2;
  }
}