@charset "UTF-8";
/*
 * /open-account/css/page.css
 * ---------------------------------------------------------------
 * 役割: /open-account/index.php が読み込む CSS をこの 1 本にまとめる。
 *       renewal-data/ への参照は完全に持たない (依存ゼロ)。
 *
 * 構成 (上から順に cascade):
 *   1. 外部 reset / 追加フォント (CDN, open-account のみ適用)
 *      - meyer-reset: 全要素 reset。他ページに広げない目的でここに限定。
 *      - Google Fonts: Inter / Noto Sans (Figma export が直書きで参照)。
 *        Noto Sans JP は head.php preload で全ページ共通のため再 import 不要。
 *   2. open-account 固有デザイントークン (旧 styleguide.css 由来)
 *      - --ja-PC-* / --eg-PC-* / --ja-SP-* / --eg-SP-* / --card 系。
 *        app.css の --mane-color / --ta-* とは別系統 (Figma 命名) のため
 *        ここに保持。style.css / add.css の var(...) 参照を解決する。
 *   3. ベース指定 (旧 globals.css 由来 / body.open-account-page スコープ)
 *      - box-sizing / font-smoothing / リンク下線消し / focus 色 など。
 *        他ページに副作用が出ないよう全部スコープ化。
 *      - 共通 @font-face (DIN 2014 Narrow) は app.css に移動済み。
 *   4. style.css 実体 (Figma 書き出しの本体スタイル)
 *      - 旧パス: /renewal-data/open-account-pc/style.css
 *   5. add.css 実体 (手動オーバーライド)
 *      - 旧パス: /renewal-data/open-account-pc/add.css?20260525-10
 *
 * 編集のとき:
 *   - 見た目調整は基本 add.css ブロックで。Figma export 由来は触らない。
 *   - サイト全体に影響する変更は本ファイルではなく app.css 側で。
 * ---------------------------------------------------------------
 */

/* ----- 1. 外部 reset / 追加フォント (open-account のみ適用) ----- */
@import url("https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css");
/* Inter / Noto Sans は英数字と旧 export fallback で参照されるため復活。
   Noto Sans JP は head.php で全ページ共通に preload 済みなので再 import しない。 */
@import url("https://fonts.googleapis.com/css?family=Inter:400,700|Noto+Sans:700");

/* ----- 2. open-account 固有デザイントークン (Figma export 由来) ----- */
/*  もとは renewal-data/open-account-pc/styleguide.css にあった :root token。
    命名 (--ja-PC-* / --eg-PC-* / --ja-SP-* / --eg-SP-*) は Figma export 専用で、
    app.css の共通 token (--mane-color / --ta-* 系) とは別系統のため、
    open-account ページ専用としてここに保持する。
    style.css / add.css 内の var(...) 参照を解決するために必須。 */
:root {
  --ja-PC-h1-40px-bold-font-family: var(--ta-font-family-ja, "Noto Sans JP", "Noto Sans", sans-serif);
  --ja-PC-h1-40px-bold-font-weight: 700;
  --ja-PC-h1-40px-bold-font-size: 40px;
  --ja-PC-h1-40px-bold-letter-spacing: 1px;
  --ja-PC-h1-40px-bold-line-height: 170.00000476837158%;
  --ja-PC-h1-40px-bold-font-style: normal;
  --ja-PC-h2-28px-bold-font-family: var(--ta-font-family-ja, "Noto Sans JP", "Noto Sans", sans-serif);
  --ja-PC-h2-28px-bold-font-weight: 700;
  --ja-PC-h2-28px-bold-font-size: 28px;
  --ja-PC-h2-28px-bold-letter-spacing: 1px;
  --ja-PC-h2-28px-bold-line-height: 170.00000476837158%;
  --ja-PC-h2-28px-bold-font-style: normal;
  --ja-PC-h3-24px-bold-font-family: var(--ta-font-family-ja, "Noto Sans JP", "Noto Sans", sans-serif);
  --ja-PC-h3-24px-bold-font-weight: 700;
  --ja-PC-h3-24px-bold-font-size: 24px;
  --ja-PC-h3-24px-bold-letter-spacing: 1px;
  --ja-PC-h3-24px-bold-line-height: 170.00000476837158%;
  --ja-PC-h3-24px-bold-font-style: normal;
  --ja-PC-body-16px-medium-font-family: var(--ta-font-family-ja, "Noto Sans JP", "Noto Sans", sans-serif);
  --ja-PC-body-16px-medium-font-weight: 500;
  --ja-PC-body-16px-medium-font-size: 16px;
  --ja-PC-body-16px-medium-letter-spacing: 1px;
  --ja-PC-body-16px-medium-line-height: 170.00000476837158%;
  --ja-PC-body-16px-medium-font-style: normal;
  --ja-PC-caption-12px-medium-font-family: var(--ta-font-family-ja, "Noto Sans JP", "Noto Sans", sans-serif);
  --ja-PC-caption-12px-medium-font-weight: 500;
  --ja-PC-caption-12px-medium-font-size: 12px;
  --ja-PC-caption-12px-medium-letter-spacing: 1px;
  --ja-PC-caption-12px-medium-line-height: 139.9999976158142%;
  --ja-PC-caption-12px-medium-font-style: normal;
  --ja-PC-title-font-family: var(--ta-font-family-ja, "Noto Sans JP", "Noto Sans", sans-serif);
  --ja-PC-title-font-weight: 700;
  --ja-PC-title-font-size: 15px;
  --ja-PC-title-letter-spacing: 0px;
  --ja-PC-title-line-height: normal;
  --ja-PC-title-font-style: normal;
  --ja-SP-h1-28px-bold-font-family: var(--ta-font-family-ja, "Noto Sans JP", "Noto Sans", sans-serif);
  --ja-SP-h1-28px-bold-font-weight: 700;
  --ja-SP-h1-28px-bold-font-size: 28px;
  --ja-SP-h1-28px-bold-letter-spacing: 1px;
  --ja-SP-h1-28px-bold-line-height: 170.00000476837158%;
  --ja-SP-h1-28px-bold-font-style: normal;
  --ja-SP-h2-24px-bold-font-family: var(--ta-font-family-ja, "Noto Sans JP", "Noto Sans", sans-serif);
  --ja-SP-h2-24px-bold-font-weight: 700;
  --ja-SP-h2-24px-bold-font-size: 24px;
  --ja-SP-h2-24px-bold-letter-spacing: 1px;
  --ja-SP-h2-24px-bold-line-height: 170.00000476837158%;
  --ja-SP-h2-24px-bold-font-style: normal;
  --ja-SP-h3-18px-bold-font-family: var(--ta-font-family-ja, "Noto Sans JP", "Noto Sans", sans-serif);
  --ja-SP-h3-18px-bold-font-weight: 700;
  --ja-SP-h3-18px-bold-font-size: 18px;
  --ja-SP-h3-18px-bold-letter-spacing: 1px;
  --ja-SP-h3-18px-bold-line-height: 170.00000476837158%;
  --ja-SP-h3-18px-bold-font-style: normal;
  --ja-SP-body-16px-medium-font-family: var(--ta-font-family-ja, "Noto Sans JP", "Noto Sans", sans-serif);
  --ja-SP-body-16px-medium-font-weight: 500;
  --ja-SP-body-16px-medium-font-size: 16px;
  --ja-SP-body-16px-medium-letter-spacing: 1px;
  --ja-SP-body-16px-medium-line-height: 170.00000476837158%;
  --ja-SP-body-16px-medium-font-style: normal;
  --ja-SP-caption-12px-regular-font-family: var(--ta-font-family-ja, "Noto Sans JP", "Noto Sans", sans-serif);
  --ja-SP-caption-12px-regular-font-weight: 400;
  --ja-SP-caption-12px-regular-font-size: 12px;
  --ja-SP-caption-12px-regular-letter-spacing: 1px;
  --ja-SP-caption-12px-regular-line-height: 139.9999976158142%;
  --ja-SP-caption-12px-regular-font-style: normal;
  --eg-PC-display-40px-bold-font-family: "DIN 2014 Narrow", Helvetica;
  --eg-PC-display-40px-bold-font-weight: 700;
  --eg-PC-display-40px-bold-font-size: 40px;
  --eg-PC-display-40px-bold-letter-spacing: 1px;
  --eg-PC-display-40px-bold-line-height: 170.00000476837158%;
  --eg-PC-display-40px-bold-font-style: normal;
  --eg-PC-heading-32px-bold-font-family: "DIN 2014 Narrow", Helvetica;
  --eg-PC-heading-32px-bold-font-weight: 700;
  --eg-PC-heading-32px-bold-font-size: 30px;
  --eg-PC-heading-32px-bold-letter-spacing: 1px;
  --eg-PC-heading-32px-bold-line-height: 170.00000476837158%;
  --eg-PC-heading-32px-bold-font-style: normal;
  --eg-PC-heading-32px-regular-font-family: "DIN 2014 Narrow", Helvetica;
  --eg-PC-heading-32px-regular-font-weight: 400;
  --eg-PC-heading-32px-regular-font-size: 30px;
  --eg-PC-heading-32px-regular-letter-spacing: 1px;
  --eg-PC-heading-32px-regular-line-height: 170.00000476837158%;
  --eg-PC-heading-32px-regular-font-style: normal;
  --eg-PC-body-highlight-20px-regular-font-family: "DIN 2014 Narrow", Helvetica;
  --eg-PC-body-highlight-20px-regular-font-weight: 400;
  --eg-PC-body-highlight-20px-regular-font-size: 20px;
  --eg-PC-body-highlight-20px-regular-letter-spacing: 1px;
  --eg-PC-body-highlight-20px-regular-line-height: 170.00000476837158%;
  --eg-PC-body-highlight-20px-regular-font-style: normal;
  --eg-PC-caption-12px-regular-font-family: "DIN 2014 Narrow", Helvetica;
  --eg-PC-caption-12px-regular-font-weight: 400;
  --eg-PC-caption-12px-regular-font-size: 14px;
  --eg-PC-caption-12px-regular-letter-spacing: 1px;
  --eg-PC-caption-12px-regular-line-height: 139.9999976158142%;
  --eg-PC-caption-12px-regular-font-style: normal;
  --eg-SP-display-32px-bold-font-family: "DIN 2014 Narrow", Helvetica;
  --eg-SP-display-32px-bold-font-weight: 700;
  --eg-SP-display-32px-bold-font-size: 32px;
  --eg-SP-display-32px-bold-letter-spacing: 1px;
  --eg-SP-display-32px-bold-line-height: 170.00000476837158%;
  --eg-SP-display-32px-bold-font-style: normal;
  --eg-SP-heading-24px-bold-font-family: "DIN 2014 Narrow", Helvetica;
  --eg-SP-heading-24px-bold-font-weight: 700;
  --eg-SP-heading-24px-bold-font-size: 24px;
  --eg-SP-heading-24px-bold-letter-spacing: 1px;
  --eg-SP-heading-24px-bold-line-height: 170.00000476837158%;
  --eg-SP-heading-24px-bold-font-style: normal;
  --eg-SP-heading-18px-regular-font-family: "DIN 2014 Narrow", Helvetica;
  --eg-SP-heading-18px-regular-font-weight: 400;
  --eg-SP-heading-18px-regular-font-size: 18px;
  --eg-SP-heading-18px-regular-letter-spacing: 1px;
  --eg-SP-heading-18px-regular-line-height: 170.00000476837158%;
  --eg-SP-heading-18px-regular-font-style: normal;
  --eg-SP-body-highlight-16px-regular-font-family: "DIN 2014 Narrow", Helvetica;
  --eg-SP-body-highlight-16px-regular-font-weight: 400;
  --eg-SP-body-highlight-16px-regular-font-size: 16px;
  --eg-SP-body-highlight-16px-regular-letter-spacing: 1px;
  --eg-SP-body-highlight-16px-regular-line-height: 170.00000476837158%;
  --eg-SP-body-highlight-16px-regular-font-style: normal;
  --eg-SP-caption-12px-regular-font-family: "DIN 2014 Narrow", Helvetica;
  --eg-SP-caption-12px-regular-font-weight: 400;
  --eg-SP-caption-12px-regular-font-size: 12px;
  --eg-SP-caption-12px-regular-letter-spacing: 1px;
  --eg-SP-caption-12px-regular-line-height: 139.9999976158142%;
  --eg-SP-caption-12px-regular-font-style: normal;
  --card: 0px 4px 14px 0px rgba(235, 243, 252, 0.48);
  --card-02: 0px 4px 10px 0px rgba(138, 151, 165, 0.4);
}

/* ----- 3. ベース指定 (open-account ページ限定スコープ) ----- */
/*  もとは renewal-data/open-account-pc/globals.css にあった素のセレクタを、
    body.open-account-page 配下にスコープして他ページへの副作用を消した。 */
body.open-account-page,
body.open-account-page *,
body.open-account-page *::before,
body.open-account-page *::after {
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}
body.open-account-page {
  margin: 0;
  min-height: 100%;
  overflow-x: hidden;
}
body.open-account-page a {
  text-decoration: none;
}
body.open-account-page button:focus-visible {
  outline: 2px solid #4a90e2 !important;
  outline: -webkit-focus-ring-color auto 5px !important;
}

/* =============================================================
 * BEGIN style.css (Figma export 本体)
 *   source: /renewal-data/open-account-pc/style.css (snapshot 20260526)
 * ============================================================= */
.screen {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1440px;
  align-items: center;
  padding: 100px 0px 0px;
  position: relative;
  background-color: #ffffff;
  margin-left: auto;
  margin-right: auto;
}

.screen .section-stocks {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
  /* hero直下は必ず40px（hero下の余白ルール）。次セクションとの境界は80px維持 */
  padding: 40px 0px 80px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  background-color: #ffffff;
}

.screen .rectangle {
  position: relative;
  width: 100px;
  height: 2px;
  background-color: var(--accentlite);
}

.screen .frame-3 {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  position: relative;
  flex: 0 0 auto;
}

/* .text-wrapper-2 のタイポグラフィは共通 .ta-h1 (app.css) を使用 */
.screen .text-wrapper-2 {
  position: relative;
  width: fit-content;
  text-align: center;
}

.screen .frame-4 {
  display: flex;
  flex-direction: column;
  height: 520.62px;
  align-items: center;
  justify-content: space-between;
  padding: 80px 0px;
  position: relative;
  align-self: stretch;
  width: 100%;
  background-color: var(--primary-pale);
}

.screen .frame-5 {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  position: relative;
  flex: 0 0 auto;
}

.screen .frame-6 {
  display: flex;
  width: 1000px;
  align-items: center;
  gap: 40px;
  position: relative;
  flex: 0 0 auto;
}

.screen .frame-7 {
  display: flex;
  flex-direction: column;
  width: 305px;
  align-items: flex-start;
  justify-content: center;
  gap: 16px;
  position: relative;
  border-radius: 8px;
}

.screen .frame-8 {
  display: flex;
  width: 305px;
  align-items: flex-start;
  justify-content: space-between;
  position: relative;
  flex: 0 0 auto;
}

.screen .auto-title {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: var(--ja-PC-h3-24px-bold-font-family);
  font-weight: var(--ja-PC-h3-24px-bold-font-weight);
  color: var(--primary-dark);
  font-size: var(--ja-PC-h3-24px-bold-font-size);
  text-align: center;
  letter-spacing: var(--ja-PC-h3-24px-bold-letter-spacing);
  line-height: var(--ja-PC-h3-24px-bold-line-height);
  white-space: nowrap;
  font-style: var(--ja-PC-h3-24px-bold-font-style);
}

.screen .img-wrapper {
  display: flex;
  flex-direction: column;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
  background-color: var(--mane-color);
  border-radius: 30px;
  box-shadow: var(--card-02);
  aspect-ratio: 1;
}

.screen .arrow-2 {
  position: relative;
  width: 17.54px;
  height: 17.18px;
}

.screen .stockcard {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  background-color: var(--bg-01);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid;
  border-color: var(--mane-color);
  box-shadow: var(--card);
}

.screen .bnr {
  position: relative;
  width: 305px;
  height: 146.62px;
  aspect-ratio: 2.09;
}

.screen .frame-9 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 16px;
  position: relative;
  flex: 0 0 auto;
}

.screen .frame-10 {
  display: flex;
  width: 307px;
  align-items: flex-start;
  justify-content: space-between;
  position: relative;
  flex: 0 0 auto;
}

.screen .bnr-wrapper {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 13px;
  position: relative;
  flex: 0 0 auto;
  background-color: var(--bg-01);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid;
  border-color: var(--mane-color);
  box-shadow: var(--card);
}

.screen .bnr-2 {
  position: relative;
  width: 306.67px;
  height: 146.62px;
  aspect-ratio: 2.09;
}

.screen .frame-11 {
  /* frame-8 / frame-10 と同じく矢印を右端に寄せる（Figma 1051:5102） */
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  position: relative;
  flex: 0 0 auto;
}

.screen .auto-title-2 {
  font-size: var(--ja-PC-h3-24px-bold-font-size);
  line-height: var(--ja-PC-h3-24px-bold-line-height);
  position: relative;
  width: fit-content;
  font-family: var(--ja-PC-h3-24px-bold-font-family);
  font-weight: var(--ja-PC-h3-24px-bold-font-weight);
  color: var(--primary-dark);
  text-align: center;
  letter-spacing: var(--ja-PC-h3-24px-bold-letter-spacing);
  white-space: nowrap;
  font-style: var(--ja-PC-h3-24px-bold-font-style);
}

.screen .flow-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
  padding: 80px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  background-color: var(--bg-01);
}

/* .auto-title-3 のタイポグラフィは共通 .ta-h1 (app.css) を使用 */
.screen .auto-title-3 {
  position: relative;
  width: fit-content;
  text-align: center;
  white-space: nowrap;
}

.screen .frame-12 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 40px;
  position: relative;
  flex: 0 0 auto;
}

.screen .steps-row {
  display: flex;
  flex-direction: column;
  width: 800px;
  align-items: center;
  gap: 20px;
  position: relative;
  flex: 0 0 auto;
}

.screen .step {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 40px 20px 40px 80px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  background-color: var(--bg-02);
  border-radius: 16px;
}

.screen .vector-wrapper {
  position: relative;
  width: 58px;
  height: 58px;
  aspect-ratio: 1;
}

.screen .vector {
  position: absolute;
  width: 87.50%;
  height: 87.50%;
  top: 12.50%;
  left: 12.50%;
}

.screen .s-title {
  position: relative;
  width: fit-content;
  font-family: var(--ja-PC-h2-28px-bold-font-family);
  font-weight: var(--ja-PC-h2-28px-bold-font-weight);
  color: var(--primary-dark);
  font-size: var(--ja-PC-h2-28px-bold-font-size);
  text-align: center;
  letter-spacing: var(--ja-PC-h2-28px-bold-letter-spacing);
  line-height: var(--ja-PC-h2-28px-bold-line-height);
  white-space: nowrap;
  font-style: var(--ja-PC-h2-28px-bold-font-style);
}

.screen .arrow-3 {
  position: relative;
  width: fit-content;
  transform: rotate(90deg);
  font-family: "Inter", Helvetica;
  font-weight: 700;
  color: var(--mane-color);
  font-size: 24px;
  letter-spacing: 0;
  line-height: normal;
}

.screen .vector-2 {
  position: absolute;
  width: 83.33%;
  height: 83.33%;
  top: 16.67%;
  left: 16.67%;
}

.screen .vector-3 {
  position: absolute;
  width: 87.50%;
  height: 91.67%;
  top: 8.33%;
  left: 12.50%;
}

.screen .outgoing-mail {
  position: relative;
  width: 58px;
  height: 58px;
}

.screen .vector-4 {
  position: absolute;
  width: 91.67%;
  height: 87.50%;
  top: 12.50%;
  left: 8.33%;
}

.screen .vector-5 {
  position: absolute;
  width: 95.83%;
  height: 95.83%;
  top: 4.17%;
  left: 4.17%;
}

.screen .frame-13 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 20px;
  position: relative;
  flex: 0 0 auto;
}

.screen .faq-section {
  display: flex;
  flex-direction: column;
  width: 1440px;
  align-items: center;
  gap: 80px;
  padding: 80px;
  position: relative;
  flex: 0 0 auto;
  background-color: var(--bg-02);
}

/* 旧 Figma export の固定ヘッダー/フッター/ナビ（.footer / .navigation / .cta-area /
   .cta-button / .cta-text / .cta-text-wrapper / .navbar / .link）は現在の .screen 内 HTML に
   存在しない死にセレクタのため削除（2026-07-07 チェックリスト監査）。
   共通ヘッダー/フッターは header.php / footer.php が担当。 */

/* =============================================================
 * END style.css
 * ============================================================= */

/* =============================================================
 * BEGIN add.css (手動オーバーライド)
 *   source: /renewal-data/open-account-pc/add.css (snapshot 20260526)
 * ============================================================= */
/*
 * add.css — /renewal-data/open-account-pc/add.css
 * /open-account/index.php レスポンシブ対応オーバーライド
 *
 * 役割: open-account/index.php のインライン <style> を外部化し、
 *       /index.php と同じ CSS 設計（triauto-pc/add.css と同一構造）に準拠。
 *       zoom / transform:scale ベースのレイアウトを除去する。
 *
 * ロード順: open-account-pc/style.css → この add.css
 */

/* ============================================================
   1. .screen ベース
      style.css の width: 1440px を override し、レスポンシブ化
   ============================================================ */

body.open-account-page {
  padding-top: 0 !important;
}

body.open-account-page .global-header-reserve {
  height: 48px !important;
}

@media (min-width: 940px) {
  body.open-account-page .global-header-reserve {
    height: 106px !important;
  }
}

.screen {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  overflow-x: hidden !important;
  /* 固定ヘッダー分の余白は .global-header-reserve で確保する */
  padding-top: 0 !important;
}
@media (min-width: 940px) {
  .screen {
    padding-top: 0 !important;
  }
}

/* ============================================================
   4. Section_Stocks (Figma 1507:65194)
   ============================================================ */

.oa-stocks {
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
  /* hero直下は必ず40px（hero下の余白ルール）。次セクションとの境界は80px維持 */
  padding: 40px 20px 80px;
  box-sizing: border-box;
}
.oa-stocks__entry {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  width: 100%;
}
.oa-product-logos {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  width: fit-content;
  max-width: 100%;
  box-sizing: border-box;
}
.oa-product-logo {
  display: block;
  flex: 0 0 auto;
  height: auto;
  max-width: none;
  object-fit: fill;
}
.oa-product-logo--fx { width: 127px; }
.oa-product-logo--cfd { width: 159px; }
.oa-stocks__cta-row {
  display: flex;
  gap: 80px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.oa-stocks__cta-left { display: flex; flex-direction: column; gap: 20px; }
/* .oa-stocks__cta-title のタイポグラフィは共通 .ta-h2 (app.css) を使用 */
.oa-stocks__divider { width: 100px; height: 2px; background: #ffa54f; }
.oa-stocks__cta-sub {
  font-family: var(--ta-font-family-ja, "Noto Sans JP", "Noto Sans", sans-serif);
  font-size: 20px; font-weight: 700; line-height: 1.7;
  letter-spacing: 1px; color: #0a2463; margin: 0;
}
.oa-stocks__cta-right {
  display: flex; flex-direction: column; gap: 19px; align-items: flex-start;
}
.oa-stocks__btn {
  display: inline-flex; gap: 16px; align-items: center;
  padding: 18px 40px;
  background: #ff6800; color: #fff;
  font-family: var(--ta-font-family-ja, "Noto Sans JP", "Noto Sans", sans-serif);
  font-size: 20px; font-weight: 700; line-height: 1.7;
  letter-spacing: 1px; text-decoration: none;
  border-radius: 6px; box-shadow: 2px 2px 5px rgba(255,255,255,0.2);
  white-space: nowrap; transition: opacity 0.2s;
}
.oa-stocks__btn:hover { opacity: 0.88; }
.oa-stocks__btn-text { display: inline-block; }
.oa-stocks__btn-arrow { display: inline-block; font-size: 16px; font-weight: 500; }
.oa-stocks__note {
  font-family: var(--ta-font-family-ja, "Noto Sans JP", "Noto Sans", sans-serif);
  font-size: 12px; font-weight: 500; line-height: 1.4;
  letter-spacing: 1px; color: var(--ta-color-text); margin: 0;
}

@media (max-width: 760px) {
  .screen .section-stocks,
  .oa-stocks {
    gap: 40px;
    padding: 40px 20px 0;
  }
  .oa-stocks__entry {
    width: 100%;
    max-width: 350px;
    gap: 20px;
  }
  .oa-product-logos {
    width: min(100%, 390px);
    max-width: 100%;
    height: auto;
    gap: 5.645%;
    justify-content: center;
  }
  .oa-product-logo {
    height: auto;
    flex: 0 0 auto;
  }
  .oa-product-logo--fx { width: 21.55%; }
  .oa-product-logo--cfd { width: 26.878%; }
  .oa-stocks__cta-row {
    width: 100%;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 20px;
  }
  .oa-stocks__cta-left {
    width: 100%;
    align-items: center;
    gap: 24px;
    text-align: center;
  }
  .oa-stocks__cta-title {
    text-align: center;
    white-space: nowrap;
  }
  .oa-stocks__cta-sub {
    font-size: 18px;
    line-height: 1.7;
    letter-spacing: 1px;
    text-align: center;
    white-space: nowrap;
  }
  .oa-stocks__cta-right {
    width: 100%;
    align-items: center;
    gap: 8px;
  }
  .oa-stocks__btn {
    width: 237px;
    height: 70px;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 18px 40px;
    font-size: 20px;
    line-height: 1.7;
  }
  .oa-stocks__note {
    width: 272px;
    max-width: 100%;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 1px;
    text-align: left;
  }
}

@media (max-width: 360px) {
  .oa-stocks__cta-title,
  .oa-stocks__cta-sub {
    white-space: normal;
  }
}
.oa-stocks__manga-head {
  display: flex; flex-direction: column; align-items: center; gap: 24px;
}
/* .oa-stocks__manga-title のタイポグラフィは共通 .ta-h1 (app.css) を使用 */
.oa-stocks__manga-title {
  text-align: center;
}
.oa-stocks__manga-title span { display: inline; }
.oa-open-manga {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
  width: 100%;
}

@media (max-width: 760px) {
  .oa-open-manga {
    gap: 40px;
    width: 300px;
    max-width: 100%;
    /* 上40px = Figma SP(1111:20473)のセクション上padding。親 .oa-stocks のgap 40と合わせ、
       CTAエリアとの間は計80px（40+40）になる */
    padding: 40px 0;
  }
  .oa-stocks__manga-head {
    gap: 24px;
  }
  .oa-stocks__manga-title {
    white-space: nowrap;
  }
  .oa-stocks__manga-title span {
    display: block;
  }
}

/* マンガスライダー wrapper */
.oa-stocks__manga-wrap {
  width: min(32.625rem, 100%);
  padding-bottom: 64px;
  position: relative;
  overflow: visible;
}
.oa-manga-slider {
  width: 100%;
  position: relative;
}
/* /src/lib/slick/slick.css のうち、このページのマンガスライダーに必要な土台だけをスコープ移植。 */
.open-account-page .oa-manga-slider.slick-slider {
  position: relative;
  display: block;
  box-sizing: border-box;
  user-select: none;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}
.open-account-page .oa-manga-slider .slick-list {
  position: relative;
  display: block;
  overflow: hidden;
  margin: 0;
  padding: 0;
}
.open-account-page .oa-manga-slider .slick-list:focus {
  outline: none;
}
.open-account-page .oa-manga-slider .slick-list.dragging {
  cursor: pointer;
}
.open-account-page .oa-manga-slider .slick-track {
  position: relative;
  top: 0;
  left: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
  transform: translate3d(0, 0, 0);
}
.open-account-page .oa-manga-slider .slick-track::before,
.open-account-page .oa-manga-slider .slick-track::after {
  display: table;
  content: "";
}
.open-account-page .oa-manga-slider .slick-track::after {
  clear: both;
}
.open-account-page .oa-manga-slider .slick-slide {
  display: none;
  float: left;
  min-height: 1px;
}
.open-account-page .oa-manga-slider[dir="rtl"] .slick-slide {
  float: right;
}
.open-account-page .oa-manga-slider .slick-slide img {
  display: block;
}
.open-account-page .oa-manga-slider.slick-initialized .slick-slide {
  display: block;
}
.oa-manga-slider .slick-list {
  border: 1px solid #ebf3fc;
  box-shadow: 0 4px 14px rgba(235,243,252,0.48);
}
.oa-manga-slide {
  width: 100%;
  height: 49.5625rem;
  background-color: lightgray;
  overflow: hidden;
}
.oa-manga-slide--cover {
  background: #fff;
}
.oa-manga-slider .slick-slide {
  background-color: #fff;
}
.oa-manga-slider img {
  width: 100%;
  height: 49.5625rem;
  object-fit: contain;
  object-position: center top;
  display: block;
}

/* slick dots */
.oa-manga-slider .slick-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -44px;
  display: flex !important;
  direction: ltr;
  flex-direction: row-reverse;
  justify-content: center;
  align-items: center;
  gap: 12px;
  z-index: 3;
  margin: 0;
  padding: 0;
  list-style: none;
}
.oa-manga-slider .slick-dots li { width: 10px; height: 10px; margin: 0; }
.oa-manga-slider .slick-dots li button {
  position: relative;
  display: block;
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  background: transparent;
  color: transparent;
  font-size: 0;
  line-height: 0;
  cursor: pointer;
}
.oa-manga-slider .slick-dots li button:before {
  position: absolute;
  display: block;
  width: 10px; height: 10px; border-radius: 50%;
  background: #d8e8fa; opacity: 1; content: '';
  top: 0; left: 0;
}
.oa-manga-slider .slick-dots li.slick-active button:before {
  background: #1e5fad; width: 10px; height: 10px;
  top: 0; left: 0;
}
/* slick 矢印 */
.oa-manga-slider .slick-prev,
.oa-manga-slider .slick-next {
  position: absolute;
  top: 50%;
  width: 40px !important; height: 40px !important;
  padding: 0;
  border: 0;
  background: #1e5fad !important;
  border-radius: 50% !important;
  box-shadow: 0 4px 10px rgba(138,151,165,0.4) !important;
  z-index: 4; display: block !important;
  color: transparent;
  font-size: 0;
  line-height: 0;
  cursor: pointer;
  transform: translateY(-50%);
}
.oa-manga-slider .slick-prev { right: -50px; }
.oa-manga-slider .slick-next { left: -50px; }
.oa-manga-slider .slick-arrow.slick-disabled {
  display: none !important;
}
.oa-manga-slider .slick-prev:before,
.oa-manga-slider .slick-next:before {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  font-family: sans-serif !important;
  font-size: 18px !important;
  content: '→' !important;
  color: #fff !important;
  opacity: 1 !important;
  line-height: 1 !important;
  transform: translate(-50%, -50%);
}
.oa-manga-slider .slick-next:before { content: '←' !important; }

@media (max-width: 760px) {
  .oa-stocks__manga-wrap {
    width: 300px;
    max-width: 100%;
    padding-bottom: 30px;
  }
  .oa-manga-slider .slick-list {
    border: 1px solid #ebf3fc;
    box-shadow: 0 4px 14px rgba(235,243,252,0.48);
  }
  .oa-manga-slide,
  .oa-manga-slider img {
    width: 300px;
    max-width: 100%;
    height: 456px;
    aspect-ratio: auto;
    object-fit: cover;
    object-position: top center;
  }
  .oa-manga-slider .slick-dots {
    bottom: -30px;
    gap: 16px;
  }
  .oa-manga-slider .slick-prev,
  .oa-manga-slider .slick-next {
    display: block !important;
    width: 36px !important;
    height: 36px !important;
    box-shadow: 0 3px 8px rgba(138,151,165,0.35) !important;
  }
  .oa-manga-slider .slick-prev { right: -18px; }
  .oa-manga-slider .slick-next { left: -18px; }
  .oa-manga-slider .slick-prev:before,
  .oa-manga-slider .slick-next:before {
    font-size: 16px !important;
  }
}
.screen .frame-6 {
  width: min(1000px, calc(100% - 40px));
  margin: 0 auto;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 40px;
}
.screen .frame-6 > .frame-7,
.screen .frame-6 > .frame-9 {
  flex: 1 1 0;
  min-width: 0;
  width: auto;
  align-self: stretch;
}
.screen .frame-6 .frame-8,
.screen .frame-6 .frame-10,
.screen .frame-6 .frame-11 {
  width: 100%;
  min-width: 0;
  gap: 8px;
}
.screen .frame-6 .auto-title,
.screen .frame-6 .auto-title-2 {
  min-width: 0;
  white-space: normal;
  text-align: left;
}
.screen .stockcard a,
.screen .bnr-wrapper a {
  display: block;
  width: 100%;
}
.screen .bnr,
.screen .bnr-2 {
  width: 100%;
  height: auto;
}
.screen .frame-4 {
  display: flex;
  height: 32.53894rem;
  padding: 5rem 0;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 5rem;
  align-self: stretch;
  box-sizing: border-box;
  background: var(--primary-pale, #ebf3fc);
}

@media (max-width: 760px) {
  .screen .frame-4 {
    height: auto;
    min-height: 0;
    padding: 40px 20px;
    gap: 40px;
  }
  .screen .frame-4 > .frame-3 {
    gap: 24px;
  }
  .screen .frame-4 .text-wrapper-2 {
    white-space: nowrap;
  }
  .screen .frame-4 .text-wrapper-2 span {
    display: block;
  }
  .screen .frame-4 .rectangle {
    width: 100px;
    height: 2px;
    background: #ffa54f;
  }
}

@media (max-width: 600px) {
  .screen .frame-4 .frame-5,
  .screen .frame-4 .frame-6 {
    width: 350px;
  }
  .screen .frame-4 .frame-5 {
    --oa-manga-card-scale: min(1, calc((100vw - 40px) / 350px));
    width: min(350px, calc(100vw - 40px));
    height: calc(259.727px * var(--oa-manga-card-scale));
    align-items: flex-start;
    gap: 20px;
    overflow: visible;
  }
  .screen .frame-4 .frame-6 {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 20px 10px;
    flex-wrap: wrap;
    margin: 0 auto;
    max-width: none;
    transform: scale(var(--oa-manga-card-scale));
    transform-origin: top left;
  }
  .screen .frame-4 .frame-7,
  .screen .frame-4 .frame-9 {
    width: 170px;
    flex: 0 0 170px;
    gap: 10.818px;
    border-radius: 5.409px;
  }
  .screen .frame-4 .frame-8,
  .screen .frame-4 .frame-10 {
    width: 170px;
    align-items: flex-start;
  }
  .screen .frame-4 .frame-11 {
    width: 196px;
    gap: 0;
    align-items: flex-start;
    justify-content: space-between;
  }
  .screen .frame-4 .auto-title,
  .screen .frame-4 .auto-title-2 {
    font-size: 16px;
    line-height: 1.7;
    letter-spacing: 1px;
    white-space: nowrap;
  }
  .screen .frame-4 .img-wrapper {
    width: 27.045px;
    height: 27.045px;
    border-radius: 50%;
  }
  .screen .frame-4 .arrow-2 {
    width: 11.86px;
    height: 11.62px;
  }
  .screen .frame-4 .stockcard,
  .screen .frame-4 .bnr-wrapper {
    width: 170px;
    height: 82px;
    border: 0.676px solid #1e5fad;
    border-radius: 8.114px;
    box-shadow: 0 2.705px 9.466px rgba(235, 243, 252, 0.48);
  }
  .screen .frame-4 .bnr,
  .screen .frame-4 .bnr-2 {
    width: 170px;
    height: 82px;
    object-fit: cover;
    object-position: center;
  }
}

/* ============================================================
   6. フロー section
   ============================================================ */

.screen .frame-12 {
  display: flex;
  flex-direction: column;
  width: min(1000px, calc(100% - 40px));
  margin: 0 auto;
  align-items: stretch;
}
.screen .steps-row {
  width: 100%;
}
.screen .arrow-3 {
  transform: rotate(90deg);
  color: var(--Mane-color, #1e5fad);
  font-family: Inter, sans-serif;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

/* ============================================================
   8. FAQ セクション (Figma 1507:65276)
      style.css の width: 1440px を override
   ============================================================ */

.screen .faq-section {
  width: 100% !important;
  max-width: 100% !important;
  padding: 80px 20px !important;
  box-sizing: border-box !important;
}

.faq-section.oa-faq {
  /* Figma faqSection(1010:30419)のセクション背景は bg_02 の淡い青 */
  background: var(--bg-02, #f7f9fc);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  padding: 80px 20px;
  box-sizing: border-box;
}
.oa-faq__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
/* .oa-faq__title のタイポグラフィは共通 .ta-h1 (app.css) を使用 */
.oa-faq__title {
  text-align: center;
}
.oa-faq__divider { width: 100px; height: 2px; background: #ffa54f; }

.oa-faq .ta-faq {
  width: min(1000px, 100%);
  margin: 0 auto;
}

.oa-faq .ta-faq__q-text,
.oa-faq .ta-faq__a-body {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* FAQ カードを /contact と完全に同一の枠（白背景・枠線・角丸・薄い影）に揃える */
.oa-faq .ta-faq__item {
  border: 1px solid var(--ta-color-card-border, #f2f5f9);
  border-radius: var(--radius, 8px);
  box-shadow: var(--card, 0 4px 14px 0 rgba(235, 243, 252, 0.48));
}

/* FAQ 法人書類の番号付きリスト（reset.css の list-style:none を打ち消す） */
.oa-faq .ta-faq__ol {
  list-style: decimal;
  margin: 0.4em 0 0;
  padding-left: 1.6em;
}
.oa-faq .ta-faq__ol > li {
  list-style: decimal;
  margin-top: 0.4em;
}
.oa-faq .ta-faq__ol > li:first-child {
  margin-top: 0;
}
/* 補足（…）ブロックは番号を付けずインデントのみ */
.oa-faq .ta-faq__ol--alpha {
  list-style: none;
  margin: 0.2em 0 0;
  padding-left: 0;
}
.oa-faq .ta-faq__ol--alpha > p {
  margin: 0;
  text-indent: -1em;
  padding-left: 1em;
}
/* flow-section 内 frame-13 */
.screen .frame-13 {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

@media (max-width: 760px) {
  .screen .flow-section {
    padding: 40px 20px;
    gap: 40px;
  }
  .screen .flow-section > .frame-3 {
    width: 100%;
    gap: 24px;
    overflow: hidden;
  }
  .screen .frame-12 {
    width: 350px;
    max-width: 100%;
    gap: 40px;
    align-items: flex-end;
  }
  .screen .steps-row {
    width: 100%;
    gap: 20px;
  }
  .screen .step {
    /* 高さはpadding 20px + 中身(アイコン58px or 2行タイトル62px)で98px/102pxになる */
    padding: 20px;
    gap: 16px;
    align-items: center;
    border-radius: 16px;
  }
  .screen .vector-wrapper,
  .screen .outgoing-mail {
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
  }
  .screen .s-title {
    font-size: 18px;
    line-height: 1.7;
    letter-spacing: 1px;
    text-align: left;
    white-space: nowrap;
  }
  .screen .s-title span {
    display: block;
  }
  .screen .arrow-3 {
    width: 29px;
    height: 23px;
    font-size: 24px;
    line-height: 1;
  }
  .screen .frame-13 {
    width: 100%;
    flex-direction: column;
    align-items: flex-end;
    flex-wrap: nowrap;
    gap: 20px;
  }
  .screen .faq-section {
    padding: 40px 20px !important;
  }
  .faq-section.oa-faq {
    align-items: flex-end;
    justify-content: center;
  }
  .oa-faq .ta-faq {
    width: 100%;
  }
  .oa-faq__head {
    align-self: center;
    gap: 24px;
  }
}

/* =============================================================
 * END add.css
 * ============================================================= */