/* ============================================================================
   特設ページ：株主登録 / 独自スタイル
   ----------------------------------------------------------------------------
   先方制作の CSS をこのファイルに記述してください。
   全セレクタは .ShareholderRegistration 配下にスコープしてください。
   詳細仕様は同梱の README.md 参照。
   ============================================================================ */

/* 注: 先方納品 CSS にあった全体 `body { margin: 0 }` は、コーポレートサイト共通
   レイアウト側で管理するためスコープ漏れとして当方で除去（組み込み時調整）。 */

.ShareholderRegistration {
  /* 先方制作 CSS をここに記述 */

  /* ----------------------------------------------------------------------------
     組み込み時の rem 基準（当方で付与）
     コーポレートサイトの html は font-size が可変（calc(1 * var(--rem))≠16px）のため、先方納品の
     「root 16px 前提」をこのページ内だけで死守する目的でローカル基準を固定する。
     先方 CSS の `Xrem` は当方で `calc(X * var(--rem))` に変換済み（html には非干渉）。
     ※px 固定相当のため 1024px 超は先方意図どおり打ち止め挙動になる。
     ---------------------------------------------------------------------------- */
  --rem: 16px;

  .ShareholderRegistration__wrap {
    margin: 0;
    line-height: 1.6;
    color: #222;
  }

  .ShareholderRegistration__hero {
    /*
      375px → 1024px まで全要素を線形に拡大、1024px 以上で固定
      （calc(23.4375 * var(--rem)) = 375px / calc(40.5625 * var(--rem)) = 649px 幅、root 16px 前提）
    */
    --sh-reg-hero-vw-min: calc(23.4375 * var(--rem));
    --sh-reg-hero-vw-range: calc(40.5625 * var(--rem));
    --sh-reg-hero-scale: min(
      1,
      ((100vw - var(--sh-reg-hero-vw-min)) / var(--sh-reg-hero-vw-range))
    );

    --sh-reg-hero-content-max: clamp(
      min(calc(28 * var(--rem)), calc(min(100vw, calc(64 * var(--rem))) - calc(2.5 * var(--rem)))),
      calc(calc(20.9375 * var(--rem)) + calc(19.0625 * var(--rem)) * var(--sh-reg-hero-scale)),
      calc(40 * var(--rem))
    );
    /* ロゴブロック幅（参加者の声と同じ考え方: 375→1024で拡大、1024で打ち止め） */
    --sh-reg-hero-logo-max-width: clamp(
      min(calc(30 * var(--rem)), calc(min(100vw, calc(64 * var(--rem))) - calc(2.5 * var(--rem)))),
      calc(calc(20.9375 * var(--rem)) + calc(35.0625 * var(--rem)) * var(--sh-reg-hero-scale)),
      calc(56 * var(--rem))
    );
    /* ロゴ画像サイズ */
    --sh-reg-hero-logo-max: clamp(
      calc(5 * var(--rem)),
      calc(calc(5 * var(--rem)) + calc(3 * var(--rem)) * var(--sh-reg-hero-scale)),
      calc(8 * var(--rem))
    );
    --sh-reg-hero-motif-01-size: clamp(
      calc(4.5 * var(--rem)),
      calc(calc(4 * var(--rem)) + calc(4.5 * var(--rem)) * var(--sh-reg-hero-scale)),
      calc(8.5 * var(--rem))
    );
    /* 上へ出すときは負の top。先頭=375px / 末尾=1024px（scale 0→1） */
    --sh-reg-hero-motif-01-top: clamp(
      calc(-4 * var(--rem)),
      calc(calc(-0.25 * var(--rem)) + calc(0.25 * var(--rem)) * var(--sh-reg-hero-scale)),
      calc(0.5 * var(--rem))
    );
    /* モチーフ02（hero-lead 右下）— サイズ・位置はここだけ触れば OK */
    --sh-reg-hero-motif-02-size: clamp(
      calc(2.25 * var(--rem)),
      calc(calc(2.25 * var(--rem)) + calc(1.75 * var(--rem)) * var(--sh-reg-hero-scale)),
      calc(4 * var(--rem))
    );
    --sh-reg-hero-motif-02-bottom: clamp(
      calc(0.25 * var(--rem)),
      calc(calc(0.25 * var(--rem)) + calc(1.25 * var(--rem)) * var(--sh-reg-hero-scale)),
      calc(1.5 * var(--rem))
    );
    --sh-reg-hero-motif-02-right: clamp(
      calc(-0.5 * var(--rem)),
      calc(calc(-0.5 * var(--rem)) + calc(-2 * var(--rem)) * var(--sh-reg-hero-scale)),
      calc(-2.5 * var(--rem))
    );
    --sh-reg-hero-caution-font-size: clamp(
      calc(0.8125 * var(--rem)),
      calc(calc(0.8125 * var(--rem)) + calc(0.1875 * var(--rem)) * var(--sh-reg-hero-scale)),
      calc(1 * var(--rem))
    );
    --sh-reg-hero-padding-block-start: clamp(
      calc(1 * var(--rem)),
      calc(calc(1 * var(--rem)) + calc(1 * var(--rem)) * var(--sh-reg-hero-scale)),
      calc(2 * var(--rem))
    );
    --sh-reg-hero-padding-inline: clamp(
      calc(1 * var(--rem)),
      calc(calc(1 * var(--rem)) + calc(1.5 * var(--rem)) * var(--sh-reg-hero-scale)),
      calc(2.5 * var(--rem))
    );
    --sh-reg-hero-padding-block-end: clamp(
      calc(1.5 * var(--rem)),
      calc(calc(1.5 * var(--rem)) + calc(1.5 * var(--rem)) * var(--sh-reg-hero-scale)),
      calc(3 * var(--rem))
    );

    padding: var(--sh-reg-hero-padding-block-start) var(--sh-reg-hero-padding-inline)
      var(--sh-reg-hero-padding-block-end);
    text-align: center;
    position: relative;

    @media (min-width: 1024px) {
      /* 1024px 以上: 拡大終了（固定） */
      --sh-reg-hero-scale: 1;
      --sh-reg-hero-content-max: calc(40 * var(--rem));
      --sh-reg-hero-logo-max-width: calc(56 * var(--rem));
      --sh-reg-hero-logo-max: calc(8 * var(--rem));
      --sh-reg-hero-motif-01-size: calc(8.5 * var(--rem));
      --sh-reg-hero-motif-01-top: calc(-0.5 * var(--rem));
      --sh-reg-hero-motif-02-size: calc(4 * var(--rem));
      --sh-reg-hero-motif-02-bottom: calc(1.5 * var(--rem));
      --sh-reg-hero-caution-font-size: calc(1 * var(--rem));
      --sh-reg-hero-padding-block-start: calc(2 * var(--rem));
      --sh-reg-hero-padding-inline: calc(2.5 * var(--rem));
      --sh-reg-hero-padding-block-end: calc(3 * var(--rem));
    }
  }

  .ShareholderRegistration__hero-logo {
    position: relative;
    overflow: visible;
    width: min(100%, var(--sh-reg-hero-logo-max-width));
    margin-inline: auto;
  }

  .ShareholderRegistration__hero-logo::after {
    content: '';
    display: block;
    position: absolute;
    top: var(--sh-reg-hero-motif-01-top);
    right: 0;
    width: var(--sh-reg-hero-motif-01-size);
    aspect-ratio: 80 / 44;
    height: auto;
    background: url('../img/hero_motif_01.svg') no-repeat center / contain;
  }

  .ShareholderRegistration__hero-logo-image {
    display: block;
    width: var(--sh-reg-hero-logo-max);
    max-width: 100%;
    height: auto;
    margin-right: auto;
    margin-left: 0;
  }

  .ShareholderRegistration__hero-title {
    margin: 0 0 calc(1 * var(--rem));
    position: relative;
    width: min(100%, var(--sh-reg-hero-content-max));
    margin-inline: auto;
  }

  .ShareholderRegistration__hero-title-image {
    display: block;
    width: 100%;
    height: auto;
  }

  .ShareholderRegistration__hero-lead {
    position: relative;
    display: block;
    width: min(100%, var(--sh-reg-hero-content-max));
    margin: 0 auto;
  }

  .ShareholderRegistration__hero-lead::after {
    content: '';
    display: block;
    position: absolute;
    bottom: var(--sh-reg-hero-motif-02-bottom);
    right: var(--sh-reg-hero-motif-02-right);
    width: var(--sh-reg-hero-motif-02-size);
    aspect-ratio: 39 / 42;
    height: auto;
    background: url('../img/hero_motif_02.svg') no-repeat center / contain;
  }

  .ShareholderRegistration__hero-lead-image {
    display: block;
    width: 100%;
    height: auto;
  }

  .ShareholderRegistration__hero-caution {
    list-style: none;
    width: min(100%, var(--sh-reg-hero-content-max));
    margin: calc(1.5 * var(--rem)) auto 0;
    padding: 0;
    text-align: left;
  }

  .ShareholderRegistration__hero-caution-item {
    position: relative;
    margin: 0;
    padding-left: 1.25em;
    font-size: var(--sh-reg-hero-caution-font-size);
  }

  .ShareholderRegistration__hero-caution-item::before {
    content: '※';
    position: absolute;
    left: 0;
  }

  .ShareholderRegistration__hero-caution-note {
    color: #d9506d;
    font-weight: 700;
  }

  .ShareholderRegistration__hero-caution-item + .ShareholderRegistration__hero-caution-item {
    margin-top: 0.5em;
  }

  .ShareholderRegistration__mail {
    /*
      375px → 1024px まで拡大、1024px 以上で固定（hero と同じ考え方）
      PC の数値 = 各 clamp() の第3引数。@media(1024px) では scale: 1 のみ（例外は下記）。
    */
    --sh-reg-mail-vw-min: calc(23.4375 * var(--rem));
    --sh-reg-mail-vw-range: calc(40.5625 * var(--rem));
    --sh-reg-mail-scale: min(
      1,
      ((100vw - var(--sh-reg-mail-vw-min)) / var(--sh-reg-mail-vw-range))
    );

    /* タイトル画像幅: 先頭 = 375px、末尾 = 1024px */
    --sh-reg-mail-title-max: clamp(
      calc(16 * var(--rem)),
      calc(calc(16 * var(--rem)) + calc(24 * var(--rem)) * var(--sh-reg-mail-scale)),
      calc(40 * var(--rem))
    );
    --sh-reg-mail-lead-font-size: clamp(
      calc(0.875 * var(--rem)),
      calc(calc(0.875 * var(--rem)) + calc(1.375 * var(--rem)) * var(--sh-reg-mail-scale)),
      calc(2.25 * var(--rem))
    );
    --sh-reg-mail-lead-margin-block-start: clamp(
      calc(0.75 * var(--rem)),
      calc(calc(0.75 * var(--rem)) + calc(1.25 * var(--rem)) * var(--sh-reg-mail-scale)),
      calc(2 * var(--rem))
    );
    --sh-reg-mail-padding-block-start: clamp(
      calc(1 * var(--rem)),
      calc(calc(1 * var(--rem)) + calc(1 * var(--rem)) * var(--sh-reg-mail-scale)),
      calc(2 * var(--rem))
    );
    --sh-reg-mail-padding-inline: clamp(
      calc(1.25 * var(--rem)),
      calc(calc(1.25 * var(--rem)) + calc(1.25 * var(--rem)) * var(--sh-reg-mail-scale)),
      calc(2.5 * var(--rem))
    );
    --sh-reg-mail-padding-block-end: clamp(
      calc(2.5 * var(--rem)),
      calc(calc(2.5 * var(--rem)) + calc(0.5 * var(--rem)) * var(--sh-reg-mail-scale)),
      calc(3 * var(--rem))
    );
    /* タイトル装飾（mail_motif_01） */
    --sh-reg-mail-motif-01-size: clamp(
      calc(2 * var(--rem)),
      calc(calc(2 * var(--rem)) + calc(3.5 * var(--rem)) * var(--sh-reg-mail-scale)),
      calc(5.5 * var(--rem))
    );
    /* 位置はタイトル幅に連動（375=calc(16 * var(--rem)) / 1024=calc(40 * var(--rem)) の比率を維持、途中のズレを防ぐ） */
    --sh-reg-mail-motif-01-top: calc(
      calc(-1.25 * var(--rem)) - (var(--sh-reg-mail-title-max) - calc(16 * var(--rem))) * 0.0729167
    );
    --sh-reg-mail-motif-01-left: calc(
      calc(-2.5 * var(--rem)) - (var(--sh-reg-mail-title-max) - calc(16 * var(--rem))) * 0.1458333
    );
    /* タイトル装飾（ピンク丸） */
    --sh-reg-mail-motif-02-size: clamp(
      calc(1.25 * var(--rem)),
      calc(calc(1.25 * var(--rem)) + calc(2.25 * var(--rem)) * var(--sh-reg-mail-scale)),
      calc(3.5 * var(--rem))
    );
    --sh-reg-mail-motif-02-top: calc(
      calc(-1.25 * var(--rem)) - (var(--sh-reg-mail-title-max) - calc(16 * var(--rem))) * 0.0520833
    );
    --sh-reg-mail-motif-02-right: calc(
      calc(-2 * var(--rem)) - (var(--sh-reg-mail-title-max) - calc(16 * var(--rem))) * 0.1458333
    );

    /* 参加者の声（SP はタイトルより広く、1024px で打ち止め ※末尾だけ他ブロックより広く可能） */
    --sh-reg-mail-voice-max-width: clamp(
      min(calc(30 * var(--rem)), calc(min(100vw, calc(64 * var(--rem))) - calc(2.5 * var(--rem)))),
      calc(calc(20.9375 * var(--rem)) + calc(35.0625 * var(--rem)) * var(--sh-reg-mail-scale)),
      calc(56 * var(--rem))
    );
    --sh-reg-mail-voice-margin-block-start: clamp(
      calc(2 * var(--rem)),
      calc(calc(2 * var(--rem)) + calc(1 * var(--rem)) * var(--sh-reg-mail-scale)),
      calc(3 * var(--rem))
    );
    --sh-reg-mail-voice-margin-block-end: clamp(
      calc(3 * var(--rem)),
      calc(calc(3 * var(--rem)) + calc(2 * var(--rem)) * var(--sh-reg-mail-scale)),
      calc(5 * var(--rem))
    );
    --sh-reg-mail-voice-title-font-size: clamp(
      calc(1 * var(--rem)),
      calc(calc(1 * var(--rem)) + calc(0.75 * var(--rem)) * var(--sh-reg-mail-scale)),
      calc(1.75 * var(--rem))
    );
    --sh-reg-mail-voice-title-line-size: clamp(
      2px,
      calc(2px + 1px * var(--sh-reg-mail-scale)),
      3px
    );
    --sh-reg-mail-voice-title-padding-inline: clamp(
      calc(1 * var(--rem)),
      calc(calc(1 * var(--rem)) + calc(0.5 * var(--rem)) * var(--sh-reg-mail-scale)),
      calc(1.5 * var(--rem))
    );
    --sh-reg-mail-voice-icon-width: clamp(
      calc(1.275 * var(--rem)),
      calc(calc(1.275 * var(--rem)) + calc(0.975 * var(--rem)) * var(--sh-reg-mail-scale)),
      calc(2.25 * var(--rem))
    );
    --sh-reg-mail-voice-gap: clamp(
      calc(1 * var(--rem)),
      calc(calc(1 * var(--rem)) + calc(0.5 * var(--rem)) * var(--sh-reg-mail-scale)),
      calc(1.5 * var(--rem))
    );
    --sh-reg-mail-voice-item-gap: clamp(
      calc(1.25 * var(--rem)),
      calc(calc(1.25 * var(--rem)) + calc(0.75 * var(--rem)) * var(--sh-reg-mail-scale)),
      calc(2 * var(--rem))
    );
    --sh-reg-mail-voice-text-font-size: clamp(
      calc(0.775 * var(--rem)),
      calc(calc(0.775 * var(--rem)) + calc(0.6 * var(--rem)) * var(--sh-reg-mail-scale)),
      calc(1.375 * var(--rem))
    );
    --sh-reg-mail-voice-text-padding-block: clamp(
      calc(0.5 * var(--rem)),
      calc(calc(0.5 * var(--rem)) + calc(0.25 * var(--rem)) * var(--sh-reg-mail-scale)),
      calc(0.75 * var(--rem))
    );
    --sh-reg-mail-voice-text-padding-inline: clamp(
      calc(0.75 * var(--rem)),
      calc(calc(0.75 * var(--rem)) + calc(0.5 * var(--rem)) * var(--sh-reg-mail-scale)),
      calc(1.25 * var(--rem))
    );
    --sh-reg-mail-voice-text-radius: clamp(
      8px,
      calc(8px + 4px * var(--sh-reg-mail-scale)),
      12px
    );
    --sh-reg-mail-voice-shadow-offset: clamp(
      3px,
      calc(3px + 2px * var(--sh-reg-mail-scale)),
      5px
    );
    --sh-reg-mail-voice-tail-border-block: clamp(
      6px,
      calc(6px + 4px * var(--sh-reg-mail-scale)),
      10px
    );
    --sh-reg-mail-voice-tail-border-inline: clamp(
      12px,
      calc(12px + 8px * var(--sh-reg-mail-scale)),
      20px
    );

    /* CMS（375→1024で拡大 / 1024pxで3列） */
    --sh-reg-mail-cms-max-width: var(--sh-reg-mail-voice-max-width);
    --sh-reg-mail-cms-padding-block: clamp(
      calc(1.5 * var(--rem)),
      calc(calc(1.5 * var(--rem)) + calc(0.5 * var(--rem)) * var(--sh-reg-mail-scale)),
      calc(2 * var(--rem))
    );
    --sh-reg-mail-cms-list-gap: clamp(
      calc(0.75 * var(--rem)),
      calc(calc(0.75 * var(--rem)) + calc(0.25 * var(--rem)) * var(--sh-reg-mail-scale)),
      calc(1 * var(--rem))
    );
    --sh-reg-mail-cms-card-gap: clamp(
      calc(0.375 * var(--rem)),
      calc(calc(0.375 * var(--rem)) + calc(0.125 * var(--rem)) * var(--sh-reg-mail-scale)),
      calc(0.5 * var(--rem))
    );
    --sh-reg-mail-cms-grid-gap: clamp(
      calc(1 * var(--rem)),
      calc(calc(1 * var(--rem)) + calc(0.5 * var(--rem)) * var(--sh-reg-mail-scale)),
      calc(1.5 * var(--rem))
    );
    --sh-reg-mail-cms-media-radius: clamp(
      6px,
      calc(6px + 2px * var(--sh-reg-mail-scale)),
      8px
    );
    --sh-reg-mail-cms-title-font-size: clamp(
      calc(0.725 * var(--rem)),
      calc(calc(0.725 * var(--rem)) + calc(0.275 * var(--rem)) * var(--sh-reg-mail-scale)),
      calc(1 * var(--rem))
    );
    --sh-reg-mail-cms-date-margin-bottom: clamp(
      calc(0.125 * var(--rem)),
      calc(calc(0.125 * var(--rem)) + calc(0.125 * var(--rem)) * var(--sh-reg-mail-scale)),
      calc(0.25 * var(--rem))
    );
    --sh-reg-mail-cms-body-gap: clamp(
      calc(0.375 * var(--rem)),
      calc(calc(0.375 * var(--rem)) + calc(0.125 * var(--rem)) * var(--sh-reg-mail-scale)),
      calc(0.5 * var(--rem))
    );

    /* 株主番号のご登録方法（横幅は参加者の声と同じ） */
    --sh-reg-mail-guide-max-width: var(--sh-reg-mail-voice-max-width);
    /* 見出し SVG（横長のため幅ではなく高さで打ち止め） */
    --sh-reg-mail-guide-title-image-max-height: clamp(
      calc(1.25 * var(--rem)),
      calc(calc(1.25 * var(--rem)) + calc(0.75 * var(--rem)) * var(--sh-reg-mail-scale)),
      calc(2 * var(--rem))
    );
    --sh-reg-mail-guide-title-border: clamp(
      2px,
      calc(2px + 1px * var(--sh-reg-mail-scale)),
      3px
    );
    --sh-reg-mail-guide-title-radius: clamp(
      40px,
      calc(40px + 16px * var(--sh-reg-mail-scale)),
      56px
    );
    --sh-reg-mail-guide-title-padding-block: clamp(
      calc(0.8 * var(--rem)),
      calc(calc(0.8 * var(--rem)) + calc(0.45 * var(--rem)) * var(--sh-reg-mail-scale)),
      calc(1.25 * var(--rem))
    );
    --sh-reg-mail-guide-title-padding-inline: clamp(
      calc(1 * var(--rem)),
      calc(calc(1 * var(--rem)) + calc(0.5 * var(--rem)) * var(--sh-reg-mail-scale)),
      calc(1.5 * var(--rem))
    );
    --sh-reg-mail-guide-box-max: var(--sh-reg-mail-voice-max-width);
    --sh-reg-mail-guide-cta-bottom: clamp(
      calc(1 * var(--rem)),
      calc(calc(1 * var(--rem)) + calc(0.5 * var(--rem)) * var(--sh-reg-mail-scale)),
      calc(1.5 * var(--rem))
    );
    --sh-reg-mail-guide-cta-max: clamp(
      calc(18 * var(--rem)),
      calc(calc(18 * var(--rem)) + calc(21 * var(--rem)) * var(--sh-reg-mail-scale)),
      calc(39 * var(--rem))
    );
    --sh-reg-mail-guide-caution-margin-top: clamp(
      calc(1.5 * var(--rem)),
      calc(calc(1.5 * var(--rem)) + calc(1 * var(--rem)) * var(--sh-reg-mail-scale)),
      calc(2.5 * var(--rem))
    );
    --sh-reg-mail-guide-caution-padding-bottom: clamp(
      calc(1.5 * var(--rem)),
      calc(calc(1.5 * var(--rem)) + calc(1 * var(--rem)) * var(--sh-reg-mail-scale)),
      calc(2.5 * var(--rem))
    );
    --sh-reg-mail-guide-caution-font-size: clamp(
      calc(0.775 * var(--rem)),
      calc(calc(0.775 * var(--rem)) + calc(0.35 * var(--rem)) * var(--sh-reg-mail-scale)),
      calc(1.125 * var(--rem))
    );
    --sh-reg-mail-guide-caution-border: clamp(
      2px,
      calc(2px + 1px * var(--sh-reg-mail-scale)),
      3px
    );
    --sh-reg-mail-guide-voting-margin-top: clamp(
      calc(1.5 * var(--rem)),
      calc(calc(1.5 * var(--rem)) + calc(1 * var(--rem)) * var(--sh-reg-mail-scale)),
      calc(2.5 * var(--rem))
    );
    --sh-reg-mail-guide-voting-figure-margin-top: clamp(
      calc(1 * var(--rem)),
      calc(calc(1 * var(--rem)) + calc(0.5 * var(--rem)) * var(--sh-reg-mail-scale)),
      calc(1.5 * var(--rem))
    );
    --sh-reg-mail-guide-media-max: var(--sh-reg-mail-voice-max-width);

    /* エポスカード（コンテンツ幅は guide / 参加者の声と同じ） */
    --sh-reg-mail-epos-max-width: var(--sh-reg-mail-guide-max-width);
    --sh-reg-mail-epos-margin-top: clamp(
      calc(2 * var(--rem)),
      calc(calc(2 * var(--rem)) + calc(1 * var(--rem)) * var(--sh-reg-mail-scale)),
      calc(3 * var(--rem))
    );
    --sh-reg-mail-epos-padding-block-start: clamp(
      calc(1 * var(--rem)),
      calc(calc(1 * var(--rem)) + calc(0.5 * var(--rem)) * var(--sh-reg-mail-scale)),
      calc(1.5 * var(--rem))
    );
    --sh-reg-mail-epos-padding-block-end: clamp(
      calc(1.25 * var(--rem)),
      calc(calc(1.25 * var(--rem)) + calc(0.75 * var(--rem)) * var(--sh-reg-mail-scale)),
      calc(1 * var(--rem))
    );
    --sh-reg-mail-epos-title-font-size: clamp(
      calc(1 * var(--rem)),
      calc(calc(1 * var(--rem)) + calc(1 * var(--rem)) * var(--sh-reg-mail-scale)),
      calc(2 * var(--rem))
    );
    --sh-reg-mail-epos-title-padding-block-start: clamp(
      calc(0.75 * var(--rem)),
      calc(calc(0.75 * var(--rem)) + calc(0.5 * var(--rem)) * var(--sh-reg-mail-scale)),
      calc(1.25 * var(--rem))
    );
    --sh-reg-mail-epos-title-padding-block-end: clamp(
      calc(0.55 * var(--rem)),
      calc(calc(0.55 * var(--rem)) + calc(0.35 * var(--rem)) * var(--sh-reg-mail-scale)),
      calc(0.9 * var(--rem))
    );
    --sh-reg-mail-epos-title-padding-inline: clamp(
      calc(1 * var(--rem)),
      calc(calc(1 * var(--rem)) + calc(0.5 * var(--rem)) * var(--sh-reg-mail-scale)),
      calc(1.5 * var(--rem))
    );
    /* 本文エリア（SP: flex / PC: カード列を抑えてテキスト列を広く） */
    --sh-reg-mail-epos-body-padding-block: clamp(
      calc(0.75 * var(--rem)),
      calc(calc(0.75 * var(--rem)) + calc(0.75 * var(--rem)) * var(--sh-reg-mail-scale)),
      calc(2 * var(--rem))
    );
    --sh-reg-mail-epos-body-padding-inline: clamp(
      calc(1 * var(--rem)),
      calc(calc(1 * var(--rem)) + calc(2 * var(--rem)) * var(--sh-reg-mail-scale)),
      calc(3.5 * var(--rem))
    );
    --sh-reg-mail-epos-body-gap: clamp(
      calc(0.5 * var(--rem)),
      calc(calc(0.5 * var(--rem)) + calc(1 * var(--rem)) * var(--sh-reg-mail-scale)),
      calc(2 * var(--rem))
    );
    --sh-reg-mail-epos-card-width: clamp(
      calc(4.5 * var(--rem)),
      calc(calc(4.5 * var(--rem)) + calc(2 * var(--rem)) * var(--sh-reg-mail-scale)),
      calc(9 * var(--rem))
    );
    --sh-reg-mail-epos-lead-font-size: clamp(
      calc(1 * var(--rem)),
      calc(calc(1 * var(--rem)) + calc(1 * var(--rem)) * var(--sh-reg-mail-scale)),
      calc(2 * var(--rem))
    );
    --sh-reg-mail-epos-lead-span-font-size: clamp(
      calc(0.875 * var(--rem)),
      calc(calc(0.875 * var(--rem)) + calc(0.375 * var(--rem)) * var(--sh-reg-mail-scale)),
      calc(1.75 * var(--rem))
    );
    --sh-reg-mail-epos-lead-padding-block: clamp(
      calc(0.5 * var(--rem)),
      calc(calc(0.5 * var(--rem)) + calc(0.25 * var(--rem)) * var(--sh-reg-mail-scale)),
      calc(0.75 * var(--rem))
    );
    --sh-reg-mail-epos-lead-border: clamp(
      2px,
      calc(2px + 1px * var(--sh-reg-mail-scale)),
      3px
    );
    --sh-reg-mail-epos-caution-font-size: clamp(
      calc(0.675 * var(--rem)),
      calc(calc(0.675 * var(--rem)) + calc(0.325 * var(--rem)) * var(--sh-reg-mail-scale)),
      calc(1 * var(--rem))
    );
    --sh-reg-mail-epos-body-margin-top: 0;
    --sh-reg-mail-epos-caution-margin-top: clamp(
      calc(0.75 * var(--rem)),
      calc(calc(0.75 * var(--rem)) + calc(1.25 * var(--rem)) * var(--sh-reg-mail-scale)),
      calc(1.25 * var(--rem))
    );

    /* バナー */
    --sh-reg-mail-banners-max-width: var(--sh-reg-mail-guide-max-width);
    --sh-reg-mail-banners-margin-block-start: clamp(
      calc(1.5 * var(--rem)),
      calc(calc(1.5 * var(--rem)) + calc(1 * var(--rem)) * var(--sh-reg-mail-scale)),
      calc(2.5 * var(--rem))
    );
    --sh-reg-mail-banners-margin-block-end: clamp(
      calc(2.5 * var(--rem)),
      calc(calc(2.5 * var(--rem)) + calc(1.5 * var(--rem)) * var(--sh-reg-mail-scale)),
      calc(4 * var(--rem))
    );
    --sh-reg-mail-bnr-gap: clamp(
      calc(1 * var(--rem)),
      calc(calc(1 * var(--rem)) + calc(0.5 * var(--rem)) * var(--sh-reg-mail-scale)),
      calc(1.5 * var(--rem))
    );

    /* グループバナー */
    --sh-reg-mail-group-max-width: var(--sh-reg-mail-guide-max-width);
    --sh-reg-mail-group-margin-block-start: clamp(
      calc(1.5 * var(--rem)),
      calc(calc(1.5 * var(--rem)) + calc(1 * var(--rem)) * var(--sh-reg-mail-scale)),
      calc(2.5 * var(--rem))
    );
    --sh-reg-mail-group-title-image-max-height: var(
      --sh-reg-mail-guide-title-image-max-height
    );
    --sh-reg-mail-group-title-border: clamp(
      2px,
      calc(2px + 1px * var(--sh-reg-mail-scale)),
      3px
    );
    --sh-reg-mail-group-title-radius: clamp(
      40px,
      calc(40px + 16px * var(--sh-reg-mail-scale)),
      56px
    );
    --sh-reg-mail-group-title-padding-block: clamp(
      calc(0.8 * var(--rem)),
      calc(calc(0.8 * var(--rem)) + calc(0.45 * var(--rem)) * var(--sh-reg-mail-scale)),
      calc(1.25 * var(--rem))
    );
    --sh-reg-mail-group-title-padding-inline: clamp(
      calc(1 * var(--rem)),
      calc(calc(1 * var(--rem)) + calc(0.5 * var(--rem)) * var(--sh-reg-mail-scale)),
      calc(1.5 * var(--rem))
    );
    --sh-reg-mail-group-list-margin-top: clamp(
      calc(1 * var(--rem)),
      calc(calc(1 * var(--rem)) + calc(1 * var(--rem)) * var(--sh-reg-mail-scale)),
      calc(2 * var(--rem))
    );
    --sh-reg-mail-group-list-gap: clamp(
      calc(1 * var(--rem)),
      calc(calc(1 * var(--rem)) + calc(0.5 * var(--rem)) * var(--sh-reg-mail-scale)),
      calc(1.5 * var(--rem))
    );
    /* バナー幅（以上は拡大しない）。狭い画面は2列、広がったら auto-fill で3・4列 */
    --sh-reg-mail-group-banner-width: calc(10 * var(--rem));
    --sh-reg-mail-group-list-max-width: calc(
      4 * var(--sh-reg-mail-group-banner-width) + 3 *
        var(--sh-reg-mail-group-list-gap)
    );
    /* 3列分の幅が確保できる目安（調整可） */
    --sh-reg-mail-group-multi-col-min: calc(33 * var(--rem));

    padding: var(--sh-reg-mail-padding-block-start) var(--sh-reg-mail-padding-inline)
      var(--sh-reg-mail-padding-block-end);
    text-align: center;
    background: #fdeae9;

    @media (min-width: 1024px) {
      /*
        1024px 以上: scale 打ち止め（各 clamp の第3引数 = PC 値）。
        clamp の最大と同じ数値はここに書かない。PC 専用の上書きだけ残す。
      */
      --sh-reg-mail-scale: 1;
      /* PC のみ gap を clamp 最大(calc(1.5 * var(--rem)))より狭く */
      --sh-reg-mail-group-list-gap: calc(0.5 * var(--rem));
      /* 1024px: 6列1行（fluid 時の4列 max-width からコンテンツ幅へ） */
      --sh-reg-mail-group-list-max-width: var(--sh-reg-mail-group-max-width);
    }
  }

  .ShareholderRegistration__mail-title {
    margin: 0;
    position: relative;
    width: min(100%, var(--sh-reg-mail-title-max));
    margin-inline: auto;
  }

  .ShareholderRegistration__mail-title::before {
    content: '';
    display: block;
    position: absolute;
    top: var(--sh-reg-mail-motif-01-top);
    left: var(--sh-reg-mail-motif-01-left);
    width: var(--sh-reg-mail-motif-01-size);
    aspect-ratio: 33 / 36;
    height: auto;
    background: url('../img/mail_motif_01.svg') no-repeat center / contain;
  }

  .ShareholderRegistration__mail-title::after {
    content: '';
    display: block;
    position: absolute;
    top: var(--sh-reg-mail-motif-02-top);
    right: var(--sh-reg-mail-motif-02-right);
    width: var(--sh-reg-mail-motif-02-size);
    aspect-ratio: 1;
    height: auto;
    background: #edacb6;
    border-radius: 50%;
  }

  .ShareholderRegistration__mail-title-image {
    display: block;
    width: 100%;
    height: auto;
  }

  .ShareholderRegistration__mail-lead {
    margin: var(--sh-reg-mail-lead-margin-block-start) 0 0;
    color: #d9506d;
    font-size: var(--sh-reg-mail-lead-font-size);
    font-weight: 700;
  }

  .ShareholderRegistration__mail-cms {
    width: min(100%, var(--sh-reg-mail-cms-max-width));
    margin-inline: auto;
    padding: var(--sh-reg-mail-cms-padding-block) 0;
  }

  .ShareholderRegistration__mail-cms-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sh-reg-mail-cms-list-gap);
  }

  .ShareholderRegistration__mail-cms-item {
    margin: 0;
    padding: 0;
    min-width: 0;
  }

  .ShareholderRegistration__mail-cms-card {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: var(--sh-reg-mail-cms-card-gap);
    width: 100%;
    text-decoration: none;
    color: #595757;
  }
  .ShareholderRegistration__mail-cms-card:hover {
    .ShareholderRegistration__mail-cms-image {
      scale: 1.05;
      transition: .3s;
    }
  }

  .ShareholderRegistration__mail-cms-media {
    flex: 0 0 48%;
    width: 48%;
    aspect-ratio: 16 / 9;
    background: #fff;
    border-radius: var(--sh-reg-mail-cms-media-radius);
    overflow: hidden;
  }

  .ShareholderRegistration__mail-cms-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .3s;
  }

  .ShareholderRegistration__mail-cms-body {
    flex: 1;
    min-width: 0;
  }

  .ShareholderRegistration__mail-cms-title {
    margin: 0;
    padding: 0;
    font-size: var(--sh-reg-mail-cms-title-font-size);
    line-height: 1.5;
    text-align: left;
  }

  .ShareholderRegistration__mail-cms-title-date {
    display: block;
    margin-bottom: var(--sh-reg-mail-cms-date-margin-bottom);
  }

  .ShareholderRegistration__mail-cms-title-text {
    display: block;
  }

  @media (min-width: 1024px) {
    .ShareholderRegistration__mail-cms-list {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: var(--sh-reg-mail-cms-grid-gap);
    }

    .ShareholderRegistration__mail-cms-card {
      flex-direction: column;
      gap: var(--sh-reg-mail-cms-body-gap);
    }

    .ShareholderRegistration__mail-cms-media {
      flex: none;
      width: 100%;
    }
  }


  .ShareholderRegistration__mail-voice {
    width: min(100%, var(--sh-reg-mail-voice-max-width));
    margin: var(--sh-reg-mail-voice-margin-block-start) auto
      var(--sh-reg-mail-voice-margin-block-end);
  }

  .ShareholderRegistration__mail-voice-title {
    position: relative;
    color: #d9506d;
    font-size: var(--sh-reg-mail-voice-title-font-size);
    font-weight: 700;
  }

  .ShareholderRegistration__mail-voice-title::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 0;
    width: 100%;
    height: var(--sh-reg-mail-voice-title-line-size);
    background-color: #d9506d;
    translate: 0 -50%;
  }

  .ShareholderRegistration__mail-voice-title span {
    position: relative;
    z-index: 1;
    display: inline-block;
    padding: 0 var(--sh-reg-mail-voice-title-padding-inline);
    background: #fdeae9;
  }

  .ShareholderRegistration__mail-voice-item {
    position: relative;
    padding-left: calc(var(--sh-reg-mail-voice-icon-width) + var(--sh-reg-mail-voice-gap));
  }

  .ShareholderRegistration__mail-voice-item + .ShareholderRegistration__mail-voice-item {
    margin-top: var(--sh-reg-mail-voice-item-gap);
  }

  .ShareholderRegistration__mail-voice-text {
    position: relative;
    z-index: 0;
    margin: 0;
    padding: var(--sh-reg-mail-voice-text-padding-block)
      var(--sh-reg-mail-voice-text-padding-inline);
    font-size: var(--sh-reg-mail-voice-text-font-size);
    font-weight: 400;
    text-align: left;
    background: #fff;
    border-radius: var(--sh-reg-mail-voice-text-radius);
    box-shadow: var(--sh-reg-mail-voice-shadow-offset) var(--sh-reg-mail-voice-shadow-offset) 0
      rgba(181, 181, 182, 1);
  }

  .ShareholderRegistration__mail-voice-text::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: var(--sh-reg-mail-voice-tail-border-block)
      var(--sh-reg-mail-voice-tail-border-inline) var(--sh-reg-mail-voice-tail-border-block) 0;
    border-color: transparent #fff transparent transparent;
    translate: -100% -50%;
  }

  .ShareholderRegistration__mail-voice-icon {
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 1;
    width: var(--sh-reg-mail-voice-icon-width);
    margin: 0;
    translate: 0 -50%;
  }

  .ShareholderRegistration__mail-voice-icon-image {
    display: block;
    width: 100%;
    height: auto;
  }

  .ShareholderRegistration__mail-guide {
    width: min(100%, var(--sh-reg-mail-guide-max-width));
    margin-inline: auto;
  }

  .ShareholderRegistration__mail-guide-title {
    background: #e080a0;
    border: var(--sh-reg-mail-guide-title-border) solid #fff;
    border-radius: var(--sh-reg-mail-guide-title-radius);
    padding: var(--sh-reg-mail-guide-title-padding-block)
      var(--sh-reg-mail-guide-title-padding-inline);
    margin-inline: auto;
  }

  .ShareholderRegistration__mail-guide-title-image {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: var(--sh-reg-mail-guide-title-image-max-height);
    height: auto;
    margin-inline: auto;
  }

  .ShareholderRegistration__mail-guide-box {
    position: relative;
    width: min(100%, var(--sh-reg-mail-guide-box-max));
    margin-inline: auto;
  }

  .ShareholderRegistration__mail-guide-box-image {
    display: block;
    width: 100%;
    height: auto;
  }

  .ShareholderRegistration__mail-guide-cta {
    position: absolute;
    bottom: var(--sh-reg-mail-guide-cta-bottom);
    left: 50%;
    translate: -50% 0;
    width: 100%;
    height: auto;
  }

  .ShareholderRegistration__mail-guide-cta-link {
    display: block;
  }

  .ShareholderRegistration__mail-guide-cta-image {
    display: block;
    margin-inline: auto;
    width: min(100%, var(--sh-reg-mail-guide-cta-max));
    height: auto;
  }

  .ShareholderRegistration__mail-guide-caution {
    list-style: none;
    margin: var(--sh-reg-mail-guide-caution-margin-top) 0 0;
    padding: 0 0 var(--sh-reg-mail-guide-caution-padding-bottom);
    text-align: left;
    font-size: var(--sh-reg-mail-guide-caution-font-size);
    font-weight: 400;
    border-bottom: var(--sh-reg-mail-guide-caution-border) solid #fff;
  }

  .ShareholderRegistration__mail-guide-caution-item {
    position: relative;
    margin: 0;
    padding-left: 1.25em;
  }

  .ShareholderRegistration__mail-guide-caution-item::before {
    content: '※';
    position: absolute;
    left: 0;
  }

  .ShareholderRegistration__mail-guide-caution-note {
    color: #d9506d;
    font-weight: 700;
  }

  .ShareholderRegistration__mail-guide-voting {
    margin-top: var(--sh-reg-mail-guide-voting-margin-top);
  }

  .ShareholderRegistration__mail-guide-voting-text {
    margin: 0;
    text-align: center;
  }

  .ShareholderRegistration__mail-guide-voting-text-image {
    display: block;
    width: min(100%, var(--sh-reg-mail-guide-media-max));
    height: auto;
    margin-inline: auto;
  }

  .ShareholderRegistration__mail-guide-voting-figure {
    margin: var(--sh-reg-mail-guide-voting-figure-margin-top) 0 0;
  }

  .ShareholderRegistration__mail-guide-voting-figure-image {
    display: block;
    width: min(100%, var(--sh-reg-mail-guide-media-max));
    height: auto;
    margin-inline: auto;
  }

  .ShareholderRegistration__mail-epos {
    width: min(100%, var(--sh-reg-mail-epos-max-width));
    max-width: 100%;
    margin-top: var(--sh-reg-mail-epos-margin-top);
    margin-inline: auto;
    overflow-x: clip;
    background: #45a2b0;
    padding: var(--sh-reg-mail-epos-padding-block-start) 0
      var(--sh-reg-mail-epos-padding-block-end);
  }

  .ShareholderRegistration__mail-epos-title {
    margin: 0;
    box-sizing: border-box;
    max-width: 100%;
    text-align: center;
    overflow-wrap: anywhere;
    background: #dfedf0;
    color: #45a2b0;
    font-size: var(--sh-reg-mail-epos-title-font-size);
    font-weight: 700;
    padding: var(--sh-reg-mail-epos-title-padding-block-start)
      var(--sh-reg-mail-epos-title-padding-inline)
      var(--sh-reg-mail-epos-title-padding-block-end);
    line-height: 1.35;
  }

  .ShareholderRegistration__mail-epos-body {
    display: flex;
    align-items: center;
    gap: var(--sh-reg-mail-epos-body-gap);
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    margin-top: var(--sh-reg-mail-epos-body-margin-top);
    padding: var(--sh-reg-mail-epos-body-padding-block)
      var(--sh-reg-mail-epos-body-padding-inline);
  }

  .ShareholderRegistration__mail-epos-card {
    flex: 0 0 var(--sh-reg-mail-epos-card-width);
    width: var(--sh-reg-mail-epos-card-width);
    aspect-ratio: 60 / 93;
    background: url('../img/mail_epos_card.png') no-repeat center / contain;
  }

  .ShareholderRegistration__mail-epos-content {
    flex: 1;
    min-width: 0;
  }

  .ShareholderRegistration__mail-epos-lead {
    margin: 0;
    overflow-wrap: anywhere;
    text-align: center;
    color: #dfedf0;
    font-size: var(--sh-reg-mail-epos-lead-font-size);
    font-weight: 700;
    padding: var(--sh-reg-mail-epos-lead-padding-block) 0;
    line-height: 1.35;
    border-top: var(--sh-reg-mail-epos-lead-border) solid #dfedf0;
    border-bottom: var(--sh-reg-mail-epos-lead-border) solid #dfedf0;

    span {
      font-size: var(--sh-reg-mail-epos-lead-span-font-size);
      vertical-align: middle;
      margin-right: calc(0.5 * var(--rem));
    }
  }

  .ShareholderRegistration__mail-epos-caution {
    list-style: none;
    margin: var(--sh-reg-mail-epos-caution-margin-top) 0 0 0;
    padding: 0;
    color: #dfedf0;
    font-size: var(--sh-reg-mail-epos-caution-font-size);
  }

  .ShareholderRegistration__mail-epos-caution-item {
    position: relative;
    margin: 0;
    overflow-wrap: anywhere;
    text-align: left;
    padding-left: 1.25em;
  }

  .ShareholderRegistration__mail-epos-caution-item::before {
    content: '※';
    position: absolute;
    left: 0;
  }

  .ShareholderRegistration__mail-banners {
    width: min(100%, var(--sh-reg-mail-banners-max-width));
    max-width: 100%;
    margin: var(--sh-reg-mail-banners-margin-block-start) auto
      var(--sh-reg-mail-banners-margin-block-end);
  }

  .ShareholderRegistration__mail-bnr {
    margin: 0;
  }

  .ShareholderRegistration__mail-bnr-link {
    display: block;
  }

  .ShareholderRegistration__mail-bnr-image {
    display: block;
    width: 100%;
    height: auto;
  }

  .ShareholderRegistration__mail-bnr--kabu {
    margin-bottom: var(--sh-reg-mail-bnr-gap);
  }

  .ShareholderRegistration__mail-group {
    width: min(100%, var(--sh-reg-mail-group-max-width));
    max-width: 100%;
    margin: var(--sh-reg-mail-group-margin-block-start) auto 0;
  }

  .ShareholderRegistration__mail-group-title {
    position: relative;
    box-sizing: border-box;
    max-width: 100%;
    margin: 0;
    background: #e080a0;
    border: var(--sh-reg-mail-group-title-border) solid #fff;
    border-radius: var(--sh-reg-mail-group-title-radius);
    padding: var(--sh-reg-mail-group-title-padding-block)
      var(--sh-reg-mail-group-title-padding-inline);
  }

  .ShareholderRegistration__mail-group-title .ShareholderRegistration__mail-guide-image {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: var(--sh-reg-mail-group-title-image-max-height);
    height: auto;
    margin-inline: auto;
  }

  .ShareholderRegistration__mail-group-list {
    list-style: none;
    box-sizing: border-box;
    width: 100%;
    max-width: min(100%, var(--sh-reg-mail-group-list-max-width));
    margin: var(--sh-reg-mail-group-list-margin-top) auto 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sh-reg-mail-group-list-gap);
  }

  @media (min-width: 528px) {
    .ShareholderRegistration__mail-group-list {
      grid-template-columns: repeat(
        auto-fill,
        var(--sh-reg-mail-group-banner-width)
      );
      justify-content: start;
    }
  }

  .ShareholderRegistration__mail-group-item {
    margin: 0;
    min-width: 0;
  }

  .ShareholderRegistration__mail-group-item a {
    display: block;
  }

  .ShareholderRegistration__mail-group-image {
    display: block;
    width: 100%;
    max-width: var(--sh-reg-mail-group-banner-width);
    height: auto;
    margin-inline: auto;
  }

  @media (min-width: 528px) {
    .ShareholderRegistration__mail-group-image {
      width: var(--sh-reg-mail-group-banner-width);
      max-width: 100%;
    }
  }

  @media (min-width: 1024px) {
    .ShareholderRegistration__mail-group-list {
      grid-template-columns: repeat(6, minmax(0, 1fr));
      justify-content: center;
    }

    .ShareholderRegistration__mail-group-image {
      width: 100%;
      max-width: none;
    }
  }
}

/* ============================================================================
   組み込み時の調整（当方）
   ----------------------------------------------------------------------------
   コーポレートサイトの reset.scss が h1–h6 の margin を 0 にしているため、
   先方納品 CSS で明示マージンを持たず UA 既定余白に依存していた見出しに
   余白を補う。値は UA 既定（h2:0.83em / h3:1em、各見出しの font-size 基準）を
   踏襲。em は「その見出し自身の margin × 自身の font-size」の単一階層なので
   多重化（compounding）は起きない。
   ============================================================================ */
.ShareholderRegistration__mail-voice-title {
  /* h3 既定相当 */
  margin-block: 1em;
}

.ShareholderRegistration__mail-guide-title {
  /* h2 既定相当 */
  margin-block: 0.83em;
}