@charset "UTF-8";
/* ==========================================================================
   日本語版サイト固有スタイル（2026 デザインシステム）

   styles2026.css は英語版サイトからそのまま流用したビルド済みファイルのため、
   直接編集せずに日本語版でのみ必要な差分をここへ集約する。
   読み込みは _html_base.twig の use_2026 分岐で styles2026.css /
   ftj.theme_ui_header_2026.css / ftj.theme_ui_footer_2026.css の後。

   Tailwind のビルド環境がリポジトリに無いため、styles2026.css に出力されていない
   ユーティリティはHTMLに書いても効かない。必要な場合は「2. 不足ユーティリティ」に
   同名クラスを手動で追加する。
   ブレークポイント: sm 640 / md 768 / lg 1024 / xl 1272px。

   目次
   1. 機関投資家 運用戦略詳細ページ
   2. 不足ユーティリティの補完
   3. 機関投資家 クッキー同意モーダル
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 機関投資家 運用戦略詳細ページ
   -------------------------------------------------------------------------- */

/* 戦略名の行数がページ毎に異なるため、PC時はタイトル領域の高さを揃える。
   styles2026.css がビルド済みで lg:min-h-[175px] 相当のユーティリティを
   持たないためここで指定する。lg ブレークポイントは 1024px。 */
@media (min-width: 1024px) {
  .frk-product-title {
    min-height: 175px;
    margin-bottom: 32px;
  }
}

/* --------------------------------------------------------------------------
   2. 不足ユーティリティの補完

   styles2026.css は英語版で使われている組み合わせしか出力されていない。
   日本語版で必要になったユーティリティを Tailwind と同じ命名・同じ値で追加する。
   -------------------------------------------------------------------------- */

/* xl は text-4xl 以上しか出力されていない。値は text-3xl / lg:text-3xl と同一。 */
@media (min-width: 1272px) {
  .xl\:text-3xl {
    font-size: 1.875rem;
    line-height: 2.375rem;
  }
}

/* --------------------------------------------------------------------------
   3. 機関投資家 クッキー同意モーダル（_institutional_cookie2026.twig）

   英語版サイトのクッキーモーダル（幅 568px の中央カード、上部にFTロゴ、
   ピル型ボタンを縦積み）に合わせる。styles2026.css には dialog 用のスタイルが
   dialog{padding:0} しか無いため、レイアウトはここで組み立てる。
   ボタンは styles2026.css の .button / .button--primary / .button--secondary を使う。
   -------------------------------------------------------------------------- */

.cookie-modal {
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0;
  border: 0;
  background-color: transparent;
}

.cookie-modal[open] {
  display: flex;
  justify-content: center;
  padding: 24px 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* ::backdrop はカスタムプロパティを継承しないブラウザがあるため実値で指定する。 */
.cookie-modal::backdrop {
  background-color: rgba(0, 0, 0, 0.5);
}

/* モーダル表示中は背面をスクロールさせない。JS が body に付与する。 */
body.cookie-modal-open {
  overflow: hidden;
}

.cookie-modal__panel {
  width: 100%;
  max-width: 568px;
  margin: auto;
  padding: 32px 24px;
  text-align: left;
}

/* 初期フォーカスの受け皿でしかないため、フォーカスリングは出さない。 */
.cookie-modal__panel:focus {
  outline: none;
}

@media (min-width: 768px) {
  .cookie-modal__panel {
    padding: 40px;
  }
}

.cookie-modal__logo {
  display: block;
  width: 240px;
  max-width: 100%;
  height: auto;
  margin: 0 auto 24px;
}

@media (min-width: 768px) {
  .cookie-modal__logo {
    width: 300px;
  }
}

.cookie-modal__title {
  margin: 0 0 8px;
  color: var(--color-std-nc1-950);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.5;
}

.cookie-modal__subtitle {
  margin: 0 0 16px;
  color: var(--color-std-nc1-950);
  font-size: 1rem;
  line-height: 1.5;
}

.cookie-modal__body {
  margin: 0 0 24px;
  color: var(--color-std-nc1-500);
  font-size: 0.875rem;
  line-height: 1.7;
}

.cookie-modal__body p {
  margin: 0 0 12px;
}

.cookie-modal__body p:last-child {
  margin-bottom: 0;
}

.cookie-modal__body a {
  color: var(--color-std-pc1-500);
  text-decoration: underline;
}

.cookie-modal__buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

/* ラベルが長いため本家と同じく縦積みのまま、幅だけ内容に合わせる。 */
.cookie-modal__buttons .button {
  width: 100%;
  text-align: center;
}

@media (min-width: 768px) {
  .cookie-modal__buttons .button {
    width: auto;
  }
}