@charset "UTF-8";

/* ==========================================================================
   Base
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  color: #455560;
  font-family: "メイリオ", Meiryo, sans-serif;
  font-weight: 400;
}

/* 750px以上は1440px幅のレイアウトを画面幅に合わせて縮小（拡大はしない） */
@media (min-width: 750px) {
  body {
    zoom: min(1, calc(var(--vw, 1440) / 1440));
  }
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
dl,
dd,
figure,
table {
  margin: 0;
  padding: 0;
}

ul,
ol {
  list-style: none;
}

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

a {
  color: inherit;
  text-decoration: none;
}

/* PC/SPの画像出し分け用。picture自体はレイアウトに影響させない */
picture {
  display: contents;
}

/* display:contents のpicture直下でsourceがflexアイテム化し、
   余計なgapが生まれるのを防ぐ */
source {
  display: none;
}

/* 横スクロールのヒントはSPのみ */
.common-chart-hint {
  display: none;
}

/* ページ内リンクの移動先にJSでフォーカスを移すため、その枠線は消す */
section[tabindex="-1"]:focus {
  outline: none;
}

/* ==========================================================================
   ボタン・リンクのホバー（マウス環境のみ）
   ・共通：opacity 0.8
   ・右向き矢印を持つもの：矢印を少し右へ
   ・下向き矢印を持つもの：矢印を少し下へ
   ・ページトップ（上向き矢印）：矢印を少し上へ
   矢印は transform を既に使っているため、独立した translate プロパティで動かす
   ========================================================================== */
@media (hover: hover) {
  .site-header-logo,
  .site-header-nav-item a,
  .mv-cta-button,
  .anchor-link,
  .distributor-link,
  .site-footer-link-item a,
  .side-nav,
  .page-top {
    transition: opacity 0.2s ease;
  }

  .site-header-logo:hover,
  .site-header-nav-item a:hover,
  .mv-cta-button:hover,
  .anchor-link:hover,
  .distributor-link:hover,
  .site-footer-link-item a:hover,
  .side-nav:hover,
  .page-top:hover {
    opacity: 0.8;
  }

  .mv-cta-button-arrow,
  .anchor-link-icon img,
  .side-nav-icon img,
  .page-top-arrow {
    transition: translate 0.2s ease;
  }

  /* 右向き矢印 */
  .mv-cta-button:hover .mv-cta-button-arrow {
    translate: 3px 0;
  }

  /* 下向き矢印 */
  .anchor-link:hover .anchor-link-icon img,
  .side-nav:hover .side-nav-icon img {
    translate: 0 3px;
  }

  /* 上向き矢印 */
  .page-top:hover .page-top-arrow {
    translate: 0 -3px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mv-cta-button-arrow,
  .anchor-link-icon img,
  .side-nav-icon img,
  .page-top-arrow {
    transition: none;
  }
}

/* ==========================================================================
   header
   ========================================================================== */
/* グローバルナビはスクロールに追従させる */
.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: #fff;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.16));
}

/* 追従ヘッダーの下にアンカー先が隠れないようにする */
section[id],
nav[id] {
  scroll-margin-top: 78px;
}

/* 「良好な運用実績」は着地位置が見出しに近すぎるため、少し上で止める */
#performanceSec {
  scroll-margin-top: 126px;
}

.site-header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1440px;
  margin: 0 auto;
  padding: 16px 80px;
}

.site-header-nav-items {
  display: flex;
  align-items: center;
  gap: 28px;
  color: #455560;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0.7px;
  white-space: nowrap;
}

/* ==========================================================================
   MV (#mvSec)
   ========================================================================== */
.mv {
  position: relative;
  z-index: 2;
}

.mv-container {
  position: relative;
  max-width: 1440px;
  margin: 0 auto;
}

/* ヘッダー下に潜り込む（Figma: hero-visual をページ上端から配置） */
.mv-visual {
  position: absolute;
  top: -81px;
  right: 0;
  width: 748px;
  height: 768px;
}

/*
  MVビジュアルは3レイヤー構成（Figma: hero-visual）
    1. .mv-visual-bg    … 赤背景パターン（repeatで画面右端まで伸ばす）
    2. .mv-visual-earth … 地球（マスクを広げて途中で切れないようにする）
    3. .mv-visual-robot … ロボット本体
  左端の斜めカットは Figma の hero-mask（958×768、hero-visual 基準 x=118）を clip-path で再現。
*/
.mv-visual-scene {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  /* 1440pxを超えた分だけ画面右端まで広げる（--vw はスクロールバーを除いた表示幅） */
  right: min(0px, calc((1440px - var(--vw, 1440) * 1px) / 2));
  /* clip-pathは描画のみを切り抜くため、はみ出し分の横スクロール防止にoverflowも指定 */
  overflow: hidden;
  clip-path: polygon(133.48px 0, 100% 0, 100% 100%, 118px 100%);
}

.mv-visual-bg {
  position: absolute;
  inset: 0;
  background: url("../images/eastspring_asia_tech_mv_bg_tile.png") repeat 12px 4px / 61px 36px;
}

.mv-visual-earth {
  position: absolute;
  top: 82.2px;
  left: -10.7px;
  width: 1003px;
  height: 685px;
  /* 親より横幅が大きいため、共通img のmax-width指定を解除 */
  max-width: none;
}

.mv-visual-robot {
  position: absolute;
  top: 104px;
  left: 87px;
  width: 514px;
}

.mv-contents {
  position: relative;
  padding: 39px 0 40px 114px;
}

.mv-catch {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 589px;
  height: 99px;
  /* 文字サイズを 10% 小さくした分、上の余白を増やして枠の中での文字の上下位置を保つ（元 18px） */
  padding-top: 21px;
  background: url("../images/eastspring_asia_tech_mv_catch_frame.svg") no-repeat 0 0 / 589px 99px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  white-space: nowrap;
}

.mv-catch-main {
  font-size: 21.6px;
  letter-spacing: 1.08px;
}

.mv-catch-accent {
  color: #ed1b2e;
}

.mv-catch-sub {
  margin-top: 1px;
  font-size: 16.2px;
  letter-spacing: 0.81px;
}

.mv-title {
  margin: 10px 0 0 16px;
  font-size: 52px;
  font-weight: 700;
  line-height: 1.29;
  letter-spacing: 2.6px;
}

.mv-type {
  margin: 2px 0 0 4px;
  font-size: 24px;
  line-height: 2;
  letter-spacing: 1.2px;
  white-space: nowrap;
}

.mv-type-kerning {
  letter-spacing: -10.8px;
}

.mv-info {
  display: grid;
  grid-template-columns: 277px 130.8px;
  margin: 4px 0 0 18px;
}

.mv-info-texts {
  padding-top: 24px;
}

.mv-alias {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}

.mv-alias-label {
  padding: 4px 8px 2px;
  border: 1px solid #c3c9cc;
  color: #68737a;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.8px;
}

.mv-alias-name {
  color: #ed1b2e;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 1.6px;
}

.mv-category {
  margin-top: 2.4px;
  font-size: 20px;
  line-height: 2;
  letter-spacing: 1px;
  white-space: nowrap;
}

.mv-cta {
  position: relative;
  /* 1440pxのコンテナからはみ出して画面幅いっぱいに広げる（--vw はスクロールバーを除いた表示幅） */
  --mv-cta-bleed: max(0px, calc((var(--vw, 1440) * 1px - 1440px) / 2));
  margin-right: calc(var(--mv-cta-bleed) * -1);
  margin-left: calc(var(--mv-cta-bleed) * -1);
  height: 205px;
  padding-top: 19.53px;
  background: url("../images/eastspring_asia_tech_mv_cta_bg.png") no-repeat center top / 100% 100%;
}

.mv-cta-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13.807px;
  margin-left: 1.36px;
}

.mv-cta-heading-text {
  padding-left: 6.903px;
  color: #fff;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 1.6px;
  white-space: nowrap;
}

.mv-cta-buttons {
  display: flex;
  justify-content: center;
  gap: 17.26px;
  margin: 12.4px 0 0 3px;
}

.mv-cta-button {
  display: flex;
  align-items: flex-start;
  width: 449.871px;
  height: 92.045px;
  padding: 0 18.4px 0 24.74px;
  background:
    url("../images/eastspring_asia_tech_mv_cta_button_inner.svg") no-repeat 3.46px 2.77px / 443.5px 86.5px,
    url("../images/eastspring_asia_tech_mv_cta_button_frame.svg") no-repeat 0 0 / 100% 100%;
}

.mv-cta-button-icon {
  width: 32.2px;
  margin-top: 31.64px;
}

.mv-cta-button-texts {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  margin-right: 22.5px;
  padding-top: 22.8px;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
}

.mv-cta-button-label {
  color: #ed1b2e;
  font-size: 18px;
  line-height: 1;
  letter-spacing: 0.36px;
}

.mv-cta-button-text {
  margin-top: -1.7px;
  font-size: 24px;
  line-height: 1.8;
  letter-spacing: 1.2px;
}

.mv-cta-button-arrow {
  width: 17px;
  margin-top: 35.67px;
}

.mv-robot-arm {
  position: absolute;
  top: 0;
  right: 0;
  width: 247px;
}

/* ==========================================================================
   キーフィギュア (#keyFiguresSec)
   ========================================================================== */
.key-figures {
  position: relative;
  z-index: 1;
  margin-top: -79px;
  overflow-x: clip;
}

.key-figures-container {
  position: relative;
  height: 1410px;
  padding-top: 166.48px;
  background: url("../images/eastspring_asia_tech_key_figures_bg.jpg") no-repeat center top / cover;
  /* 下端のV字カット（Figma: key-figures-bg の形状） */
  clip-path: polygon(0 0, 100% 0, 100% 92.908%, 50% 100%, 0 92.908%);
}

.key-figures-decoration {
  position: absolute;
  top: 112px;
  right: 0;
  width: 517px;
}

.key-figures-inner {
  position: relative;
  max-width: 1120px;
  margin: 0 auto;
}

.key-figures-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
  width: 735px;
  margin-left: 5px;
}

.key-figures-heading {
  width: 735px;
  height: 276px;
}

/* 書き出し画像はグロー分だけ大きい（左16.77px・下31px） */
.key-figures-heading img {
  width: 765px;
  max-width: none;
  margin-left: -16.77px;
}

.key-figures-lead {
  width: 100%;
  color: #fff;
  font-size: 37.536px;
  line-height: 1.5;
  letter-spacing: 3.7536px;
  text-shadow: 0 0 20.019px #000;
  white-space: nowrap;
}

.key-figures-lead-accent {
  font-size: 41.882px;
  font-weight: 700;
}

.key-figures-items {
  display: flex;
  gap: 19.5px;
  margin: 53.52px -0.25px 0;
}

.key-figures-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 360.5px;
  height: 361.26px;
  /* 上下の余白をそろえる（文字量の多いカードで下が詰まらないよう、中身を上下中央に置く） */
  justify-content: center;
  padding: 0 0.75px;
  background:
    url("../images/eastspring_asia_tech_key_figures_card_frame.svg") no-repeat center / 361.468px 362.604px,
    url("../images/eastspring_asia_tech_key_figures_card_bg.svg") no-repeat 0 0.26px / 360.5px 361px;
  text-align: center;
}

.key-figures-item-icon {
  width: 359px;
}

.key-figures-item-number {
  color: #ed1b2e;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.key-figures-item-number-l {
  font-size: 72px;
}

.key-figures-item-number-s {
  font-size: 32px;
}

/* 「以上」は数値の右にベースラインをそろえて並べる。
   数値に重ねて固定marginで置くと、数字の字幅が違うフォント（Android など）で位置がずれるため */
.key-figures-item-number-overlay {
  display: inline-flex;
  align-items: baseline;
}

.key-figures-item-number-suffix {
  margin-left: 0.15em; /* 「90%」と「以上」の間を詰める（FB 1007） */
  color: #455560;
  font-size: 32px;
  letter-spacing: 1.6px;
}

.key-figures-item-texts {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 311px;
}

.key-figures-item-wide .key-figures-item-texts {
  width: 100%;
}

.key-figures-item-title {
  font-size: 21px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 1.05px;
}

.key-figures-item-wide .key-figures-item-title {
  letter-spacing: -1.05px;
}

/* 小さい「*」はベースラインのままだと下がって見えるため、デザインどおり上付きにする */
.key-figures-item-title-mark {
  font-size: 13.545px;
  vertical-align: 0.42em;
}

.key-figures-item-note {
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.6px;
}

.key-figures-supply {
  height: 228.654px;
  margin-top: 56.74px;
  padding-top: 16.19px;
  background: url("../images/eastspring_asia_tech_key_figures_supply_frame.svg") no-repeat 0 0 / 1120px 228.654px;
}

.key-figures-supply-box {
  width: 1087.337px;
  height: 196.278px;
  margin: 0 auto;
  padding-top: 32px;
  background: #fff;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
}

.key-figures-supply-text {
  font-size: 34px;
  line-height: 1.5;
  letter-spacing: 1.7px;
}

.key-figures-supply-title {
  font-size: 52px;
  line-height: 1.5;
  letter-spacing: 2.6px;
}

.key-figures-supply-underline {
  width: 706px;
  margin: -9.19px 0 0 191.81px;
}

/* ==========================================================================
   ページ内リンク (#anchorSec)
   ========================================================================== */
.anchor {
  max-width: 1120px;
  margin: 0 auto;
}

.anchor-items {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 28px 14px;
}

.anchor-item-wide {
  margin: 0 auto;
}

.anchor-link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 362px;
  height: 165px;
  padding-bottom: 22px;
  background:
    url("../images/eastspring_asia_tech_anchor_corner_tl_s.svg") no-repeat 0 0 / 30px 30px,
    url("../images/eastspring_asia_tech_anchor_square_tl_s.svg") no-repeat 2px 2px / 9px 9px,
    url("../images/eastspring_asia_tech_anchor_corner_br_s.svg") no-repeat 334px 115px / 30px 30px,
    url("../images/eastspring_asia_tech_anchor_square_br_s.svg") no-repeat 353px 134px / 9px 9px,
    url("../images/eastspring_asia_tech_anchor_bg_s.svg") no-repeat 2px 2px / 360px 141px;
}

.anchor-item-wide .anchor-link {
  width: 704px;
  height: 145px;
  background:
    url("../images/eastspring_asia_tech_anchor_corner_tl_l.svg") no-repeat 0 0 / 32px 32px,
    url("../images/eastspring_asia_tech_anchor_square_tl_l.svg") no-repeat 2px 2px / 9px 9px,
    url("../images/eastspring_asia_tech_anchor_corner_br_l.svg") no-repeat 672px 93px / 32px 32px,
    url("../images/eastspring_asia_tech_anchor_square_br_l.svg") no-repeat 693px 114px / 9px 9px,
    url("../images/eastspring_asia_tech_anchor_bg_l.svg") no-repeat 2px 2px / 700px 121px;
}

.anchor-link-text {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 1.6px;
  text-align: center;
  text-shadow: 0 0 4px #fff;
  white-space: nowrap;
}

.anchor-link-icon {
  position: absolute;
  top: 121px;
  left: 155px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 58.165px;
  background: #ed1b2e;
}

.anchor-item-wide .anchor-link-icon {
  top: 101px;
  left: 330px;
}

.anchor-link-icon img {
  width: 21.404px;
}

/* ==========================================================================
   共通パーツ
   ========================================================================== */
/* 背景装飾（Figma: 背景装飾1〜3） */
.common-bg {
  position: relative;
  z-index: 0;
  display: flow-root;
  /* 背景はスクロールしても動かない（固定）。iOSでは background-attachment: fixed が効かないため、
     画面に固定した疑似要素をこの要素の範囲で切り抜いて表示する */
  clip-path: inset(0);
}

.common-bg::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100vh;
  height: 100lvh;
  background-repeat: no-repeat;
  background-position: center top;
  /* 背景画像はデザイン幅1440pxのまま中央配置し、外側は地色で埋める */
  background-size: 1440px auto;
}

.common-bg-1 {
  padding: 80px 0 120px;
  /* キーフィギュアのV字カットの内側まで背景を見せる */
  clip-path: inset(-101px 0 0);
}

.common-bg-1::before {
  background-color: #f1f2f2;
  background-image: url("../images/eastspring_asia_tech_common_bg_1.png");
}

.common-bg-2 {
  padding: 120px 0;
}

.common-bg-2::before {
  background-color: #fff;
  background-image: url("../images/eastspring_asia_tech_common_bg_2.png");
}

.common-bg-3 {
  padding: 120px 0;
}

.common-bg-3::before {
  background-color: #f1f2f2;
  background-image: url("../images/eastspring_asia_tech_common_bg_3.png");
}

/* セクション見出し */
.common-section-heading {
  position: relative;
  max-width: 1120px;
  height: 153px;
  margin: 0 auto;
  padding: 40px 0 32px;
  background:
    url("../images/eastspring_asia_tech_common_section_heading_deco.png") no-repeat 0 0 / 314px 137px,
    url("../images/eastspring_asia_tech_common_section_heading_bar.png") no-repeat 0 137px / 1120px 16px,
    linear-gradient(#fff, #fff) no-repeat 0 0 / 100% 137px;
  box-shadow: 0 0 24px rgba(0, 0, 0, 0.24);
}

.common-section-heading-text {
  font-size: 50px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 2.5px;
  text-align: center;
  white-space: nowrap;
}

/* 枠付きブロック */
.common-block {
  width: 1120px;
  margin: 0 auto;
  padding: 64px 56px 40px;
}

.common-block-header {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.common-block-title {
  display: flex;
  flex-direction: column;
  gap: 40px;
  color: #ed1b2e;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 1.8px;
  text-align: center;
}

.common-block-title-text {
  display: block;
  text-box: trim-both cap alphabetic;
}

.common-block-title::before,
.common-block-title::after {
  content: "";
  display: block;
  width: 1008px;
  height: 12px;
  background: no-repeat 0 0 / 1008px 12px;
}

.common-block-title::before {
  background-image: url("../images/eastspring_asia_tech_common_block_line_top.svg");
}

.common-block-title::after {
  background-image: url("../images/eastspring_asia_tech_common_block_line_bottom.svg");
}

.common-block-lead {
  font-size: 24px;
  line-height: 1.5;
  letter-spacing: 1.2px;
  text-align: center;
  text-box: trim-both cap alphabetic;
}

.common-block-lead-accent {
  color: #ed1b2e;
  font-size: 28px;
  font-weight: 700;
}

/* グラフタイトル */
.common-chart-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.5;
  text-align: center;
}

.common-chart-title::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  margin-top: 15.5px;
  background: #e3e5e5;
}

.common-chart-title-main {
  font-size: 28px;
  font-weight: 700;
}

.common-chart-title-sub {
  font-size: 15px;
}

.common-chart-title-reference {
  line-height: 1.3;
}

.common-chart-title-reference .common-chart-title-sub {
  font-size: 20px;
}

/* 出所・注記 */
.common-notes {
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.6px;
}

.common-notes-item {
  display: flex;
  gap: 2px;
}

.common-notes-mark {
  flex-shrink: 0;
  white-space: nowrap;
}

.common-notes-text {
  flex: 1;
  min-width: 1px;
}

/* ==========================================================================
   なぜアジアのテクノロジー？ (#whySec)
   ========================================================================== */
.why {
  margin-top: 104px;
}

.why-blocks {
  display: flex;
  flex-direction: column;
  gap: 40px;
  margin-top: 80px;
}

.why-block-1 {
  background:
    url("../images/eastspring_asia_tech_why_block1_frame_b.svg") no-repeat 0 0 / 1120px 1247px,
    url("../images/eastspring_asia_tech_why_block1_frame_a.svg") no-repeat 0 0 / 1120px 1229px,
    url("../images/eastspring_asia_tech_why_block1_frame_a.svg") no-repeat 0 0 / 1120px 1229px;
}

.why-block-2 {
  background:
    url("../images/eastspring_asia_tech_why_block2_frame_b.svg") no-repeat 0 0 / 1120px 1085px,
    url("../images/eastspring_asia_tech_why_block2_frame_a.svg") no-repeat 0 0 / 1120px 1056px;
}

.why-block-3 {
  background: url("../images/eastspring_asia_tech_why_block3_frame.svg") no-repeat 0 0 / 1120px 1501px;
}

.why-block-body {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 64px;
}

.why-block-body-wide {
  gap: 32px;
}

.why-chart {
  width: 1008px;
}

.why-chart-semiconductor {
  width: 611px;
  margin: 0 auto;
}

.why-server {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.why-server-image {
  width: 1008px;
  margin-bottom: -3px;
}

.why-supply {
  height: 264px;
  padding: 16px 14px 0;
  background: url("../images/eastspring_asia_tech_why_supply_frame.svg") no-repeat 0 0 / 1008px 264px;
}

.why-supply-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  height: 232px;
  padding-top: 40px;
  background-image: linear-gradient(145.217deg, #c2d5dd 4.6046%, #2b7d9f 96.318%);
  color: #fff;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  white-space: nowrap;
}

.why-supply-text {
  font-size: 30px;
  letter-spacing: 1.5px;
  text-box: trim-both cap alphabetic;
}

.why-supply-messages {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.why-supply-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.why-supply-message-text {
  font-size: 44px;
  letter-spacing: 2.2px;
  text-box: trim-both cap alphabetic;
}

.why-supply-underline-1 {
  width: 706px;
}

.why-supply-message-last {
  position: relative;
  width: 599px;
  height: 51.989px;
}

.why-supply-underline-2 {
  position: absolute;
  top: 44px;
  left: -10.62px;
  width: 592.239px;
}

/* ==========================================================================
   高い成長期待と相対的な割安感 (#valueSec)
   ========================================================================== */
.value-blocks {
  display: flex;
  flex-direction: column;
  gap: 40px;
  margin-top: 80px;
}

.value-block-1 {
  background: url("../images/eastspring_asia_tech_value_block1_frame.svg") no-repeat 0 0 / 1120px 1102px;
}

.value-block-2 {
  background: url("../images/eastspring_asia_tech_value_block2_frame.svg") no-repeat 0 0 / 1120px 1802px;
}

.value-block-body {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 64px;
}

.value-block-body-charts {
  gap: 40px;
}

.value-chart {
  width: 1008px;
}

.value-charts {
  display: flex;
  flex-direction: column;
  gap: 56px;
}

.value-chart-group {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.value-chart-group-per {
  gap: 30px;
}

.value-chart-eps {
  width: 581px;
  margin: 0 auto;
}

.value-chart-per {
  width: 782px;
  max-width: none;
  margin-left: 221.56px;
  overflow: visible; /* 「（倍）」の「（」がx=-2.5で切れないように */
}

/* ==========================================================================
   アジア投資のエキスパートが運用 (#expertSec)
   ========================================================================== */
.expert-blocks {
  display: flex;
  flex-direction: column;
  gap: 40px;
  margin-top: 80px;
}

.expert-block-1 {
  background: url("../images/eastspring_asia_tech_expert_block1_frame.svg") no-repeat 0 0 / 1120px 1848px;
}

.expert-block-2 {
  background: url("../images/eastspring_asia_tech_expert_block2_frame.svg") no-repeat 0 0 / 1120px 1308px;
}

.expert-about {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.expert-about-items {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.expert-about-item {
  display: flex;
  gap: 8px;
}

.expert-about-item::before {
  content: "";
  flex-shrink: 0;
  width: 11px;
  height: 11px;
  background: linear-gradient(#ed1b2e, #ed1b2e) no-repeat center / 4px 4px;
}

.expert-about-item-text {
  flex: 1;
  min-width: 1px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.9px;
  text-box: trim-both cap alphabetic;
}

.expert-stats {
  display: flex;
  gap: 20px;
}

.expert-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 237px;
  height: 237px;
  padding-top: 34px;
  background: #fff;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
}

.expert-stat-icon {
  width: 80px;
}

.expert-stat-icon-wide {
  width: 92.8px;
}

.expert-stat-texts {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 173px;
  margin-top: 25px;
}

.expert-stat-texts-narrow {
  gap: 12px;
}

.expert-stat-number {
  display: flex;
  align-items: flex-end;
  gap: 1px;
  font-weight: 700;
  line-height: 1.8;
  white-space: nowrap;
}

.expert-stat-number > span {
  text-box: trim-both cap alphabetic;
}

.expert-stat-number-value {
  color: #ed1b2e;
  font-size: 56px;
}

.expert-stat-number-unit {
  font-size: 24px;
  letter-spacing: 1.2px;
}

.expert-stat-number-kerning {
  letter-spacing: -0.8px;
}

/* 「＊」は数字・単位の文字の高さの中央に来るよう持ち上げる */
.expert-stat-number-mark {
  font-size: 15.48px;
  font-weight: 400;
  letter-spacing: -4px;
  vertical-align: 0.42em;
}

.expert-stat-caption {
  align-self: stretch;
  font-size: 15px;
  line-height: 1.8;
  letter-spacing: 0.75px;
  white-space: nowrap;
  text-box: trim-both cap alphabetic;
}

.expert-stat-caption-mark {
  font-size: 9.675px;
  vertical-align: 0.42em;
}

.expert-stat-caption-fit {
  align-self: center;
}

.expert-stat-caption-center {
  align-self: center;
  line-height: 1.3;
  text-align: center;
}

.expert-bracket-title {
  width: 1008px;
  color: #ed1b2e;
  font-weight: 700;
  letter-spacing: 1px;
  text-align: center;
  text-box: trim-both cap alphabetic;
}

.expert-bracket-title-person {
  min-height: 61px;
  padding-top: 10px;
  background: url("../images/eastspring_asia_tech_expert_bracket_l.svg") no-repeat 80px 0 / 848px 61px;
  font-size: 28px;
  line-height: 1.6;
}

.expert-bracket-title-sub {
  display: block;
  font-size: 16px;
}

.expert-bracket-title-network {
  min-height: 45px;
  padding-top: 10.98px;
  background: url("../images/eastspring_asia_tech_expert_bracket_s.svg") no-repeat 80px 0 / 848px 45px;
  font-size: 28px;
  line-height: 1.8;
}

.expert-bracket-title-space {
  font-size: 20px;
}

.expert-bracket-title-number {
  font-size: 32px;
}

.expert-person {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  margin-top: 64px;
  padding-top: 63px;
  border-top: 1px solid #e1e4e6;
}

.expert-person-profile {
  display: flex;
  align-items: center;
  gap: 24px;
  width: 868px;
}

.expert-person-photo {
  flex-shrink: 0;
  width: 130px;
  height: 130px;
}

.expert-person-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 20px;
  min-width: 1px;
}

.expert-person-header {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.expert-person-header::after {
  content: "";
  display: block;
  height: 1px;
  margin-top: -1px;
  background: #b0cbd7;
}

.expert-person-name {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 1px;
  text-box: trim-both cap alphabetic;
}

.expert-person-org {
  color: #68737a;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.75px;
  white-space: nowrap;
  text-box: trim-both cap alphabetic;
}

.expert-person-details {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 15px;
  line-height: 1.8;
  letter-spacing: 0.75px;
}

.expert-person-detail {
  white-space: nowrap;
  text-box: trim-both cap alphabetic;
}

.expert-person-detail-bold {
  font-weight: 700;
}

.expert-network {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 64px;
}

.expert-network-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.expert-network-map {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 1008px;
}

.expert-network-map-title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 1px;
  text-align: center;
  text-box: trim-both cap alphabetic;
}

.expert-theme {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 64px;
}

.expert-theme-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.expert-theme-tags {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 20px;
  border-top: 1px solid #e3e5e5;
  border-bottom: 1px solid #e3e5e5;
  background: #fff;
}

.expert-theme-tags-label {
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
}

.expert-theme-tag-items {
  display: flex;
  gap: 4px;
}

.expert-theme-tag-item {
  width: 106px;
  padding: 4px 8px;
  border-radius: 2px;
  color: #fff;
  font-size: 15px;
  line-height: 1;
  text-align: center;
}

.expert-theme-tag-item-robot {
  background: #e58e1a;
}

.expert-theme-tag-item-server {
  background: #ed1b2e;
}

.expert-theme-tag-item-edge {
  background: #7473a9;
}

.expert-theme-tag-item-ev {
  background: #4b721d;
}

.expert-theme-tag-item-ec {
  background: #b30838;
}

.expert-theme-tag-item-software {
  background: #7ba9bc;
}

.expert-theme-tag-item-health {
  background: #ef8566;
}

.expert-theme-map {
  width: 1008px;
}

/* ==========================================================================
   良好な運用実績 (#performanceSec)
   ========================================================================== */
/* 写真はセクション全体に敷き、スクロールしても動かない（固定）。
   ::before が画面に固定した写真で、clip-path でセクションの範囲だけに見せる */
.performance-bg {
  position: relative;
  z-index: 0;
  display: flow-root;
  padding: 120px 0;
  clip-path: inset(0);
}

.performance-bg::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100vh;
  height: 100lvh;
  background:
    linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url("../images/eastspring_asia_tech_performance_bg_photo.jpg") no-repeat center top / cover;
}

.performance {
  max-width: 1120px;
  margin: 0 auto;
}

.performance-heading {
  display: flex;
  justify-content: space-between;
  width: 599px;
  height: 91px;
  margin: 0 auto;
  background:
    url("../images/eastspring_asia_tech_performance_heading_bracket_left.svg") no-repeat 0 4px / 46.904px 86.995px,
    url("../images/eastspring_asia_tech_performance_heading_bracket_right.svg") no-repeat 552px 0 / 46.899px 86.995px;
}

.performance-heading-text {
  width: 100%;
  padding-top: 31px;
  color: #fff;
  font-size: 48px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 2.4px;
  text-align: center;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
  white-space: nowrap;
  text-box: trim-both cap alphabetic;
}

.performance-blocks {
  display: flex;
  flex-direction: column;
  gap: 40px;
  margin-top: 40px;
}

/* 枠線（影を含むSVGのため、ブロック外へはみ出して配置） */
.performance-block {
  position: relative;
  isolation: isolate;
  padding: 80px 56px 40px;
}

.performance-block::before {
  content: "";
  position: absolute;
  top: -11.95px;
  right: -16px;
  bottom: -19.96px;
  left: -16px;
  z-index: -1;
  background: no-repeat 0 0 / 100% 100%;
}

.performance-block-1::before {
  background-image: url("../images/eastspring_asia_tech_performance_block1_frame.svg");
}

.performance-block-2 {
  padding-top: 78px;
}

.performance-block-2::before {
  top: -12.01px;
  bottom: -19.97px;
  background-image: url("../images/eastspring_asia_tech_performance_block2_frame.svg");
}

.performance-block-3 {
  padding-top: 77px;
}

.performance-block-3::before {
  top: -12px;
  bottom: -19.96px;
  background-image: url("../images/eastspring_asia_tech_performance_block3_frame.svg");
}

.performance-block-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

.performance-block-header::after {
  content: "";
  display: block;
  width: 100px;
  height: 4.818px;
  background: url("../images/eastspring_asia_tech_performance_dots.svg") no-repeat 0 0 / 100px 4.818px;
}

.performance-block-1 .performance-block-header {
  gap: 41px;
}

.performance-block-2 .performance-block-header::after {
  background-image: url("../images/eastspring_asia_tech_performance_dots_2.svg");
}

.performance-block-3 .performance-block-header::after {
  background-image: url("../images/eastspring_asia_tech_performance_dots_3.svg");
}

/* Figma: 高さ30pxの枠に対してテキストが上下にはみ出す */
.performance-block-title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 30px;
}

.performance-block-title-text {
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 1.6px;
  text-align: center;
  white-space: nowrap;
  text-box: trim-both cap alphabetic;
}

.performance-block-title-main,
.performance-block-title-sub {
  display: block;
}

.performance-block-title-main {
  font-size: 36px;
}

.performance-block-title-sub {
  font-size: 20px;
  font-weight: 400;
}

.performance-block-1 .performance-block-title-text {
  line-height: 1.3;
}

.performance-block-body {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 48px;
}

.performance-block-1 .performance-block-body {
  gap: 20px;
}

.performance-chart {
  position: relative;
  width: 1008px;
  height: 496px;
}

.performance-chart-returns {
  position: absolute;
  top: 4px;
  left: 80px;
  width: 451px;
}

/* 推移グラフ：他のグラフ（.js-steps）と同じく、軸→折れ線→BOXの順に出す（PCのみ） */
@media (min-width: 750px) {
  .performance-chart-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 1008px;
  }

  /* 期間別騰落率BOXは折れ線のあと＝最後に出す（chart-step-4相当）。
     .js-sequence-item:nth-child(2) の遅延に負けないよう詳細度を上げている */
  .js-steps.js-sequence.is-visible .performance-chart-returns.js-sequence-item {
    transition-delay: calc(var(--step-delay, 0.35s) * 3);
  }
}

.performance-notes {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.performance-notes-item-accent {
  color: #ed1b2e;
}

/* 投資先ファンドの状況 */
.performance-status {
  display: flex;
  justify-content: center;
  gap: 24px;
}

.performance-status-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 320px;
}

.performance-status-item-start {
  align-items: flex-start;
}

.performance-status-item .common-chart-title {
  align-self: stretch;
}

.common-chart-title-s .common-chart-title-main {
  font-size: 24px;
}

.performance-characteristics {
  width: 320px;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 15px;
  line-height: 1.3;
  text-align: center;
  white-space: nowrap;
}

.performance-characteristics th,
.performance-characteristics td {
  height: 43px;
  padding: 6px 4px;
  border: 1px solid #fff;
  font-weight: 400;
  text-box: trim-both cap alphabetic;
}

.performance-characteristics thead th,
.performance-characteristics thead td {
  height: auto;
  width: 80px;
  background: #ed1b2e;
  color: #fff;
  font-size: 14px;
}

.performance-characteristics thead th {
  width: 79px;
}

.performance-characteristics thead .performance-characteristics-blank {
  width: 162px;
}

.performance-characteristics-small {
  font-size: 13px;
}

.performance-characteristics-row-dark th,
.performance-characteristics-row-dark td {
  background: #f4d2a3;
}

.performance-characteristics-row-light th,
.performance-characteristics-row-light td {
  background: #f9e9d1;
}

.performance-status-chart {
  width: 215px;
  margin-right: -7px;
}

.performance-status-item-start .performance-status-chart {
  width: 302px;
  margin-right: 0;
}

/* 組入上位10銘柄 */
.performance-holdings {
  width: 1008px;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: 0.8px;
}

.performance-holdings th,
.performance-holdings td {
  padding: 24px;
  border: 1px solid #fff;
  font-weight: 400;
  text-align: left;
  white-space: nowrap;
  text-box: trim-both cap alphabetic;
}

.performance-holdings thead th,
.performance-holdings thead td {
  background: #ed1b2e;
  color: #fff;
  font-weight: 700;
  text-align: center;
}

.performance-holdings thead tr {
  height: 61px;
}

.performance-holdings tbody tr {
  height: 62px;
}

.performance-holdings tbody tr:nth-child(odd) > * {
  background: #f1f2f2;
}

.performance-holdings tbody tr:nth-child(even) > * {
  background: #e3e5e5;
}

.performance-holdings .performance-holdings-no {
  width: 72px;
  text-align: center;
}

.performance-holdings .performance-holdings-name {
  width: 352px;
}

.performance-holdings tbody .performance-holdings-name {
  font-weight: 700;
}

/* 「国・地域」は左右paddingを含めると列幅に収まらず右へはみ出すため、左右paddingなしで中央ぞろえ */
.performance-holdings .performance-holdings-country {
  width: 100px;
  padding-right: 0;
  padding-left: 0;
  text-align: center;
}

.performance-holdings .performance-holdings-ratio {
  width: 100px;
  text-align: center;
}

/* ==========================================================================
   小見出し（販売会社・ご留意事項など）
   ========================================================================== */
.common-sub-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  width: 1008px;
}

.common-sub-heading::after {
  content: "";
  display: block;
  width: 100px;
  height: 4.818px;
  background: url("../images/eastspring_asia_tech_performance_dots_4.svg") no-repeat 0 0 / 100px 4.818px;
}

.common-sub-heading-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 30px;
  padding: 3.89px 0 2.11px;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 1.6px;
  text-align: center;
  text-box: trim-both cap alphabetic;
}

/* ==========================================================================
   販売会社 (#distributorSec)
   ========================================================================== */
.distributor {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  padding: 80px 0;
  background: #fff;
}

.distributor-lead {
  width: 1040px;
  color: #141414;
  font-size: 15px;
  line-height: 1.8;
  letter-spacing: 0.75px;
  text-align: center;
}

/* 販売会社ボタン＋金融商品仲介業者の一覧 */
.distributor-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.distributor-items {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  width: 834px;
}

.distributor-agents {
  color: #141414;
  font-size: 18px;
  line-height: 2;
  letter-spacing: 0.9px;
  white-space: nowrap;
}
.distributor-agent-br {
  display: none;
}
.distributor-link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 262px;
  height: 96px;
  padding-top: 1px;
  border: 1px solid #455560;
  background: #fff;
}

.distributor-link::after {
  content: "";
  position: absolute;
  top: 7px;
  right: 7px;
  width: 18px;
  height: 18px;
  background: url("../images/eastspring_asia_tech_icon_external.svg") no-repeat center / 13.5px 13.5px;
}

.distributor-logo-sbi {
  width: 128px;
  margin-top: -1px;
}

.distributor-logo-jtg {
  width: 162px;
}

.distributor-logo-maruhachi {
  width: 188px;
}

.distributor-logo-monex {
  width: 180px;
  margin-top: -1px;
}

.distributor-logo-rakuten {
  width: 220px;
}

/* ==========================================================================
   ご留意事項 (#riskSec / #costSec / #disclaimerSec)
   ========================================================================== */
.notice {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  max-width: 1120px;
  margin: 0 auto;
  padding: 80px 0;
  border-top: 1px solid #e1e4e6;
  background: #fff;
}

.notice-block {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.notice-block-title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 1px;
}

.notice-block-text {
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0.75px;
}

.notice-underline {
  text-decoration: underline;
  text-underline-position: from-font;
}

.notice-accent {
  color: #ed1b2e;
}

.notice-list {
  padding-left: 22.5px;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0.75px;
  list-style: disc;
}

.risk-items {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 16px;
}

.risk-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  width: 550px;
  padding: 20px;
  border: 1px solid #f1f2f2;
}

.risk-item-fixed {
  height: 189px;
}

.risk-item-icon {
  flex-shrink: 0;
  width: 50px;
}

.risk-item-texts {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 1px;
  line-height: 1.5;
}

.risk-item-title {
  color: #ed1b2e;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 1px;
}

.risk-item-text {
  font-size: 15px;
  letter-spacing: 0.75px;
}

/* 費用テーブル */
.cost-table {
  display: flex;
  flex-direction: column;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0.75px;
}

.cost-row {
  display: flex;
}

.cost-row + .cost-row {
  margin-top: -1px;
}

.cost-row-center {
  align-items: center;
}

.cost-row-h80 {
  align-items: stretch;
  height: 80px;
}

.cost-row-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 1px;
}

.cost-row-body-groups {
  gap: 12px;
}

.cost-cell,
.cost-row-body {
  margin-left: -1px;
}

.cost-cell:first-child,
.cost-row-body:first-child {
  margin-left: 0;
}

.cost-row-body > .cost-cell + .cost-row,
.cost-row-body > .cost-row + .cost-row {
  margin-top: -1px;
}

.cost-cell {
  padding: 16px 24px;
  border: 1px solid #c8cacb;
}

.cost-cell-head,
.cost-cell-sub {
  white-space: nowrap;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 160px;
  text-align: center;
}

.cost-cell-head {
  background: #e3e5e5;
  font-weight: 700;
}

.cost-cell-sub {
  background: #f1f2f2;
}

.cost-cell-label {
  flex-shrink: 0;
  padding: 16px 40px;
  background: #f1f2f2;
  white-space: nowrap;
}

.cost-cell-text {
  flex: 1;
  min-width: 1px;
  background: #fff;
}

.cost-row-h80 .cost-cell-text {
  display: flex;
  align-items: center;
}

/* ==========================================================================
   footer
   ========================================================================== */
.site-footer {
  padding: 0 0 20px;
  background: #fff;
  font-family: "BIZ UDPGothic", "BIZ UDPゴシック", sans-serif;
}

.site-footer::before {
  content: "";
  display: block;
  max-width: 1120px;
  height: 1px;
  margin: 0 auto 40px;
  background: #e1e4e6;
}

.site-footer-sns-items {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.site-footer-sns-item img {
  width: 42px;
}

.site-footer-link-items {
  display: flex;
  justify-content: center;
  margin-top: 40px;
  font-size: 16px;
  line-height: 22.4px;
  white-space: nowrap;
}

.site-footer-link-item + .site-footer-link-item::before {
  content: "| ";
  color: #fff;
}

.site-footer-copyright {
  padding: 16px 0;
  font-size: 16px;
  line-height: 24px;
  text-align: center;
  white-space: nowrap;
}

/* ==========================================================================
   アニメーション
   ========================================================================== */
.js-fade-up,
.js-sequence-item {
  opacity: 0;
  transform: translateY(var(--fade-distance, 40px));
  transition:
    opacity var(--fade-duration, 0.8s) ease-out,
    transform var(--fade-duration, 0.8s) ease-out;
}

.js-fade-up.is-visible,
.js-sequence.is-visible .js-sequence-item {
  opacity: 1;
  transform: translateY(0);
}

.js-sequence {
  /* svgグラフは約30%速く */
  --fade-duration: 0.56s;
}

.js-sequence.is-visible .js-sequence-item:nth-child(2) {
  transition-delay: var(--sequence-delay, 0.42s);
}

@media (prefers-reduced-motion: reduce) {
  .js-fade-up,
  .js-sequence-item {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* 位置は動かさず、透過のみでふわっと表示 */
.js-fade {
  opacity: 0;
  transition: opacity var(--fade-duration, 0.8s) ease-out;
}

.js-fade.is-visible {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .js-fade {
    opacity: 1;
    transition: none;
  }
}

/* グラフのステップ表示（Figma: step1〜7 のレイヤー名に対応）
   svg 内の <g> は位置を持たず、アニメーション専用。座標は <image> の x/y に持つ。
   <g> の並び順は重なり順のままにし、表示順は chart-step-N クラスの遅延で指定する */
.js-steps .chart-step {
  opacity: 0;
  transform: translate(var(--step-x, 0), var(--step-y, var(--step-distance, 20px)));
  transition:
    opacity var(--step-duration, 0.56s) ease-out,
    transform var(--step-duration, 0.56s) ease-out;
}

/* 折れ線など、左から右へ入れたいレイヤー */
.js-steps .chart-step-right {
  --step-x: calc(var(--step-distance, 20px) * -1);
  --step-y: 0;
}

.js-steps.is-visible .chart-step {
  opacity: 1;
  transform: translate(0, 0);
}

.js-steps.is-visible .chart-step-2 {
  transition-delay: calc(var(--step-delay, 0.35s) * 1);
}
.js-steps.is-visible .chart-step-3 {
  transition-delay: calc(var(--step-delay, 0.35s) * 2);
}
.js-steps.is-visible .chart-step-4 {
  transition-delay: calc(var(--step-delay, 0.35s) * 3);
}
.js-steps.is-visible .chart-step-5 {
  transition-delay: calc(var(--step-delay, 0.35s) * 4);
}
.js-steps.is-visible .chart-step-6 {
  transition-delay: calc(var(--step-delay, 0.35s) * 5);
}
.js-steps.is-visible .chart-step-7 {
  transition-delay: calc(var(--step-delay, 0.35s) * 6);
}

@media (prefers-reduced-motion: reduce) {
  .js-steps .chart-step {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ポップアップ（小さい状態から勢いよく出現） */
.js-pop {
  opacity: 0;
}

.js-pop.is-visible {
  animation: js-pop var(--pop-duration, 0.6s) ease-out forwards;
}

@keyframes js-pop {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }

  50% {
    opacity: 1;
    transform: scale(1.05);
  }

  70% {
    transform: scale(0.92);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .js-pop,
  .js-pop.is-visible {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* 下から少し拡大しながら表示（scale in up） */
.js-scale-up {
  opacity: 0;
  transform: translateY(var(--scale-distance, 20px)) scale(var(--scale-from, 0.92));
  transition:
    opacity var(--scale-duration, 0.8s) ease-out,
    transform var(--scale-duration, 0.8s) ease-out;
}

.js-scale-up.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .js-scale-up {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* ==========================================================================
   固定ボタン
   ========================================================================== */
.side-nav {
  position: fixed;
  top: 50%;
  right: -4px;
  z-index: 20;
  width: 80px;
  height: 309px;
  transform: translateY(-50%);
  filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.24));
  background:
    url("../images/eastspring_asia_tech_side_nav_corner_top.svg") no-repeat 0 0 / 30px 30px,
    url("../images/eastspring_asia_tech_side_nav_corner_bottom.svg") no-repeat 0 279px / 30px 30px,
    url("../images/eastspring_asia_tech_side_nav_bg.svg") no-repeat 2px 2px / 74px 305px;
}

/* 縦書きの文字はフォントによって（Windowsのメイリオ等）位置がずれるため、
   アウトライン化した SVG 画像にしている（18px Bold、1文字の送り 19.8px）。
   白い光彩はSVGに含まれるため（文字の周囲に24pxの余白）、その分大きく上にずらして配置する */
.side-nav-text {
  position: absolute;
  top: 14px;
  left: 50%;
  width: 66px;
  height: 244px;
  margin-left: 1px;
  transform: translateX(-50%);
}

.side-nav-icon {
  position: absolute;
  top: 249px;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-left: 1px;
  transform: translateX(-50%);
  border-radius: 31.726px;
  background: #ed1b2e;
}

.side-nav-icon img {
  width: 11.673px;
}

.page-top {
  position: fixed;
  right: 14px;
  bottom: 16px;
  z-index: 20;
  width: 48px;
  height: 48px;
  overflow: clip;
  border: 1px solid #ed1b2e;
  border-radius: 24px;
  background-image: linear-gradient(102.2deg, #fff 0.73%, #e2e2e2 99.4%);
  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.24);
}

.page-top-arrow {
  position: absolute;
  top: 18.05px;
  left: 14.84px;
  width: 14.316px;
  height: 14.316px;
  border-top: 2px solid #ed1b2e;
  border-right: 2px solid #ed1b2e;
  transform: rotate(-45deg);
}

/* ==========================================================================
   SP（749px以下）
   ・PCは1440px固定レイアウトを zoom で縮小表示、SPは「文字サイズは固定・幅は可変」
   ・PCの既存ルールは変更しない。SP用の指定はすべてこのセクションにまとめる
   ========================================================================== */

/* アイコンと数値のまとめ。PCではレイアウトに影響させない */
.key-figures-item-stat {
  display: contents;
}

/* SP専用の要素はPCでは出さない */
.site-header-menu,
.site-header-overlay,
.mv-visual-sp {
  display: none;
}

/* 表示切替ユーティリティ */
@media (max-width: 749px) {
  .pc-only {
    display: none !important;
  }
}

@media (min-width: 750px) {
  .sp-only {
    display: none !important;
  }
}

@media (max-width: 749px) {
  /* ------------------------------------------------------------------
     base
     ------------------------------------------------------------------ */
  body {
    /* デザイン390px幅：左右の余白20px */
    --sp-gutter: 20px;
  }

  /* 端数のはみ出しで横スクロールが出ないようにする
     （hiddenと違いclipはスクロールコンテナを作らないので、追従ヘッダーは効いたまま） */
  html {
    overflow-x: hidden;
  }

  /* ヘッダーを追従させるため、ページ内リンクの着地位置をその分ずらす */
  section[id],
  nav[id] {
    scroll-margin-top: 62px;
  }

  #performanceSec {
    scroll-margin-top: 94px;
  }

  /* SPのデザインに右側の追従ナビはない（下部固定バー＋ページトップに置き換え） */
  .side-nav {
    display: none;
  }

  /* ドロワーを開いている間は背面をスクロールさせない */
  html.is-nav-open,
  html.is-nav-open body {
    overflow: hidden;
  }

  /* ------------------------------------------------------------------
     header（390×62／ロゴ＋ハンバーガー）
     ------------------------------------------------------------------ */
  .site-header {
    position: sticky;
    top: 0;
    /* filter は position:fixed の子要素の基準になってしまうため、SPでは box-shadow を使う */
    filter: none;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.16);
  }

  .site-header-container {
    padding: 16px var(--sp-gutter);
  }

  .site-header-logo img {
    width: 101.05px;
    height: auto;
  }

  /* ハンバーガーボタン：アイコンは24×16、タップ領域は44×44 */
  .site-header-menu {
    position: relative;
    display: block;
    flex: none;
    width: 24px;
    height: 16px;
    padding: 0;
    border: 0;
    background: none;
    appearance: none;
    cursor: pointer;
  }

  .site-header-menu::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
  }

  .site-header-menu-bar {
    position: absolute;
    left: 0;
    display: block;
    width: 24px;
    height: 2px;
    background: #455560;
    transition:
      transform 0.3s ease,
      opacity 0.2s ease;
  }

  .site-header-menu-bar:nth-child(1) {
    top: 0;
  }

  .site-header-menu-bar:nth-child(2) {
    top: 7px;
  }

  .site-header-menu-bar:nth-child(3) {
    top: 14px;
  }

  /* 開いている間は×印にする */
  .site-header-menu[aria-expanded="true"] .site-header-menu-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .site-header-menu[aria-expanded="true"] .site-header-menu-bar:nth-child(2) {
    opacity: 0;
  }

  .site-header-menu[aria-expanded="true"] .site-header-menu-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* ------------------------------------------------------------------
     ドロワーメニュー（ヘッダーの下に右から出す）
     ------------------------------------------------------------------ */
  .site-header-nav {
    position: fixed;
    top: 62px;
    right: 0;
    bottom: 0;
    z-index: 2;
    width: min(280px, 78%);
    overflow-y: auto;
    overscroll-behavior: contain;
    visibility: hidden;
    background: #fff;
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.16);
    transform: translateX(100%);
    transition:
      transform 0.3s ease,
      visibility 0.3s;
  }

  .site-header-nav.is-open {
    visibility: visible;
    transform: translateX(0);
  }

  .site-header-nav-items {
    display: block;
    white-space: normal;
  }

  .site-header-nav-item {
    border-bottom: 1px solid #dadbdb;
  }

  /* 長い項目は折り返す。矢印は絶対配置にしてテキストの幅に影響させない */
  .site-header-nav-item a {
    position: relative;
    display: block;
    padding: 16px 44px 16px var(--sp-gutter);
  }

  .site-header-nav-item a::after {
    content: "";
    position: absolute;
    top: 50%;
    right: var(--sp-gutter);
    width: 12px;
    height: 14px;
    background: url("../images/eastspring_asia_tech_icon_arrow_double_right.svg") no-repeat center / contain;
    transform: translateY(-50%);
  }

  .site-header-overlay {
    position: fixed;
    inset: 62px 0 0;
    z-index: 1;
    display: block;
    visibility: hidden;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    transition:
      opacity 0.3s ease,
      visibility 0.3s;
  }

  .site-header-overlay.is-open {
    visibility: visible;
    opacity: 1;
  }
}

@media (max-width: 749px) and (prefers-reduced-motion: reduce) {
  .site-header-menu-bar,
  .site-header-nav,
  .site-header-overlay {
    transition: none;
  }
}

@media (max-width: 749px) {
  /* ------------------------------------------------------------------
     MV（#mvSec）
     ・ビジュアルは1枚画像。ロボットの手がバンド下にはみ出す分は
       高さに含めないよう、枠を aspect-ratio で切ってから画像を重ねる
     ------------------------------------------------------------------ */
  .mv-visual-sp {
    position: relative;
    display: block;
    aspect-ratio: 390 / 160;
  }

  .mv-visual-sp img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    max-width: none;
    height: auto;
  }

  .mv-visual,
  .mv-robot-arm {
    display: none;
  }

  .mv-contents {
    padding: 24px var(--sp-gutter) 0;
  }

  /* 中身はデザイン幅350pxまで。狭い端末では縮む */
  .mv-catch,
  .mv-title,
  .mv-type,
  .mv-info {
    width: 100%;
    max-width: 350px;
    margin-right: auto;
    margin-left: auto;
  }

  .mv-catch {
    height: 113px;
    /* 文字サイズを 10% 小さくした分、上の余白を増やして枠の中での文字の上下位置を保つ（元 22px） */
    padding-top: 26px;
    background-image: url("../images/eastspring_asia_tech_sp_mv_catch_frame.svg");
    background-size: 100% 113px;
    white-space: normal;
  }

  /* 行末の「。」は字面が左半分だけのため、中央ぞろえだと左に寄って見える。
     左に半角分の余白を足して、見た目の中央にそろえる */
  .mv-catch-main {
    padding-left: 0.5em;
    font-size: 18px;
    letter-spacing: 0.9px;
  }

  .mv-catch-sub {
    margin-top: 6px;
    font-size: 13.5px;
    letter-spacing: 0.675px;
  }

  .mv-title {
    margin-top: 12px;
    font-size: 28px;
    line-height: 1.3;
    letter-spacing: 1.4px;
    text-align: center;
  }

  .mv-type {
    margin-top: 2px;
    font-size: 14px;
    letter-spacing: 0.7px;
    text-align: center;
    white-space: normal;
  }

  .mv-type-kerning {
    letter-spacing: -6.3px;
  }

  .mv-info {
    grid-template-columns: minmax(0, 1fr) 91.065px;
    margin-top: 6.8px;
    padding: 0 15.9px 0 15px;
  }

  .mv-info-texts {
    padding-top: 6.96px;
  }

  .mv-alias {
    gap: 9.6px;
  }

  /* 上下の余白をpaddingで調整するとフォントの縦メトリクス次第で文字が上下にずれる（Android）ため、
     高さを固定して中央ぞろえにする */
  .mv-alias-label {
    display: inline-flex;
    align-items: center;
    height: 25px;
    padding: 0 6px;
    line-height: 1;
    font-size: 14px;
    letter-spacing: 0.7px;
  }

  .mv-alias-name {
    font-size: 26px;
    letter-spacing: 1.3px;
  }

  .mv-category {
    margin-top: 0;
    font-size: 18px;
    letter-spacing: 0.9px;
  }

  .mv-nisa {
    width: 91.065px;
  }

  /* ------------------------------------------------------------------
     MV下のCTA（赤帯）
     ------------------------------------------------------------------ */
  .mv-cta {
    height: 255px;
    margin-top: 16px;
    padding-top: 20px;
    background-image: url("../images/eastspring_asia_tech_sp_mv_cta_bg.png");
  }

  /* 区切り線は左右20pxに絶対配置し、見出しは中央に置く */
  .mv-cta-heading {
    position: relative;
    gap: 0;
    margin-left: 0;
  }

  .mv-cta-heading img {
    position: absolute;
    top: 50%;
    width: 33px;
    height: 5px;
    translate: 0 -50%;
  }

  .mv-cta-heading picture:first-of-type img {
    left: var(--sp-gutter);
  }

  .mv-cta-heading picture:last-of-type img {
    right: var(--sp-gutter);
  }

  .mv-cta-heading-text {
    padding-left: 4px;
    font-size: 18px;
    line-height: 1.3;
    letter-spacing: 0.9px;
    text-align: center;
  }

  .mv-cta-buttons {
    flex-direction: column;
    align-items: center;
    gap: 9.336px;
    margin: 11.2px 0 0;
  }

  .mv-cta-button-item {
    width: 100%;
    max-width: 350px;
  }

  /* ボタンはPCの0.778倍。背景は%指定にして幅が変わっても崩れないようにする */
  .mv-cta-button {
    width: 100%;
    height: 71.611px;
    padding: 0 14.32px 0 19.25px;
    background-position:
      54.2% 50%,
      0 0;
    background-size:
      98.58% 93.98%,
      100% 100%;
  }

  .mv-cta-button-icon {
    width: 25.06px;
    margin-top: 24.62px;
  }

  .mv-cta-button-texts {
    margin-right: 17.51px;
    padding-top: 17.74px;
  }

  .mv-cta-button-label {
    font-size: 14.004px;
    letter-spacing: 0.28px;
  }

  .mv-cta-button-text {
    margin-top: -1.32px;
    font-size: 18.672px;
    letter-spacing: 0.9336px;
  }

  .mv-cta-button-arrow {
    width: 13.23px;
    margin-top: 27.75px;
  }
}

@media (max-width: 749px) {
  /* ------------------------------------------------------------------
     キーフィギュア（#keyFiguresSec）
     ・PCは「装飾→中身」の順。SPは「見出し→地球→カード→まとめ」なので
       inner を display:contents にして order で並べ替える
     ------------------------------------------------------------------ */
  .key-figures {
    margin-top: 0;
  }

  .key-figures-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: auto;
    padding: 56px var(--sp-gutter) 80px;
    background-image: url("../images/eastspring_asia_tech_sp_key_figures_bg.jpg");
    /* 下端のV字カット（40px） */
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 40px), 50% 100%, 0 calc(100% - 40px));
  }

  .key-figures-inner {
    display: contents;
  }

  .key-figures-header {
    order: 0;
    gap: 8px;
    width: 100%;
    max-width: 350px;
    margin-left: 0;
  }

  .key-figures-heading {
    width: 100%;
    height: auto;
  }

  /* 書き出し画像はグロー分だけ左右に7pxずつ大きい */
  .key-figures-heading img {
    width: 104%;
    margin-left: -2%;
  }

  .key-figures-lead {
    font-size: 18px;
    letter-spacing: 1.8px;
    text-shadow: 0 0 9.533px #000;
  }

  .key-figures-lead-accent {
    font-size: 22px;
  }

  /* 地球＋手。SPは画面幅いっぱい */
  .key-figures-decoration {
    position: static;
    order: 1;
    width: 100vw;
    max-width: none;
    margin-top: 24px;
  }

  .key-figures-items {
    display: flex;
    order: 2;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    max-width: 350px;
    margin: 40px 0 0;
  }

  .key-figures-item {
    gap: 8px;
    width: 100%;
    justify-content: center;
    /* 文字量で高さが変わっても上下の余白が同じになるよう、高さは中身なりにする */
    height: auto;
    min-height: 205px;
    padding: 24px 15px;
    background:
      url("../images/eastspring_asia_tech_sp_key_figures_card.svg") no-repeat 0 0 / 100% 100%;
  }

  .key-figures-item-stat {
    display: flex;
    gap: 2px;
    align-items: center;
    justify-content: center;
  }

  .key-figures-item:not(:first-child) .key-figures-item-stat {
    gap: 4px;
  }

  /* アイコン画像は下の余白を切り落とした 2x PNG（半導体 50×45、ほか 54×44） */
  .key-figures-item-icon {
    width: 50px;
    height: 45px;
  }

  .key-figures-item:not(:first-child) .key-figures-item-icon {
    width: 54px;
    height: 44px;
  }

  .key-figures-item-number-l {
    font-size: 56px;
  }

  .key-figures-item-number-s {
    font-size: 24px;
  }

  .key-figures-item-number-suffix {
    font-size: 24px;
    letter-spacing: 1.2px;
  }

  .key-figures-item-texts {
    gap: 8px;
    width: 100%;
  }

  .key-figures-item-title {
    font-size: 15px;
    line-height: 1.5;
    letter-spacing: 0.75px;
  }

  .key-figures-item-wide .key-figures-item-title {
    letter-spacing: 0.75px;
  }

  .key-figures-item-title-mark {
    font-size: inherit;
    vertical-align: baseline;
  }

  .key-figures-item-note {
    font-size: 11px;
    letter-spacing: 0.55px;
  }

  /* ------------------------------------------------------------------
     まとめ（アジア企業は不可欠な存在に）
     ------------------------------------------------------------------ */
  .key-figures-supply {
    order: 3;
    width: 100%;
    max-width: 350px;
    height: 204px;
    margin-top: 40px;
    padding-top: 10px;
    background-image: url("../images/eastspring_asia_tech_sp_key_figures_supply_frame.svg");
    background-position: -1px -1px;
    background-size: calc(100% + 2px) 206px;
  }

  .key-figures-supply-box {
    width: calc(100% - 20px);
    height: 184px;
    padding-top: 20px;
    white-space: normal;
  }

  .key-figures-supply-text {
    font-size: 20px;
    letter-spacing: 1px;
  }

  .key-figures-supply-title {
    margin-top: 2px;
    font-size: 26px;
    letter-spacing: 1.3px;
  }

  /* 2行それぞれに点線の下線。幅は文字の実幅に合わせる */
  .key-figures-supply-title-line {
    position: relative;
    display: block;
    width: fit-content;
    margin-inline: auto;
  }

  .key-figures-supply-title-line + .key-figures-supply-title-line {
    margin-top: 4px;
  }

  .key-figures-supply-title-line::after {
    content: "";
    position: absolute;
    top: 35px;
    right: 0;
    left: 0;
    height: 4px;
    background: url("../images/eastspring_asia_tech_sp_underline_dash.svg") repeat-x 0 0 / 5.4945px 4px;
  }

  .key-figures-supply-underline {
    display: none;
  }
}

@media (max-width: 749px) {
  /* ------------------------------------------------------------------
     ページ内リンク（#anchorSec）
     ・1〜3番目は350×86で縦並び、4番目だけ278×78でアイコンが下辺に重なる
     ------------------------------------------------------------------ */
  .anchor {
    max-width: none;
    /* 4つ目のアイコンが下辺から7pxはみ出す分を確保 */
    padding: 32px var(--sp-gutter) 7px;
  }

  .anchor-items {
    flex-direction: column;
    gap: 4px;
  }

  .anchor-item {
    width: 100%;
    max-width: 350px;
  }

  .anchor-item-wide {
    width: 278px;
    margin-top: 12px;
  }

  .anchor-link {
    width: 100%;
    height: 86px;
    padding-bottom: 0;
    background: url("../images/eastspring_asia_tech_sp_anchor_frame_s.svg") no-repeat 0 0 / 100% 100%;
  }

  .anchor-item-wide .anchor-link {
    width: 100%;
    height: 78px;
    background: url("../images/eastspring_asia_tech_sp_anchor_frame_l.svg") no-repeat 0 0 / 100% 100%;
  }

  /* 右のアイコンと文字が重ならないよう、右にアイコン分の余白をとる。
     いちばん長い「アジア投資のエキスパートが運用」（15文字）が収まるよう、狭い端末では文字を縮める */
  .anchor-item:not(.anchor-item-wide) .anchor-link {
    padding-right: 56px;
    padding-left: 40px;
  }

  .anchor-link-text {
    font-size: min(16px, calc((100vw - 142px) / 15.75));
    line-height: 1.5;
    letter-spacing: 0.05em;
  }

  .anchor-link-icon {
    top: 30px;
    right: 21px;
    left: auto;
    width: 26px;
    height: 26px;
  }

  .anchor-item-wide .anchor-link-icon {
    top: 59px;
    right: auto;
    left: 50%;
    translate: -50% 0;
  }

  .anchor-link-icon img {
    width: 12.648px;
    height: 11.927px;
  }
}

@media (max-width: 749px) {
  /* ------------------------------------------------------------------
     セクション共通の背景（薄い装飾パターン）
     ・高さは中身に追従させる（画像は引き伸ばして使う前提の抽象パターン）
     ------------------------------------------------------------------ */
  .common-bg::before {
    background-size: 100% auto;
  }

  .common-bg-1 {
    padding: 0 0 56px;
    /* キーフィギュアのV字カットの内側まで背景を見せる */
    clip-path: inset(-40px 0 0);
  }

  .common-bg-1::before {
    background-image: url("../images/eastspring_asia_tech_sp_common_bg_1.png");
  }

  .common-bg-2 {
    padding: 0 0 80px;
  }

  .common-bg-2::before {
    background-image: url("../images/eastspring_asia_tech_sp_common_bg_2.png");
  }

  .common-bg-3 {
    padding: 0 0 80px;
  }

  /* SPでは見出しが背景ブロックの先頭に接し、上側の影が .common-bg の clip-path で切れる。
     直前のブロックの下端のすぐ外に影だけを落とす要素を置き、同じ影を補う（FB 見出しの影） */
  .common-bg-1::after,
  .common-bg-2::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 24px;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.24);
  }

  .common-bg-3::before {
    background-image: url("../images/eastspring_asia_tech_sp_common_bg_3.png");
  }
}

@media (max-width: 749px) {
  /* ------------------------------------------------------------------
     セクション見出し（共通）
     ------------------------------------------------------------------ */
  .common-section-heading {
    max-width: none;
    height: auto;
    padding: 0 0 8px;
    background:
      url("../images/eastspring_asia_tech_sp_section_heading_deco.png") no-repeat 0 0 / 256.7px 76px,
      url("../images/eastspring_asia_tech_sp_section_heading_bar.png") no-repeat 0 100% / 100% 8px,
      linear-gradient(#fff, #fff) no-repeat 0 0 / 100% 100%;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.24);
  }

  /* 2行見出しはあしらいも112pxのものに差し替える */
  #valueSec .common-section-heading,
  #expertSec .common-section-heading {
    background-image:
      url("../images/eastspring_asia_tech_sp_section_heading_deco_2line.png"),
      url("../images/eastspring_asia_tech_sp_section_heading_bar.png"),
      linear-gradient(#fff, #fff);
    background-size:
      256.7px 112px,
      100% 8px,
      100% 100%;
  }

  .common-section-heading-text {
    padding: 20px 10px;
    font-size: 24px;
    line-height: 1.5;
    letter-spacing: 1.2px;
    white-space: normal;
  }

  /* ------------------------------------------------------------------
     枠付きブロック（共通）
     ・四隅を20px斜めにカット。高さが変わっても崩れないようclip-pathで作る
     ------------------------------------------------------------------ */
  .common-block,
  .value-block,
  .expert-block {
    position: relative;
    width: calc(100% - 20px);
    margin: 0 auto;
    padding: 48px 10px 40px;
    background: #a4adb3;
    clip-path: polygon(
      20px 0,
      calc(100% - 20px) 0,
      100% 20px,
      100% calc(100% - 20px),
      calc(100% - 20px) 100%,
      20px 100%,
      0 calc(100% - 20px),
      0 20px
    );
  }

  .common-block::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 1px;
    background: #fff;
    clip-path: polygon(
      18.6px 0,
      calc(100% - 18.6px) 0,
      100% 18.6px,
      100% calc(100% - 18.6px),
      calc(100% - 18.6px) 100%,
      18.6px 100%,
      0 calc(100% - 18.6px),
      0 18.6px
    );
  }

  .why-block-1,
  .why-block-2,
  .why-block-3 {
    background: #a4adb3;
  }

  .common-block-header {
    gap: 32px;
  }

  .common-block-title {
    gap: 20px;
    font-size: 20px;
    letter-spacing: 1px;
  }

  .common-block-title::before,
  .common-block-title::after {
    width: 100%;
    height: 8px;
    background-size: 100% 8px;
  }

  .common-block-title::before {
    background-image: url("../images/eastspring_asia_tech_sp_common_block_line_top.svg");
  }

  .common-block-title::after {
    background-image: url("../images/eastspring_asia_tech_sp_common_block_line_bottom.svg");
  }

  .common-block-lead {
    font-size: 16px;
    letter-spacing: 0.8px;
  }

  .common-block-lead-accent {
    font-size: 18px;
  }

  /* グラフタイトル */
  .common-chart-title {
    gap: 4px;
  }

  /* .common-chart-titleのgap 4pxと合わせて16pxになるよう調整 */
  .common-chart-title::after {
    margin-top: 12px;
  }

  .common-chart-title-main {
    font-size: 16px;
  }

  .common-chart-title-sub {
    font-size: 12px;
  }

  .common-chart-title-reference .common-chart-title-sub {
    font-size: 13px;
  }

  /* 出所・注記 */
  .common-notes {
    font-size: 11px;
    letter-spacing: 0.55px;
  }

  /* ------------------------------------------------------------------
     SP用グラフ（横スクロール＋「横スクロールできます」）
     ------------------------------------------------------------------ */
  .common-chart-sp {
    position: relative;
    width: 100%;
  }

  .common-chart-scroll {
    width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }

  .common-chart-scroll img {
    max-width: none;
  }

  /* スクロールで表示されるのが分かるよう、下から大きめに・ゆっくり出す
     （発火は画面の下から25%まで入ったとき：HTML の data-fade-margin） */
  .common-chart-sp-image {
    --fade-distance: 60px;
    --fade-duration: 1s;
    width: 100%;
  }

  .common-chart-hint {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 147px;
    height: 120px;
    background: url("../images/eastspring_asia_tech_sp_scroll_hint.png") no-repeat center / contain;
    pointer-events: none;
    translate: -50% -50%;
    transition: opacity 0.3s ease;
  }

  .common-chart-sp.is-hint-hidden .common-chart-hint {
    opacity: 0;
  }

  /* ------------------------------------------------------------------
     なぜアジアのテクノロジー？（#whySec）
     ------------------------------------------------------------------ */
  .why {
    margin-top: 56px;
  }

  .why-blocks {
    gap: 40px;
    margin-top: 40px;
  }

  .why-block-body {
    gap: 20px;
    margin-top: 48px;
  }

  .why-block-body-wide {
    gap: 24px;
  }

  /* PC用のレイヤーSVGはSPでは出さない */
  .why-chart,
  .value-chart,
  .value-chart-eps,
  .value-chart-per {
    display: none;
  }

  .why-server {
    gap: 24px;
  }

  .why-server-image,
  .why-server-image-2 {
    width: 100%;
    margin-bottom: 0;
  }


  /* ------------------------------------------------------------------
     まとめ（AIサーバーや半導体の主要部品は…）
     ------------------------------------------------------------------ */
  .why-supply {
    width: 100%;
    max-width: 350px;
    height: 198px;
    margin: 0 auto;
    padding: 10px;
    background-image: url("../images/eastspring_asia_tech_sp_why_supply_frame.svg");
    background-position: -1px -1px;
    background-size: calc(100% + 2px) 200px;
  }

  .why-supply-box {
    gap: 4px;
    height: 178px;
    padding-top: 20px;
    white-space: normal;
  }

  /* PC 用の text-box（行の上下を文字の高さで切り詰める指定）は SP では使わない。
     切り詰めると下のメッセージとの間が詰まり、文字と下線が重なるため。
     文字サイズは画面幅に合わせて縮め、狭い端末でも2行に収める
     （長いほうの行は14文字で、字間込み 14.7em。100vw - 62px は箱の内側の幅（画面幅 − 左右の余白 計60px）から 2px 余裕を見た値） */
  .why-supply-text {
    font-size: min(20px, calc((100vw - 62px) / 14.7));
    letter-spacing: 0.05em;
    text-box: normal;
  }

  .why-supply-messages {
    gap: 4px;
  }

  .why-supply-message,
  .why-supply-message-last {
    display: block;
    width: fit-content;
    /* 1行分の高さ（文字＋下線） */
    height: 35px;
  }

  /* 各メッセージは1行で表示する。狭い端末では文字サイズを縮める（長いほうの行は13文字で、字間込み 13.65em） */
  .why-supply-message-text {
    font-size: min(22px, calc((100vw - 62px) / 13.65));
    letter-spacing: 0.05em;
    white-space: nowrap;
    text-box: normal;
  }

  /* 下線は文字幅に合わせた繰り返しパターンで引く。
     線の上下位置は行の高さではなく、文字のベースラインを基準にする（端末のフォントが違っても文字と線の間隔がそろう）。
     幅100%の線を margin-left: -100% で行頭まで戻して文字に重ね、
     vertical-align: baseline で線の下端をベースラインにそろえてから 0.54em 下げる */
  .why-supply-message-text::after {
    content: "";
    position: relative;
    top: 0.54em;
    display: inline-block;
    width: 100%;
    height: 4px;
    margin-left: -100%;
    vertical-align: baseline;
    background: url("../images/eastspring_asia_tech_sp_underline_dash_white.svg") repeat-x 0 0 / 5.4945px 4px;
  }

  .why-supply-underline-1,
  .why-supply-underline-2 {
    display: none;
  }
}

@media (max-width: 749px) {
  /* ------------------------------------------------------------------
     高い成長期待と相対的な割安感（#valueSec）
     ------------------------------------------------------------------ */
  .value-blocks {
    gap: 40px;
    margin-top: 40px;
  }

  .value-block-body {
    gap: 20px;
    margin-top: 48px;
  }

  .value-block-body-charts {
    gap: 24px;
  }

  .value-charts {
    gap: 40px;
  }

  .value-chart-group,
  .value-chart-group-per {
    gap: 24px;
  }
}

@media (max-width: 749px) {
  /* ------------------------------------------------------------------
     アジア投資のエキスパートが運用（#expertSec）
     ------------------------------------------------------------------ */
  .expert-blocks {
    gap: 40px;
    margin-top: 40px;
  }

  .expert-about {
    gap: 32px;
  }

  .expert-about-items {
    gap: 32px;
  }

  .expert-about-item-text {
    font-size: 14px;
    letter-spacing: 0.7px;
  }

  /* 4つの数値カードは2列 */
  .expert-stats {
    flex-wrap: wrap;
    gap: 10px;
  }

  .expert-stat {
    width: calc((100% - 10px) / 2);
    height: 150px;
    padding-top: 20px;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.25);
  }

  .expert-stat-icon {
    width: 50px;
  }

  .expert-stat-icon-wide {
    width: 58px;
  }

  .expert-stat-texts,
  .expert-stat-texts-narrow {
    gap: 10px;
    width: auto;
    margin-top: 16px;
  }

  .expert-stat-number-value {
    font-size: 34px;
  }

  .expert-stat-number-unit {
    font-size: 16px;
    letter-spacing: 0.8px;
  }

  .expert-stat-number-mark {
    font-size: 10.32px;
  }

  .expert-stat-caption {
    font-size: 12px;
    letter-spacing: 0.6px;
  }

  .expert-stat-caption-mark {
    font-size: 7.74px;
  }

  /* 担当者 */
  .expert-person {
    gap: 16px;
    margin-top: 48px;
    padding-top: 48px;
  }

  .expert-bracket-title {
    width: 100%;
  }

  .expert-bracket-title-person {
    min-height: 67px;
    padding-top: 16px;
    background: url("../images/eastspring_asia_tech_sp_expert_bracket_person.svg") no-repeat 0 0 / 100% 67px;
    font-size: 18px;
    line-height: 1.6;
  }

  .expert-bracket-title-sub {
    font-size: 14px;
  }

  /* 幅の狭い端末でも「名」が括弧からはみ出さないよう、画面幅に合わせて縮小する */
  .expert-bracket-title-network {
    min-height: 72px;
    /* 文字サイズが画面幅で変わっても括弧（72px）の上下中央に来るよう、固定のpadding-topではなくalign-contentで中央寄せする（FB 1007） */
    padding: 0 16px 2px;
    align-content: center;
    background: url("../images/eastspring_asia_tech_sp_expert_bracket_network.svg") no-repeat 0 0 / 100% 72px;
    font-size: min(18px, calc((100vw - 116px) / 16));
    line-height: 1.4;
  }

  .expert-bracket-title-network .expert-bracket-title-space {
    font-size: min(14px, calc((100vw - 116px) / 20.6));
  }

  .expert-bracket-title-network .expert-bracket-title-number {
    font-size: min(22px, calc((100vw - 116px) / 13.1));
  }

  .expert-bracket-title-space {
    font-size: 14px;
  }

  .expert-bracket-title-number {
    font-size: 22px;
  }

  .expert-person-profile {
    flex-direction: column;
    gap: 24px;
    width: 100%;
  }

  .expert-person-photo {
    width: 100px;
    height: 99px;
  }

  .expert-person-body {
    gap: 16px;
    width: 100%;
  }

  .expert-person-header {
    gap: 12px;
    align-items: center;
  }

  .expert-person-header::after {
    align-self: stretch;
    margin-top: 4px;
    background: #b0cbd7;
  }

  .expert-person-name {
    font-size: 20px;
    letter-spacing: 1px;
  }

  .expert-person-org {
    font-size: 14px;
    letter-spacing: 0.7px;
    white-space: normal;
  }

  .expert-person-details {
    gap: 12px;
    font-size: 13px;
    letter-spacing: 0.65px;
  }

  .expert-person-detail {
    white-space: normal;
  }

  .expert-person-detail-bold {
    font-size: 14px;
    letter-spacing: 0.7px;
    text-align: center;
  }

  /* ネットワーク */
  .expert-network {
    gap: 20px;
    margin-top: 48px;
  }

  .expert-network-body {
    gap: 24px;
  }

  .expert-network-map {
    gap: 16px;
    width: 100%;
  }

  .expert-network-map-title {
    font-size: 15px;
    letter-spacing: 0.75px;
  }

  .expert-network-figure {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    width: 100%;
  }

  /* 地図の横スクロールバーは、スクロールしていない間も表示したままにする
     （ブラウザ標準のスクロールバーはスクロール中しか表示されないため、::-webkit-scrollbar で描く）。
     画像とスクロールバーの間は padding-bottom で 12px あける */
  .expert-network-figure .common-chart-scroll {
    padding-bottom: 12px;
  }

  .expert-network-figure .common-chart-scroll::-webkit-scrollbar {
    height: 4px;
  }

  .expert-network-figure .common-chart-scroll::-webkit-scrollbar-thumb {
    border-radius: 40px;
    background: #9b9b9b;
  }

  .expert-network-legend {
    display: flex;
    justify-content: center;
    gap: 20px;
    width: 100%;
    padding: 10px 0;
    border-top: 1px solid #e1e4e6;
    border-bottom: 1px solid #e1e4e6;
  }

  .expert-network-legend-item {
    padding-left: 20px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.8;
    letter-spacing: 0.75px;
    background: no-repeat 0 center / 12px 23px;
  }

  .expert-network-legend-item-am {
    background-image: url("../images/eastspring_asia_tech_sp_expert_legend_am.svg");
  }

  .expert-network-legend-item-li {
    background-image: url("../images/eastspring_asia_tech_sp_expert_legend_li.svg");
  }

  /* 投資テーマ */
  .expert-theme {
    gap: 16px;
    margin-top: 48px;
  }

  .expert-theme-body {
    gap: 16px;
  }

  .expert-theme-tags {
    flex-direction: column;
    gap: 8px;
    padding: 15px 0;
  }

  .expert-theme-tags-label {
    font-size: 13px;
  }

  .expert-theme-tag-items {
    flex-wrap: wrap;
    justify-content: center;
    gap: 3px 4px;
  }

  .expert-theme-tag-item {
    width: 84px;
    padding: 4px;
    font-size: 12px;
  }

  /* ------------------------------------------------------------------
     投資テーマ地図＋カルーセル（SP専用）
     ------------------------------------------------------------------ */
  /* PC用の地図画像はSPでは出さない */
  .expert-theme-map {
    display: none;
  }

  .expert-theme-map-sp {
    position: relative;
    width: 100%;
    max-width: 350px;
    height: 425px;
    margin: 0 auto;
  }

  .expert-theme-map-svg {
    display: block;
    width: 100%;
    height: auto;
  }

  .expert-theme-flag {
    cursor: pointer;
  }

  .expert-theme-flag-hit {
    fill: transparent;
  }

  .expert-theme-flag-ring {
    fill: none;
    stroke: #ed1b2e;
    stroke-width: 2;
    opacity: 0;
    transition: opacity 0.2s ease;
  }

  .expert-theme-flag.is-current .expert-theme-flag-ring {
    opacity: 1;
  }

  .expert-theme-slider {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 168px;
  }

  .expert-theme-cards {
    position: relative;
    height: 100%;
    overflow: hidden;
  }

  .expert-theme-card {
    position: absolute;
    top: 0;
    left: calc((100% - 240px) / 2);
    display: flex;
    flex-direction: column;
    width: 240px;
    overflow: clip;
    border-radius: 8px;
    opacity: 0.4;
    filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.24));
    transition:
      transform 0.3s ease,
      opacity 0.3s ease;
  }

  .expert-theme-card.is-current {
    z-index: 1;
    opacity: 1;
  }

  .expert-theme-card-head {
    display: flex;
    gap: 6px;
    align-items: center;
    padding: 6px 8px;
    background: #68737a;
  }

  .expert-theme-card-flag {
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
  }

  .expert-theme-card-country {
    flex: 1;
    min-width: 1px;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
  }

  .expert-theme-card-strategy {
    display: block;
    font-weight: 400;
  }

  .expert-theme-card-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
    background: #fff;
  }

  .expert-theme-card-strength {
    padding-bottom: 4px;
    border-bottom: 1px solid #a4adb3;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.5;
  }


  /* 記載例カード（①〜④）。国旗の代わりに白丸、ヘッダーは国カードより明るいグレー */
  .expert-theme-card-legend .expert-theme-card-head {
    background: #869199;
  }

  .expert-theme-card-legend .expert-theme-card-flag {
    background: #fff;
  }

  .expert-theme-card-legend-themes {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
  }

  .expert-theme-card-tags {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
  }

  .expert-theme-card-tag {
    padding: 4px 2px;
    border-radius: 2px;
    white-space: nowrap;
    color: #fff;
    font-size: 11px;
    line-height: 1;
    text-align: center;
  }

  .expert-theme-nav {
    position: absolute;
    top: 12px;
    z-index: 2;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 11px;
    background: #ed1b2e no-repeat center / 8px 10px;
    cursor: pointer;
    appearance: none;
  }

  .expert-theme-nav::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
  }

  .expert-theme-nav-prev {
    left: 28px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 1 1 5l4 4'/%3E%3Cpath d='M11 1 7 5l4 4'/%3E%3C/svg%3E");
    background-size: 12px 10px;
  }

  .expert-theme-nav-next {
    right: 28px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1 5 5l-4 4'/%3E%3Cpath d='M7 1l4 4-4 4'/%3E%3C/svg%3E");
    background-size: 12px 10px;
  }
}

@media (max-width: 749px) {
  /* ------------------------------------------------------------------
     良好な運用実績（#performanceSec）
     ------------------------------------------------------------------ */
  .performance-bg {
    padding: 56px 0;
  }

  .performance-bg::before {
    background-image:
      linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
      url("../images/eastspring_asia_tech_sp_performance_bg_photo.jpg");
  }

  .performance {
    max-width: none;
    padding: 0 10px;
  }

  .performance-heading {
    width: 100%;
    max-width: 350px;
    height: 44px;
    background:
      url("../images/eastspring_asia_tech_performance_heading_bracket_left.svg") no-repeat 0 0 / 23px 44px,
      url("../images/eastspring_asia_tech_performance_heading_bracket_right.svg") no-repeat right 0 / 23px 44px;
  }

  .performance-heading-text {
    padding-top: 7px;
    font-size: 24px;
    letter-spacing: 1.2px;
  }

  .performance-blocks {
    gap: 40px;
    margin-top: 40px;
  }

  /* 枠はcommon-blockと同じ斜めカット。影付き */
  .performance-block,
  .performance-block-2,
  .performance-block-3 {
    padding: 48px 10px 40px;
  }

  .performance-block::before {
    inset: 0;
    background: #fff;
    filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.2));
    clip-path: polygon(
      20px 0,
      calc(100% - 20px) 0,
      100% 20px,
      100% calc(100% - 20px),
      calc(100% - 20px) 100%,
      20px 100%,
      0 calc(100% - 20px),
      0 20px
    );
  }

  .performance-block-header,
  .performance-block-1 .performance-block-header {
    gap: 20px;
  }

  .performance-block-header::after {
    width: 66px;
    height: 4px;
    background-repeat: repeat-x;
    background-size: 100px 4px;
  }

  .performance-block-title {
    height: auto;
  }

  .performance-block-title-text {
    line-height: 1.5;
    letter-spacing: 1px;
    white-space: normal;
  }

  .performance-block-1 .performance-block-title-text {
    letter-spacing: 0.8px;
  }

  .performance-block-title-main {
    font-size: 20px;
  }

  .performance-block-title-sub {
    font-size: 16px;
    font-weight: 400;
  }

  .performance-block-body,
  .performance-block-1 .performance-block-body {
    gap: 20px;
    margin-top: 40px;
  }

  /* 推移グラフ（SPは期間別騰落率が上） */
  .performance-chart {
    position: static;
    display: flex;
    flex-direction: column-reverse;
    gap: 16px;
    width: 100%;
    height: auto;
  }

  .performance-chart-returns {
    position: static;
    width: 100%;
  }

  .performance-notes {
    gap: 8px;
    margin-top: 4px;
  }

  /* 投資先ファンドの状況 */
  .performance-status {
    flex-direction: column;
    gap: 32px;
  }

  .performance-status-item,
  .performance-status-item-start {
    gap: 16px;
    width: 100%;
    align-items: center;
  }

  .common-chart-title-s .common-chart-title-main {
    font-size: 16px;
  }

  .performance-characteristics {
    width: 100%;
    font-size: 13px;
    line-height: 1.5;
  }

  .performance-characteristics th,
  .performance-characteristics td {
    height: 43px;
    padding: 4px 2px;
  }

  .performance-characteristics thead th,
  .performance-characteristics thead td {
    width: auto;
    height: 60px;
    font-size: 13px;
  }

  .performance-characteristics thead .performance-characteristics-blank {
    width: 50%;
  }

  .performance-characteristics-small {
    font-size: 11px;
  }

  .performance-status-chart,
  .performance-status-item-start .performance-status-chart {
    width: 100%;
    margin-right: 0;
  }

  /* 組入上位10銘柄（横スクロール） */
  .performance-holdings {
    width: 797px;
    font-size: 14px;
    letter-spacing: 0.7px;
  }

  .performance-holdings th,
  .performance-holdings td {
    padding: 8px;
  }

  .performance-holdings thead tr {
    height: 35px;
  }

  .performance-holdings tbody tr {
    height: 34px;
  }

  .performance-holdings .performance-holdings-no {
    width: 48px;
  }

  .performance-holdings .performance-holdings-name {
    width: 295px;
  }

  .performance-holdings .performance-holdings-country {
    width: 89px;
  }

  .performance-holdings .performance-holdings-sector {
    width: 295px;
  }

  .performance-holdings .performance-holdings-ratio {
    width: 70px;
  }
}

@media (max-width: 749px) {
  /* ------------------------------------------------------------------
     小見出し・販売会社・ご留意事項・費用・フッター
     ------------------------------------------------------------------ */
  .common-sub-heading {
    gap: 16px;
    width: 100%;
  }

  /* 破線の1単位はPCと同じ幅のまま、長さだけ82pxで切る */
  .common-sub-heading::after {
    width: 82px;
    height: 4px;
    background-repeat: repeat-x;
    background-size: 100px 4px;
  }

  .common-sub-heading-text {
    height: 15px;
    padding: 0;
    font-size: 20px;
    letter-spacing: 1px;
  }

  .distributor {
    gap: 24px;
    padding: 56px var(--sp-gutter);
  }

  .distributor-lead {
    width: 100%;
    font-size: 12px;
    line-height: 1.8;
    letter-spacing: 0.6px;
  }

  .distributor-body {
    gap: 16px;
    width: 100%;
  }

  .distributor-items {
    justify-content: center;
    gap: 10px;
    width: 100%;
    max-width: 350px;
  }

  /* SPデザイン未提供のため、リード文と同じ文字サイズで折り返す */
  .distributor-agents {
    max-width: 350px;
    font-size: 12px;
    line-height: 1.8;
    letter-spacing: 0.6px;
    white-space: normal;
    text-align: center;
  }

  .distributor-item {
    width: calc((100% - 10px) / 2);
  }
  .distributor-agent-br {
    display: block;
  }
  .distributor-link {
    width: 100%;
    height: 56px;
  }

  .distributor-link::after {
    top: 6px;
    right: 6px;
    width: 12px;
    height: 12px;
    background-size: 11.6px 11.6px;
  }

  .distributor-logo-sbi {
    width: 79px;
  }

  .distributor-logo-jtg {
    width: 103px;
  }

  .distributor-logo-maruhachi {
    width: 127px;
  }

  .distributor-logo-monex {
    width: 121px;
  }

  .distributor-logo-rakuten {
    width: 131px;
  }

  /* ご留意事項 */
  .notice {
    position: relative;
    gap: 40px;
    max-width: none;
    padding: 56px var(--sp-gutter);
    border-top: none;
  }

  /* 区切り線は左右20pxインセット */
  .notice::before {
    content: "";
    position: absolute;
    top: 0;
    right: var(--sp-gutter);
    left: var(--sp-gutter);
    height: 1px;
    background: #e1e4e6;
  }

  .notice-block {
    gap: 10px;
  }

  .notice-block-title {
    font-size: 15px;
    line-height: 1.8;
    letter-spacing: 0.75px;
  }

  .notice-block-text,
  .notice-list {
    font-size: 12px;
    line-height: 1.8;
    letter-spacing: 0.6px;
  }

  /* 「※」のぶら下げインデント */
  .notice-note {
    padding-left: 16px;
    text-indent: -16px;
  }

  .notice-list {
    padding-left: 18px;
  }

  .risk-items {
    gap: 10px;
  }

  /* アイコン＋見出しを1行目、本文を全幅の2行目に */
  .risk-item,
  .risk-item-fixed {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 8px;
    width: 100%;
    height: auto;
    padding: 12px;
    align-items: center;
  }

  .risk-item-texts {
    display: contents;
  }

  .risk-item-icon {
    grid-column: 1;
    grid-row: 1;
    width: 34px;
  }

  .risk-item-title {
    grid-column: 2;
    grid-row: 1;
    font-size: 18px;
    line-height: 1.5;
    letter-spacing: 0.9px;
  }

  .risk-item-text {
    grid-column: 1 / -1;
    grid-row: 2;
    font-size: 12px;
    line-height: 1.6;
    letter-spacing: 0.6px;
  }

  /* 費用テーブル */
  .cost-table {
    font-size: 12px;
    letter-spacing: 0.6px;
  }

  .cost-table > .cost-row + .cost-row {
    margin-top: 12px;
  }

  .cost-row {
    flex-wrap: wrap;
  }

  .cost-cell {
    padding: 12px;
  }

  /* 見出しセルは全幅で積む */
  .cost-cell-head,
  .cost-cell-sub {
    width: 100%;
    flex-basis: 100%;
    padding: 6px 12px;
    white-space: normal;
  }

  .cost-cell-head br,
  .cost-cell-sub br {
    display: none;
  }

  .cost-cell-head ~ .cost-cell,
  .cost-cell-head ~ .cost-row-body,
  .cost-cell-sub ~ .cost-cell,
  .cost-cell-sub ~ .cost-row-body {
    margin-top: -1px;
    margin-left: 0;
  }

  .cost-row-body-groups {
    gap: 0;
  }

  /* ①と②の間に少し余白（PCの12pxの半分。別表に見えないよう控えめに）。②の左端を①に揃える */
  .cost-row-body-groups > * + * {
    position: relative;
    margin-top: 6px;
    margin-left: 0;
  }

  /* ①と②の間の余白にも左右の罫線を通し、一つの表として見えるようにする（FB 1007） */
  .cost-row-body-groups > * + *::before {
    content: "";
    position: absolute;
    right: 0;
    bottom: 100%;
    left: 0;
    height: 6px;
    border: solid #c8cacb;
    border-width: 0 1px;
  }

  .cost-cell-label {
    padding: 12px;
  }

  .cost-row-h80 {
    height: auto;
    min-height: 0;
  }

  .cost-row-h80 .cost-cell-text {
    display: block;
  }

  /* フッター */
  .site-footer {
    padding: 0 var(--sp-gutter) 115px;
  }

  .site-footer::before {
    margin-bottom: 56px;
  }

  .site-footer-sns-items {
    gap: 20px;
  }

  .site-footer-sns-item img {
    width: 42px;
  }

  .site-footer-link-items {
    gap: 16px;
    margin-top: 24px;
    font-size: 12px;
    line-height: 1;
  }

  .site-footer-copyright {
    margin-top: 24px;
    padding: 0;
    font-size: 10px;
    line-height: 24px;
  }

  /* ------------------------------------------------------------------
     下部固定バー＋ページトップ（SP専用）
     ------------------------------------------------------------------ */
  .sp-bottom-bar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    height: 68px;
    border-top: 2px solid #ed1b2e;
    background-image: linear-gradient(102.2deg, #fff 0.73%, #e2e2e2 99.4%);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.9px;
    transform: translateY(100%);
    transition:
      transform 0.3s ease,
      visibility 0.3s;
    visibility: hidden;
  }

  .sp-bottom-bar.is-visible {
    visibility: visible;
    transform: translateY(0);
  }

  .sp-bottom-bar-icon {
    position: relative;
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 14px;
    background: #ed1b2e;
  }

  .sp-bottom-bar-icon::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 11px;
    height: 13px;
    background: url("../images/eastspring_asia_tech_icon_arrow_double_right.svg") no-repeat center / contain;
    filter: brightness(0) invert(1);
    translate: -50% -50%;
  }

  .page-top {
    right: 20px;
    bottom: 88px;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    visibility: hidden;
    opacity: 0;
    transition:
      opacity 0.3s ease,
      visibility 0.3s;
  }

  .page-top.is-visible {
    visibility: visible;
    opacity: 1;
  }

  .page-top-arrow {
    top: 15px;
    left: 12.5px;
    width: 12px;
    height: 12px;
  }
}

@media (max-width: 749px) and (prefers-reduced-motion: reduce) {
  .sp-bottom-bar,
  .page-top {
    transition: none;
  }
}