.l-mv{position:relative}.l-mv-inner{width:min(64.5rem,94%);margin-inline:auto;position:absolute;inset-block-start:50%;inset-inline:0;transform:translate(0, -50%)}.l-mv-ttl{margin-block:0;display:flex;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:1rem}.l-mv-ttl img{width:1.875rem;height:auto}.l-mv-img{margin:0}.l-mv-img img{height:20rem}.l-breadcrumb{margin-block-start:clamp(2rem,1.71rem + 1.43vw,3rem);color:hsl(0,0%,45%);font-size:.8125rem}@media screen and (min-width: 768px){.l-breadcrumb{font-size:.8125rem}}.l-breadcrumb{font-family:var(--font-sans);font-optical-sizing:auto;font-weight:400;font-style:normal;line-height:1.7538461538;letter-spacing:0}@supports(text-box-trim: trim-both){.l-breadcrumb{text-box-trim:trim-both;text-box-edge:text}}.l-breadcrumb>span>a,.l-breadcrumb>span>span{text-decoration:none;color:inherit}.l-sec-ttl{position:relative;margin-block:0;font-weight:400}.l-sec-ttl::after{content:"";display:block;width:3.5rem;height:2px;background:hsl(66,68%,44%);margin-block:.8571428571em}.c-box{margin-block-start:clamp(2rem,1.71rem + 1.43vw,3rem);background:hsl(146deg, 76%, 18%, 8%);border-radius:.5rem;padding-block:1.5rem;padding-inline:clamp(1.375rem,1.05rem + 1.61vw,2.5rem)}.c-box h3.c-h3{color:hsl(146,76%,18%);margin-block:0 .6666666667em}.c-box-list{list-style:none;margin-block:0;padding-inline-start:0;display:grid;grid-template-columns:1fr;row-gap:.5rem}.c-box-list>li{position:relative;padding-inline-start:1.0625rem}.c-box-list>li::before{content:"";position:absolute;left:0;top:.72em;transform:translateY(-50%);inline-size:.25rem;block-size:.25rem;border-radius:50%;background:hsl(66,68%,44%)}.c-box-list--col2{grid-template-columns:repeat(2, minmax(0, 1fr));column-gap:2.5rem}.p-muscle-health01{margin-block-start:clamp(3rem,2.43rem + 2.86vw,5rem)}.p-muscle-health01-hd{margin-block-end:clamp(3rem,2.43rem + 2.86vw,5rem)}.p-muscle-health01-hd .c-h1{text-align:center;margin-block:0}.p-muscle-health01-hd .c-h3{margin-block:0;text-align:center}.p-muscle-health01-hd .c-h3+.c-h3{margin-block-start:.5rem}.p-muscle-health01 .c-img{margin-block-end:clamp(4.125rem,3.16rem + 4.82vw,7.5rem)}.p-muscle-health02{margin-block-start:clamp(5rem,3.57rem + 7.14vw,10rem)}.p-muscle-health02-hd .c-h1{text-align:center;margin-block:0}.p-muscle-health02-hd .c-h3{margin-block:0;text-align:center}.p-muscle-health02-hd .c-h3+.c-h3{margin-block-start:.5rem}.p-muscle-health02 .c-img{margin-block-end:clamp(4.125rem,3.16rem + 4.82vw,7.5rem)}.p-muscle-health03{margin-block-start:clamp(5rem,3.57rem + 7.14vw,10rem)}.p-muscle-health03-hd{margin-block-end:clamp(4.125rem,3.16rem + 4.82vw,7.5rem)}.p-muscle-health03-hd .c-h1{text-align:center}.p-muscle-health04{margin-block:clamp(5rem,3.57rem + 7.14vw,10rem)}

/* --- merged from muscle-health-tw.css (Traditional root) --- */
@charset "UTF-8";
/* Traditional Chinese muscle-health page (/tw/muscle-health/) — overrides on top of muscle-health.css */

/* Section headings centered, with an English sub-label */
.p-muscle-health01-hd,
.p-muscle-health03-hd,
.p-muscle-health05-hd {
  text-align: center;
}

.p-mh-sub {
  margin-block: 0.25em 0;
  color: hsl(0, 0%, 35%);
  font-family: "Exo 2", var(--font-sans);
  font-size: clamp(1rem, 0.93rem + 0.36vw, 1.25rem);
}

/* 機制 / 益處 labels in brand green */
.c-flex-dl h3.c-h3 {
  color: hsl(146, 76%, 18%);
  margin-block: 1.25rem 0.35rem;
}

/* Landscape charts & photos: wider column, keep aspect ratio */
.c-flex-img img {
  width: 100%;
  height: auto;
}

@media screen and (min-width: 768px) {
  .c-flex-img {
    width: 52%;
  }
}

/* ── 能量代謝 (Energy Metabolism) ──────────────────────────────── */
.p-muscle-health05 {
  margin-block-start: clamp(5rem, 3.57rem + 7.14vw, 10rem);
}

.p-muscle-health05-hd .c-h1 {
  margin-block: 0 clamp(2.5rem, 1.79rem + 3.57vw, 5rem);
}

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

.p-mh-energy-item {
  position: relative;
  display: block;
  cursor: pointer;
}

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

/* click-to-open overlay (Figma: energy*_hover) — toggled by js-productsToggle */
.p-mh-energy-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: 16.6667%;
  background: rgba(11, 82, 42, 0.75);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.p-mh-energy-item.is-open .p-mh-energy-overlay {
  opacity: 1;
  pointer-events: auto;
}

.p-mh-energy-close {
  position: absolute;
  inset: 1rem 1rem auto auto;
  padding: 0;
  background: none;
  border: none;
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.p-mh-energy-desc {
  margin: 0;
  color: #fff;
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
}

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

/* No.76/87: enlarge the research/application images and bleed them to the outer
   screen edge with a negative margin (image-left blocks bleed left, reversed
   image-right blocks bleed right). */
@media screen and (min-width: 768px) {
  .p-muscle-health01 .c-flex-img,
  .p-muscle-health02 .c-flex-img,
  .p-muscle-health03 .c-flex-img,
  .p-muscle-health04 .c-flex-img {
    width: clamp(30rem, 20rem + 28vw, 46rem);
  }
  .p-muscle-health01 .c-flex:not(.c-flex-reverse) .c-flex-img,
  .p-muscle-health02 .c-flex:not(.c-flex-reverse) .c-flex-img,
  .p-muscle-health03 .c-flex:not(.c-flex-reverse) .c-flex-img,
  .p-muscle-health04 .c-flex:not(.c-flex-reverse) .c-flex-img {
    margin-inline-start: calc(50% - 50vw);
  }
  .p-muscle-health01 .c-flex.c-flex-reverse .c-flex-img,
  .p-muscle-health02 .c-flex.c-flex-reverse .c-flex-img,
  .p-muscle-health03 .c-flex.c-flex-reverse .c-flex-img,
  .p-muscle-health04 .c-flex.c-flex-reverse .c-flex-img {
    margin-inline-end: calc(50% - 50vw);
  }
}


/* ============================================================
   No.131〜133 / No.180〜182: 作用機制・Energy Metabolism のカード
   画像一枚絵（card0X.png）から「アイコン画像 + HTML テキスト」に変更。
   旧画像と同じ 960:1040 の縦長比率・交互の背景色を CSS で再現する。
   ============================================================ */
.p-mh-energy-item {
  background: hsl(146deg, 76%, 18%, 5%);
}

.p-mh-energy-item:nth-child(even) {
  background: hsl(146deg, 76%, 18%, 8%);
}

.p-mh-energy-body {
  aspect-ratio: 960 / 1040;
  padding: clamp(2rem, 1.43rem + 2.86vw, 4rem) clamp(1.25rem, .9rem + 1.79vw, 2.5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1.5rem, 1.14rem + 1.79vw, 2.75rem);
  text-align: center;
}

.p-mh-energy-item img.p-mh-energy-icon {
  width: clamp(7.5rem, 5rem + 12.5vw, 11.25rem);
  height: auto;
}

.p-mh-energy-ttl {
  margin: 0;
  line-height: 1.5;
}

.p-mh-energy-x {
  display: block;
  font-size: .85em;
  line-height: 1.6;
}

@media screen and (max-width: 767px) {
  .p-mh-energy-body {
    aspect-ratio: auto;
    min-height: 0;
  }
}


/* No.122 / No.128 / No.172 / No.178: 應用方向（Ideal For）の写真。
   2026-10-13 支給の Figma 比率版（1060×720）に合わせる。 */
.p-mh-photo {
  --photo-ratio: 1060 / 720;
}

.p-mh-photo img {
  aspect-ratio: var(--photo-ratio);
  object-fit: cover;
}


/* 2026-10-13: 繁体字の研究チャート（枠付きカード画像）は、画面端へのはみ出し（No.76/87）を解除して
   本文幅の中に収める。はみ出すとカードの角丸と枠が画面端で切れるため。 */
@media screen and (min-width: 768px) {
  .p-muscle-health01 .c-flex .c-flex-img.p-mh-chart,
  .p-muscle-health03 .c-flex .c-flex-img.p-mh-chart {
    width: 50%;
    margin-inline: 0;
  }
}


/* 2026-10-13: 作用機制カードのアイコンを Figma 書き出しの SVG（160×160）に差し替え。表示上限を Figma と同じ 160px に。 */
.p-mh-energy-item img.p-mh-energy-icon {
  width: clamp(6.5rem, 5.07rem + 7.14vw, 10rem);
}


/* 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;
  }
}