@keyframes splide-loading{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.splide__track--draggable{-webkit-touch-callout:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.splide__track--fade>.splide__list>.splide__slide{margin:0 !important;opacity:0;z-index:0}.splide__track--fade>.splide__list>.splide__slide.is-active{opacity:1;z-index:1}.splide--rtl{direction:rtl}.splide__track--ttb>.splide__list{display:block}.splide__container{box-sizing:border-box;position:relative}.splide__list{backface-visibility:hidden;display:-ms-flexbox;display:flex;height:100%;margin:0 !important;padding:0 !important}.splide.is-initialized:not(.is-active) .splide__list{display:block}.splide__pagination{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:center;justify-content:center;margin:0;pointer-events:none}.splide__pagination li{display:inline-block;line-height:1;list-style-type:none;margin:0;pointer-events:auto}.splide:not(.is-overflow) .splide__pagination{display:none}.splide__progress__bar{width:0}.splide{position:relative;visibility:hidden}.splide.is-initialized,.splide.is-rendered{visibility:visible}.splide__slide{backface-visibility:hidden;box-sizing:border-box;-ms-flex-negative:0;flex-shrink:0;list-style-type:none !important;margin:0;position:relative}.splide__slide img{vertical-align:bottom}.splide__spinner{animation:splide-loading 1s linear infinite;border:2px solid #999;border-left-color:transparent;border-radius:50%;bottom:0;contain:strict;display:inline-block;height:20px;left:0;margin:auto;position:absolute;right:0;top:0;width:20px}.splide__sr{clip:rect(0 0 0 0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.splide__toggle.is-active .splide__toggle__play,.splide__toggle__pause{display:none}.splide__toggle.is-active .splide__toggle__pause{display:inline}.splide__track{overflow:hidden;position:relative;z-index:0}.p-hero{position:relative}.p-hero-ttl{margin-block:0;position:absolute;color:#000;inset-block-start:60%;transform:translate(0, -50%);z-index:2;padding-inline:3%}@media screen and (min-width: 768px){.p-hero-ttl{inset-block-start:50%;inset-inline-start:clamp(3.375rem,2.2rem + 5.89vw,7.5rem);orientation:0}}.p-hero-img{margin:0;height:min(50.625rem,calc(400 / 320 * 100vw))}.p-hero-img .c-pic{height:100%}.p-hero-img img{height:100%;object-fit:cover}.p-sec-num{display:flex;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:.75rem;margin-block:0}.p-sec-num img{width:1.875rem;height:auto}.p-sec-num span{color:hsl(66,68%,44%)}.p-sec01{padding-block-start:clamp(5rem,3.57rem + 7.14vw,10rem);position:relative}@media screen and (min-width: 768px){.p-sec01-bd{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:nowrap;column-gap:clamp(2.5rem,1.79rem + 3.57vw,5rem)}}.p-sec02{padding-block-start:clamp(5rem,3.57rem + 7.14vw,10rem)}.p-sec02-hd{margin-block-end:clamp(2.625rem,2.23rem + 1.96vw,4rem)}.p-sec02-hd .p-sec-num{justify-content:center}.p-sec02-hd .c-h1{text-align:center;margin-block:.3em 0}@media screen and (min-width: 768px){.p-sec02-bd{display:grid;grid-template-columns:1fr 1fr}}.p-sec02-box{position:relative;aspect-ratio:720/640}.p-sec02-box::after{content:"";position:absolute;inset:0;background:hsl(146deg, 76%, 18%, 40%);z-index:2}.p-sec02-box .c-pic{position:absolute;inset:0;z-index:1}.p-sec02-box .c-pic img{height:100%;object-fit:cover}.p-sec02-boxIn{height:100%;position:relative;z-index:3;padding-block:clamp(4.25rem,3.46rem + 3.93vw,7rem);width:min(25rem,94%);margin-inline:auto;display:flex;flex-direction:column;justify-content:center}.p-sec02-boxIn .c-h1{margin-block:0 .75em;color:#fff;text-align:center}.p-sec02-boxIn .c-txt{margin-block:0 3em;color:#fff}.p-sec02-boxIn .c-btn-lg{margin-inline:auto}.p-sec02-icons{list-style:none;margin-block:clamp(4.125rem,3.16rem + 4.82vw,7.5rem) 0;padding-inline-start:0;display:grid;grid-template-columns:repeat(auto-fit, minmax(120px, 1fr));column-gap:clamp(2.5rem,1.79rem + 3.57vw,5rem);row-gap:clamp(1.5rem,1.36rem + .71vw,2rem)}@media screen and (min-width: 768px){.p-sec02-icons{display:flex;justify-content:center;align-items:center;flex-wrap:wrap}}.p-sec02-icons>li{justify-self:center}@media screen and (min-width: 768px){.p-sec02-icons>li img{width:clamp(5rem,2.86rem + 10.71vw,12.5rem);height:auto}}.p-sec02-icons>li .c-h2{text-align:center;font-weight:500}.p-sec03{padding-block-start:clamp(5rem,3.57rem + 7.14vw,10rem)}.p-sec03-hd{margin-block-end:clamp(2.625rem,2.23rem + 1.96vw,4rem)}.p-sec03-hd .p-sec-num{justify-content:center}.p-sec03-hd .c-h1{text-align:center;margin-block:.3em 0}.p-sec04{padding-block-start:clamp(5rem,3.57rem + 7.14vw,10rem)}.p-sec04-hd{margin-block-end:clamp(2.625rem,2.23rem + 1.96vw,4rem)}.p-sec04-hd .p-sec-num{justify-content:center}.p-sec04-hd .c-h1{text-align:center;margin-block:.3em 0}.p-sec05{padding-block-start:clamp(5rem,3.57rem + 7.14vw,10rem);overflow:hidden}.p-sec06{padding-block-start:clamp(5rem,3.57rem + 7.14vw,10rem);padding-block-end:clamp(4.125rem,3.16rem + 4.82vw,7.5rem)}.p-sec06-hd{margin-block-end:clamp(2.625rem,2.23rem + 1.96vw,4rem)}.p-sec06-hd .p-sec-num{justify-content:center}.p-sec06-hd .c-h1{text-align:center;margin-block:.3em 0}.p-sec06-icons{list-style:none;margin-block:0 clamp(2rem,1.71rem + 1.43vw,3rem);padding-inline-start:0;display:grid;grid-template-columns:repeat(auto-fit, minmax(120px, 1fr));column-gap:clamp(1.75rem,1.36rem + 1.96vw,3.125rem);row-gap:clamp(1.5rem,1.36rem + .71vw,2rem)}@media screen and (min-width: 768px){.p-sec06-icons{display:flex;justify-content:center;align-items:center;flex-wrap:wrap}.p-sec06-icons img{width:clamp(5.5rem,3.14rem + 11.79vw,13.75rem)}}.p-sec06 .c-btn-lg{margin-block-start:clamp(2.625rem,2.23rem + 1.96vw,4rem);margin-inline:auto}.p-sec07{padding-block:clamp(5rem,3.57rem + 7.14vw,10rem);background:hsl(146deg, 76%, 18%, 5%)}.p-sec07-hd{margin-block-end:clamp(2rem,1.71rem + 1.43vw,3rem)}.p-sec07-hd .c-h1{margin-block:.3em 0}.p-sec07-tabs{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:1em;margin-block-end:clamp(2rem,1.71rem + 1.43vw,3rem)}@media screen and (min-width: 768px){.p-sec07-tabs{justify-content:flex-end}}.p-sec07-bd{margin-block-end:clamp(2.625rem,2.23rem + 1.96vw,4rem)}.p-sec07-slider{position:relative;--arrow-size: 3rem;--arrow-gap: 1.5625rem;--arrow-out: calc(var(--arrow-size) + var(--arrow-gap))}.p-sec07-slider .splide__arrows{display:none;position:absolute;top:50%;left:0%;right:0;transform:translate(0%, -50%);z-index:3}@media screen and (min-width: 768px){.p-sec07-slider .splide__arrows{display:flex;justify-content:space-between;align-items:center;flex-wrap:nowrap;max-width:73.75rem;left:calc(var(--arrow-size)/-2);right:calc(var(--arrow-size)/-2)}}@media screen and (min-width: 1181px){.p-sec07-slider .splide__arrows{left:calc(-1*var(--arrow-out));right:calc(-1*var(--arrow-out))}}.p-sec07-slider .splide__arrow{background:none;border:none;padding:3px;line-height:0;cursor:pointer}.p-sec07-slider .splide__arrow img{width:clamp(1.5rem,1.18rem + 1.61vw,2.625rem)}.splide__arrow--next img{transform:rotate(180deg)}.p-sec07-slider .splide__track{z-index:2}.p-sec07-slider .splide__slide{width:100%}@media screen and (min-width: 768px){.p-sec07-slider .splide__slide{width:calc((100% - 3.125em)/3)}}.p-sec07 .c-card-link{grid-template-columns:1fr}.p-sec07 .c-btn-lg{margin-inline:auto}.js-tab__content{display:none}.js-tab__content.is-active{display:block}

/* --- merged from top-tw.css (Traditional root) --- */
/* English-only additions for the TOP page. Loaded after the shared top.css. */

/* hero: the English main visual (mv-en.jpg) has the headline/subtitle baked into
   the image, so display it at its natural ratio and visually hide the HTML title
   (kept in the DOM for SEO / screen readers). */
.p-hero--en .p-hero-ttl {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.p-hero--en .p-hero-img {
  height: auto;
}
.p-hero--en .p-hero-img .c-pic {
  height: auto;
}
.p-hero--en .p-hero-img img {
  width: 100%;
  height: auto;
  object-fit: initial;
}

/* sec02: subtitle shown between the title and the description inside each box.
   The description itself reuses the existing .p-sec02-boxIn .c-txt rule. */
.p-sec02-boxIn .p-sec02-sub {
  margin-block: 0 1em;
  color: #fff;
  text-align: center;
  font-size: clamp(1rem, .96rem + .18vw, 1.125rem);
  font-family: "Exo 2", var(--font-sans);
  font-weight: 600;
  letter-spacing: .03em;
}

/* sec02: the box centers its content; with title + subtitle + description + button
   the column gets taller, so relax the fixed aspect ratio on the English site to
   avoid clipping. */
@media screen and (min-width: 768px) {
  .p-sec02 .p-sec02-box {
    aspect-ratio: auto;
    min-height: calc(640 / 720 * 50vw);
  }
}


/* ============================================================
   No.109: ヒーローのスライドショー（繁体字 TOP）
   スライドを絶対配置で重ね、is-active の 1 枚だけを表示。
   JS（common/js/pages/hero.js）が is-active を付け替える。
   ============================================================ */
.p-hero-slider {
  position: relative;
  height: min(50.625rem, calc(400 / 320 * 100vw));
  overflow: hidden;
}

.p-hero-slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 1.2s ease;
}

.p-hero-slide.is-active {
  opacity: 1;
}

.p-hero-slide .c-pic,
.p-hero-slide img {
  height: 100%;
}

.p-hero-slide img {
  width: 100%;
  object-fit: cover;
}


/* No.112 / No.161: TOP 人體臨床研究ブロックの新レイアウト */
.p-sec05-lead {
  margin-block: 0 1.5em;
}

.p-sec05-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem clamp(1rem, .86rem + .71vw, 1.5rem);
}

.p-sec05-list .c-h3 {
  margin: 0;
  color: hsl(146, 76%, 18%);
}

.p-sec05-list .c-txt {
  margin: .25em 0 0;
  line-height: 1.7;
}

.p-sec05-stats {
  list-style: none;
  margin: clamp(1.5rem, 1.36rem + .71vw, 2rem) 0 0;
  padding: clamp(1.25rem, 1.1rem + .71vw, 1.75rem) 0 0;
  border-top: 1px solid hsl(146deg, 76%, 18%, 15%);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.p-sec05-stats .c-h2 {
  margin: 0;
  color: hsl(66, 68%, 44%);
  font-family: "Exo 2", var(--font-sans);
}

.p-sec05-stats .c-txt {
  margin: .25em 0 0;
  line-height: 1.6;
}

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


/* No.157: TOP sec01 末尾のタグライン（Figma ではブランド緑） */
.p-sec01-tagline {
  color: hsl(146, 76%, 18%);
  font-weight: 500;
}


/* No.112: 2 行タイトル「人體臨床研究 / 持續拓展不同族群與健康應用」が 3 行に折れないよう、このブロックだけ一段小さく */
.p-sec05 .c-flex-hd .c-h1 {
  font-size: clamp(1.5rem, 1.29rem + 1.07vw, 2.25rem);
}


/* No.109 支給画像（2880×1392）はコピー入りのため、切り抜かず比率どおりに全体表示する。
   HTML の見出しは SEO / 読み上げ用に残し、視覚的には隠す（英語 TOP の .p-hero--en と同じ扱い）。 */
.p-hero--slider .p-hero-ttl {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.p-hero--slider .p-hero-slider {
  height: auto;
  aspect-ratio: 2880 / 1392;
}


/* No.111 / No.159: 数字アイコンを支給画像（480×324 / 表示 240×162）に差し替え。
   旧画像（200×120）と比率が違うため、上限幅を新サイズに合わせる。 */
@media screen and (min-width: 768px) {
  .p-sec02-icons > li img {
    width: clamp(5.5rem, 3.14rem + 11.79vw, 15rem);
  }
}


/* No.159 再修正: 数字ブロックは PC で 1 行 4 つに固定（英語ラベルが長く折り返していたため） */
@media screen and (min-width: 768px) {
  .p-sec02-icons {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    justify-items: center;
  }
}


/* No.205: SP ではセクション番号とタイトルを中央揃え */
@media screen and (max-width: 767px) {
  .p-sec01 .c-flex-hd,
  .p-sec05 .c-flex-hd {
    text-align: center;
  }

  .p-sec01 .c-flex-hd .p-sec-num,
  .p-sec05 .c-flex-hd .p-sec-num {
    justify-content: center;
  }
}

@media screen and (min-width: 768px) {
  /* 4 列にしたとき、ラベルが 2 行になる項目だけ上にずれないよう上揃え＋1 行表示 */
  .p-sec02-icons {
    align-items: start;
    column-gap: 1.5rem;
  }

  .p-sec02-icons > li .c-h2 {
    white-space: nowrap;
  }
}


/* No.207: 英語のヒーロー画像は 2880×1380 なので、その比率で表示する（繁体字は 2880×1392） */
.p-hero--en.p-hero--slider .p-hero-slider {
  aspect-ratio: 2880 / 1380;
}