/* ─────────────────────────────────────────────────────────────
   大分類ハブページ (2026-08-03)
   デザイン案: Rectangle 241/242/243/244 + Group 277/278/279
   大 925×312 r50 / 小 447×236 r40 / gap 31px / 背景 #F8F9FB
   hover: 画像を拡大 + わずかに明るく、矢印ボタン #1F3DFF
   ───────────────────────────────────────────────────────────── */
.page-hub{background:#F8F9FB}
/* ヒーローはサイト共通規格 (height:400px / margin-top:109px) */
.hub-hero{position:relative;width:100%;height:300px;overflow:hidden;margin-top:109px}
.hub-hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat}
.hub-hero-overlay{position:absolute;inset:0;background:rgba(255,255,255,.20);backdrop-filter:blur(3.5px);-webkit-backdrop-filter:blur(3.5px)}
.hub-hero-content{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;text-align:center;padding:0 20px;z-index:2}
.hub-hero-title{margin:0;font-size:44px;font-weight:800;line-height:54px;letter-spacing:1px;text-transform:uppercase;color:#1a1a1a}
.hub-hero-sub{margin:0;font-size:22px;font-weight:400;line-height:1.3;color:#1a1a1a}
.hub-body{padding:90px 0}
.hub-wrap{width:925px;max-width:calc(100% - 40px);margin:0 auto}
.hub-row{display:flex;gap:31px;margin-top:31px}

.hub-card{
  position:relative;display:block;overflow:hidden;text-decoration:none;
  isolation:isolate;background:#1A1A1A;
}
.hub-card-lg{height:312px;border-radius:50px}
.hub-card-sm{flex:1 1 0;height:236px;border-radius:40px}

/* メディア (画像/動画) — 拡大はこのレイヤーのみ */
.hub-media{position:absolute;inset:0;z-index:0;overflow:hidden}
.hub-img,.hub-video,.hub-vid{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  background-size:cover;background-position:center;
  transition:transform .55s cubic-bezier(.22,.61,.36,1), filter .35s ease;
}
/* デザイン案どおり常時10%暗く */
.hub-card-lg .hub-img,.hub-card-lg .hub-video{filter:brightness(.90)}
.hub-card-sm .hub-img{filter:brightness(.90)}

/* 下部のグラデーション (40%から 0 → 0.85) */
.hub-shade{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.85) 100%);
}

.hub-text{position:absolute;left:44px;bottom:38px;z-index:2;display:block;max-width:757px}
.hub-title{display:block;color:#fff;font-weight:700;letter-spacing:.01em}
.hub-desc{display:block;color:#fff;font-weight:500;margin-top:6px}
.hub-card-lg .hub-title{font-size:21px;line-height:26px}
.hub-card-lg .hub-desc{font-size:18px;line-height:22px}
.hub-card-sm .hub-text{left:32px;bottom:30px;max-width:323px}
.hub-card-sm .hub-title{font-size:17px;line-height:20px}
.hub-card-sm .hub-desc{font-size:11px;line-height:14px;margin-top:4px}

/* 矢印ボタン */
.hub-arrow{
  position:absolute;z-index:2;border-radius:50%;
  background:rgba(255,255,255,.5);
  display:flex;align-items:center;justify-content:center;
  transition:background-color .3s ease;
}
.hub-arrow i{
  display:block;border:3px solid #000;border-left:0;border-bottom:0;
  transform:rotate(45deg);transition:border-color .3s ease;
  position:relative;left:-2px;
}
.hub-card-lg .hub-arrow{width:56px;height:56px;right:44px;bottom:38px}
.hub-card-lg .hub-arrow i{width:13.9px;height:13.9px}
.hub-card-sm .hub-arrow{width:42.39px;height:42.39px;right:32px;bottom:28px}
.hub-card-sm .hub-arrow i{width:10.52px;height:10.52px}

/* ── hover ── */
.hub-card:hover .hub-img,
.hub-card:hover .hub-video{transform:scale(1.07);filter:brightness(1.04)}
.hub-card:hover .hub-arrow{background:#1F3DFF}
.hub-card:hover .hub-arrow i{border-color:#fff}
.hub-card:focus-visible{outline:3px solid #1F3DFF;outline-offset:4px}

@media (prefers-reduced-motion:reduce){
  .hub-img,.hub-video{transition:none}
  .hub-card:hover .hub-img,.hub-card:hover .hub-video{transform:none}
}

/* ── タブレット・モバイル ── */

/* 復元: 旧 max-width:980px。レスポンシブ化に伴い body.is-mobile から戻した */
@media (max-width:1023.98px){
  .hub-hero{height:220px;margin-top:0}
  .hub-hero-title{font-size:28px;line-height:34px}
  .hub-hero-sub{font-size:15px}
  .hub-body{padding:40px 0 60px}
  .hub-wrap{width:100%;max-width:calc(100% - 32px)}
  .hub-card-lg{height:250px;border-radius:32px}
  .hub-card-sm{height:200px;border-radius:28px}
  .hub-row{gap:18px;margin-top:18px}
  .hub-text{left:28px;bottom:26px;max-width:calc(100% - 28px - 46px - 26px - 16px)}
  .hub-card-lg .hub-title{font-size:18px;line-height:22px}
  .hub-card-lg .hub-desc{font-size:12px;line-height:16px}
  .hub-card-lg .hub-arrow{width:46px;height:46px;right:26px;bottom:26px}
  .hub-card-lg .hub-arrow i{width:11px;height:11px}
}


/* 復元: 旧 max-width:640px。レスポンシブ化に伴い body.is-mobile から戻した */
@media (max-width:1023.98px){
  .hub-row{flex-direction:column;gap:16px;margin-top:16px}
  .hub-card-lg{height:210px;border-radius:24px}
  .hub-card-sm{height:170px;border-radius:24px}
  .hub-card-sm .hub-text{left:22px;bottom:22px;max-width:calc(100% - 22px - 36px - 20px - 12px)}
  .hub-card-sm .hub-title{font-size:17px;line-height:21px}
  .hub-card-sm .hub-desc{font-size:11px;line-height:15px}
  .hub-card-sm .hub-arrow{width:36px;height:36px;right:20px;bottom:20px}
  .hub-card-sm .hub-arrow i{width:9px;height:9px}
  .hub-card-lg .hub-text{left:22px;bottom:22px;max-width:calc(100% - 22px - 46px - 26px - 12px)}
  .hub-card-lg .hub-title{font-size:19px;line-height:23px}
  .hub-card-lg .hub-desc{font-size:12px;line-height:16px}
}


/* ─────────────────────────────────────────────────────────────
   バイナリーオプション比較ハブ (2026-08-03) — デザイン案 Group 276
   2列スタガード: 左 大(586)+小(205)+小(205) / 右 小+小+大
   カード幅442・列間隔31・大 r50・小 r40
   ───────────────────────────────────────────────────────────── */
.hub-wrap-2col{width:915px;display:flex;gap:31px;align-items:flex-start}
.hub-col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:31px}
.hub-binary .hub-card-lg{height:586px;border-radius:50px}
.hub-binary .hub-card-sm{height:205px;border-radius:40px;flex:0 0 auto}
/* カードが狭くなった分、テキスト幅も矢印の手前で止める */
.hub-binary .hub-card-lg .hub-text{max-width:calc(100% - 44px - 56px - 44px - 20px)}
.hub-binary .hub-card-sm .hub-text{max-width:calc(100% - 32px - 40px - 32px - 16px)}
/* 小カードの矢印はデザイン案どおり40px */
.hub-binary .hub-card-sm .hub-arrow{width:40px;height:40px;right:32px;bottom:28px}
.hub-binary .hub-card-sm .hub-arrow i{width:9.93px;height:9.93px}


/* 復元: 旧 max-width:980px。レスポンシブ化に伴い body.is-mobile から戻した */
@media (max-width:1023.98px){
  .hub-wrap-2col{width:100%;gap:18px}
  .hub-col{gap:18px}
  .hub-binary .hub-card-lg{height:360px;border-radius:32px}
  .hub-binary .hub-card-sm{height:170px;border-radius:28px}
}


/* 復元: 旧 max-width:640px。レスポンシブ化に伴い body.is-mobile から戻した */
@media (max-width:1023.98px){
  .hub-wrap-2col{flex-direction:column;gap:16px}
  .hub-col{gap:16px}
  .hub-binary .hub-card-lg{height:260px;border-radius:24px}
  .hub-binary .hub-card-sm{height:150px;border-radius:24px}
}


/* バイナリーハブ: カード幅が442pxと狭く大カードの説明が4行になる → 本文のみ縮小 */
.hub-binary .hub-card-lg .hub-title{font-size:21px;line-height:27px}
.hub-binary .hub-card-lg .hub-desc{font-size:13px;line-height:20px;margin-top:8px}

/* 復元: 旧 max-width:980px。レスポンシブ化に伴い body.is-mobile から戻した */
@media (max-width:1023.98px){
  .hub-binary .hub-card-lg .hub-title{font-size:17px;line-height:22px}
  .hub-binary .hub-card-lg .hub-desc{font-size:13px;line-height:20px}
}


/* ─────────────────────────────────────────────────────────────
   FX・CFD 比較ハブ (2026-08-03) — デザイン案 Group 274
   左右対称の2列: 1行目 大(586) 2枚 / 2・3行目 小(249) 4枚
   ───────────────────────────────────────────────────────────── */
.hub-fxcfd .hub-card-lg{height:586px;border-radius:50px}
.hub-fxcfd .hub-card-sm{height:249px;border-radius:40px;flex:0 0 auto}
.hub-fxcfd .hub-card-lg .hub-text{max-width:calc(100% - 44px - 56px - 44px - 20px)}
.hub-fxcfd .hub-card-sm .hub-text{max-width:calc(100% - 32px - 40px - 32px - 16px)}
.hub-fxcfd .hub-card-sm .hub-arrow{width:40px;height:40px;right:32px;bottom:28px}
.hub-fxcfd .hub-card-sm .hub-arrow i{width:9.93px;height:9.93px}
/* カード幅442px基準で大カードの本文を縮小 (バイナリーハブと同基準) */
.hub-fxcfd .hub-card-lg .hub-title{font-size:21px;line-height:27px}
.hub-fxcfd .hub-card-lg .hub-desc{font-size:13px;line-height:20px;margin-top:8px}


/* 復元: 旧 max-width:980px。レスポンシブ化に伴い body.is-mobile から戻した */
@media (max-width:1023.98px){
  .hub-fxcfd .hub-card-lg{height:360px;border-radius:32px}
  .hub-fxcfd .hub-card-sm{height:200px;border-radius:28px}
  .hub-fxcfd .hub-card-lg .hub-title{font-size:17px;line-height:22px}
  .hub-fxcfd .hub-card-lg .hub-desc{font-size:13px;line-height:20px}
}


/* 復元: 旧 max-width:640px。レスポンシブ化に伴い body.is-mobile から戻した */
@media (max-width:1023.98px){
  .hub-fxcfd .hub-card-lg{height:260px;border-radius:24px}
  .hub-fxcfd .hub-card-sm{height:170px;border-radius:24px}
}


/* 利用者の声ハブ: リンク未定のカード — クリック無効、hover効果なし */
.hub-card.is-disabled{cursor:default}
.hub-card.is-disabled:hover .hub-img{transform:none;filter:brightness(.90)}
.hub-card.is-disabled:hover .hub-arrow{background:rgba(255,255,255,.5)}
.hub-card.is-disabled:hover .hub-arrow i{border-color:#000}

/* ─────────────────────────────────────────────────────────────
   お客様センターハブ (2026-08-03) — デザイン案 Group 287
   左: 小 375×236 r43 × 2 (縦間隔26) / 右: 大 511×498 r57
   236*2 + 26 = 498 → 左右の高さを揃える
   ───────────────────────────────────────────────────────────── */
.hub-wrap-cs{width:921px;display:flex;gap:35px;align-items:flex-start}
.hub-cs-side{flex:0 0 375px;display:flex;flex-direction:column;gap:26px}
.hub-cs .hub-card-sm{height:236px;border-radius:43px;flex:0 0 auto}
.hub-cs .hub-card-lg{flex:0 0 511px;height:498px;border-radius:57px}
.hub-cs .hub-card-sm .hub-text{max-width:calc(100% - 32px - 42px - 32px - 16px)}
.hub-cs .hub-card-lg .hub-text{max-width:calc(100% - 44px - 56px - 44px - 20px)}
/* 大カードが511pxと狭いため本文のみ縮小 (他ハブと同基準) */
.hub-cs .hub-card-lg .hub-title{font-size:21px;line-height:27px}
.hub-cs .hub-card-lg .hub-desc{font-size:13px;line-height:20px;margin-top:8px}


/* 復元: 旧 max-width:980px。レスポンシブ化に伴い body.is-mobile から戻した */
@media (max-width:1023.98px){
  .hub-wrap-cs{width:100%;gap:18px}
  .hub-cs-side{flex:1 1 0;gap:18px}
  .hub-cs .hub-card-sm{height:190px;border-radius:28px}
  .hub-cs .hub-card-lg{flex:1 1 0;height:398px;border-radius:32px}
  .hub-cs .hub-card-lg .hub-title{font-size:17px;line-height:22px}
  .hub-cs .hub-card-lg .hub-desc{font-size:13px;line-height:20px}
}


/* 復元: 旧 max-width:640px。レスポンシブ化に伴い body.is-mobile から戻した */
@media (max-width:1023.98px){
  .hub-wrap-cs{flex-direction:column;gap:16px}
  .hub-cs-side{gap:16px}
  .hub-cs .hub-card-sm{height:160px;border-radius:24px}
  .hub-cs .hub-card-lg{height:240px;border-radius:24px}
}


/* ─────────────────────────────────────────────────────────────
   タイアンブリッジレポートハブ (2026-08-03) — デザイン案 Group 288
   上部 大 442×586 r50 × 2 (間隔31) / 下部 ワイド 915×249 r40
   442*2 + 31 = 915 → 上下の幅を一致
   ───────────────────────────────────────────────────────────── */
.hub-wrap-report{width:915px}
.hub-row-lg{display:flex;gap:31px;margin-top:0}
.hub-report .hub-card-lg{flex:1 1 0;height:586px;border-radius:50px}
.hub-card-wide{position:relative;display:block;overflow:hidden;text-decoration:none;
  isolation:isolate;background:#1A1A1A;height:249px;border-radius:40px;margin-top:31px}
.hub-report .hub-card-lg .hub-text{max-width:calc(100% - 44px - 56px - 44px - 20px)}
.hub-card-wide .hub-text{position:absolute;left:44px;bottom:38px;z-index:2;display:block;
  max-width:calc(100% - 44px - 40px - 44px - 24px)}
.hub-card-wide .hub-title{display:block;color:#fff;font-weight:700;font-size:17px;line-height:20px}
.hub-card-wide .hub-desc{display:block;color:#fff;font-weight:500;font-size:11px;line-height:14px;margin-top:4px}
.hub-card-wide .hub-arrow{width:40px;height:40px;right:44px;bottom:38px}
.hub-card-wide .hub-arrow i{width:9.93px;height:9.93px}
/* カード幅442px基準で大カードの本文を縮小 (他ハブと同じ) */
.hub-report .hub-card-lg .hub-title{font-size:21px;line-height:27px}
.hub-report .hub-card-lg .hub-desc{font-size:13px;line-height:20px;margin-top:8px}


/* 復元: 旧 max-width:980px。レスポンシブ化に伴い body.is-mobile から戻した */
@media (max-width:1023.98px){
  .hub-wrap-report{width:100%}
  .hub-row-lg{gap:18px}
  .hub-report .hub-card-lg{height:360px;border-radius:32px}
  .hub-card-wide{height:200px;border-radius:28px;margin-top:18px}
  .hub-report .hub-card-lg .hub-title{font-size:17px;line-height:22px}
  .hub-report .hub-card-lg .hub-desc{font-size:13px;line-height:20px}
  .hub-card-wide .hub-text{left:28px;bottom:26px}
  .hub-card-wide .hub-arrow{right:28px;bottom:26px}
}


/* 復元: 旧 max-width:640px。レスポンシブ化に伴い body.is-mobile から戻した */
@media (max-width:1023.98px){
  .hub-row-lg{flex-direction:column;gap:16px}
  .hub-report .hub-card-lg{height:260px;border-radius:24px}
  .hub-card-wide{height:170px;border-radius:24px;margin-top:16px}
  .hub-card-wide .hub-text{left:22px;bottom:22px}
  .hub-card-wide .hub-arrow{width:36px;height:36px;right:20px;bottom:20px}
  .hub-card-wide .hub-arrow i{width:9px;height:9px}
}


/* カードごとの動画表示位置 — 縦長カードは cover で左右が切れるため基準点を指定 */
/* 縦長の大カード(442x586) — 横長動画の左右が切れるため右基準 */
.hub-binary .hub-card-lg .hub-vid,
.hub-fxcfd .hub-card-lg .hub-vid,
.hub-report .hub-card-lg .hub-vid{object-position:right center}
/* 利用者の声: 横に広いカード — 下端基準 */
.hub-reviews .hub-card-lg .hub-vid{object-position:center 100%}
/* お客様センター: 511x423 — 16:9 動画の左右が切れる。人物が右寄りなので 70% 基準 */
.hub-cs .hub-card-lg .hub-vid{object-position:70% center}

/* ══════════════════════════════════════════════════════════
   Taian Bridge ハブ — 2カラムレイアウト (Figma Group 318)
   左: 511x423 の大1枚 / 右: 幅375の小3枚を縦に配置
   127 x 3 + 21(gap) x 2 = 423px  → 大カードと同じ高さ
   ══════════════════════════════════════════════════════════ */
.hub-taian .hub-wrap{width:921px;display:flex;gap:35px;align-items:flex-start}
.hub-taian .hub-card-lg{flex:0 0 511px;height:423px;border-radius:57px}
.hub-taian .hub-row{flex:0 0 375px;flex-direction:column;gap:21px;margin-top:0}
.hub-taian .hub-row .hub-card-sm{flex:0 0 127px;height:127px;border-radius:43px}

/* テキスト (Figma仕様) */
.hub-taian .hub-card-lg .hub-title{font-size:21px;line-height:26px}
.hub-taian .hub-card-lg .hub-desc{font-size:20px;line-height:25px}
.hub-taian .hub-card-lg .hub-text{max-width:calc(100% - 44px - 56px - 44px - 20px)}
.hub-taian .hub-row .hub-card-sm .hub-title{font-size:17px;line-height:20px}
.hub-taian .hub-row .hub-card-sm .hub-desc{font-size:14px;line-height:16px}
.hub-taian .hub-row .hub-card-sm .hub-text{left:32px;bottom:26px;max-width:calc(100% - 32px - 42px - 32px - 16px)}
.hub-taian .hub-row .hub-card-sm .hub-arrow{right:32px;bottom:24px}

/* 511x579 の縦型カード — 横長動画の左右が切れるため中央基準 */
.hub-taian .hub-card-lg .hub-vid,
.hub-taian .hub-card-lg .hub-video{object-position:center center}


/* 復元: 旧 max-width:980px。レスポンシブ化に伴い body.is-mobile から戻した */
@media (max-width:1023.98px){
  .hub-taian .hub-wrap{width:100%;gap:18px}
  .hub-taian .hub-card-lg{flex:1 1 0;height:396px;border-radius:32px}
  .hub-taian .hub-row{flex:1 1 0;gap:18px}
  .hub-taian .hub-row .hub-card-sm{flex:0 0 120px;height:120px;border-radius:28px}
  .hub-taian .hub-card-lg .hub-desc{font-size:15px;line-height:22px}
  .hub-taian .hub-row .hub-card-sm .hub-desc{font-size:13px;line-height:18px}
  .hub-taian .hub-row .hub-card-sm .hub-text{left:22px;bottom:20px}
  .hub-taian .hub-row .hub-card-sm .hub-arrow{right:22px;bottom:18px}
}


/* 復元: 旧 max-width:640px。レスポンシブ化に伴い body.is-mobile から戻した */
@media (max-width:1023.98px){
  .hub-taian .hub-wrap{flex-direction:column;gap:16px}
  .hub-taian .hub-card-lg{flex:0 0 auto;height:240px;border-radius:24px}
  .hub-taian .hub-row{flex:0 0 auto;width:100%;gap:16px}
  .hub-taian .hub-row .hub-card-sm{flex:0 0 150px;height:150px;border-radius:24px}
}


/* ── カードをドラッグした際の灰色の残像(ドラッグゴースト・選択ハイライト)を除去 ── */
.hub-card{
  -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;
  -webkit-user-drag:none;
  -webkit-tap-highlight-color:transparent;
}
.hub-card .hub-media{border-radius:inherit}
.hub-card .hub-img,
.hub-card .hub-video,
.hub-card .hub-vid,
.hub-card img,
.hub-card video{
  -webkit-user-drag:none; user-select:none;
  pointer-events:none;
}
.hub-card .hub-text,
.hub-card .hub-title,
.hub-card .hub-desc{-webkit-user-select:none; user-select:none}

/* ══════════════════════════════════════════════════════════
   バイナリーオプションハブ — デザイン案 Group 319
   2列 × (左: 大・小・小 / 右: 小・小・大)、列幅442px
   313 + 23 + 110 + 23 + 110 = 579px
   フォントはデザイン案から各 -3px
   ══════════════════════════════════════════════════════════ */
.hub-binary .hub-col{gap:23px}
.hub-binary .hub-card-lg{height:313px;border-radius:35px;flex:0 0 auto}
.hub-binary .hub-card-sm{height:110px;border-radius:26px;flex:0 0 auto}

/* テキスト (デザイン案 25/20/20/16 → 各 -3px) */
.hub-binary .hub-card-lg .hub-title{font-size:22px;line-height:27px}
.hub-binary .hub-card-lg .hub-desc{font-size:17px;line-height:21px;margin-top:6px}
.hub-binary .hub-card-lg .hub-text{left:44px;bottom:36px;max-width:calc(100% - 44px - 42.39px - 44px - 20px)}
.hub-binary .hub-card-sm .hub-title{font-size:17px;line-height:21px}
.hub-binary .hub-card-sm .hub-desc{
  font-size:13px;line-height:16px;margin-top:4px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.hub-binary .hub-card-sm .hub-text{left:26px;bottom:20px;max-width:calc(100% - 26px - 32.64px - 26px - 14px)}

/* 矢印 (デザイン案仕様) */
.hub-binary .hub-card-lg .hub-arrow{width:42.39px;height:42.39px;right:44px;bottom:34px}
.hub-binary .hub-card-lg .hub-arrow i{width:10.51px;height:10.51px}
.hub-binary .hub-card-sm .hub-arrow{width:32.64px;height:32.64px;right:26px;bottom:18px}
.hub-binary .hub-card-sm .hub-arrow i{width:8.09px;height:8.09px;border-top-width:2px;border-right-width:2px;left:-1px}

/* 小カードは高さが低いためグラデーションを早めに開始 (デザイン案 17.31%) */
.hub-binary .hub-card-sm .hub-shade{background:linear-gradient(180deg, rgba(0,0,0,0) 17%, rgba(0,0,0,.85) 100%)}


/* 復元: 旧 max-width:980px。レスポンシブ化に伴い body.is-mobile から戻した */
@media (max-width:1023.98px){
  .hub-binary .hub-col{gap:16px}
  .hub-binary .hub-card-lg{height:240px;border-radius:28px}
  .hub-binary .hub-card-sm{height:96px;border-radius:22px}
  .hub-binary .hub-card-lg .hub-title{font-size:18px;line-height:24px}
  .hub-binary .hub-card-lg .hub-desc{font-size:14px;line-height:20px}
  .hub-binary .hub-card-lg .hub-text{left:26px;bottom:24px;max-width:calc(100% - 26px - 40px - 26px - 16px)}
  .hub-binary .hub-card-lg .hub-arrow{width:40px;height:40px;right:26px;bottom:22px}
  .hub-binary .hub-card-sm .hub-title{font-size:15px;line-height:19px}
  .hub-binary .hub-card-sm .hub-desc{font-size:12px;line-height:16px}
  .hub-binary .hub-card-sm .hub-text{left:20px;bottom:16px;max-width:calc(100% - 20px - 30px - 20px - 12px)}
  .hub-binary .hub-card-sm .hub-arrow{width:30px;height:30px;right:20px;bottom:15px}
}


/* 復元: 旧 max-width:640px。レスポンシブ化に伴い body.is-mobile から戻した */
@media (max-width:1023.98px){
  .hub-binary .hub-col{gap:14px}
  .hub-binary .hub-card-lg{height:200px;border-radius:24px}
  .hub-binary .hub-card-sm{height:100px;border-radius:20px}
}


/* ══════════════════════════════════════════════════════════
   FX・CFD ハブ — デザイン案 Rectangle 220
   2列 × (大1 + 小2)、列幅442px  ※ カードの順序変更なし
   313 + 23 + 110 + 23 + 110 = 579px
   フォントはデザイン案から各 -3px (バイナリーハブと同じ)
   ══════════════════════════════════════════════════════════ */
.hub-fxcfd .hub-col{gap:23px}
.hub-fxcfd .hub-card-lg{height:313px;border-radius:35px;flex:0 0 auto}
.hub-fxcfd .hub-card-sm{height:110px;border-radius:26px;flex:0 0 auto}

/* テキスト (デザイン案 25/20/20/16 → 各 -3px) */
.hub-fxcfd .hub-card-lg .hub-title{font-size:22px;line-height:27px}
.hub-fxcfd .hub-card-lg .hub-desc{font-size:17px;line-height:21px;margin-top:6px}
.hub-fxcfd .hub-card-lg .hub-text{left:44px;bottom:36px;max-width:calc(100% - 44px - 42.39px - 44px - 20px)}
.hub-fxcfd .hub-card-sm .hub-title{font-size:17px;line-height:21px}
.hub-fxcfd .hub-card-sm .hub-desc{
  font-size:13px;line-height:16px;margin-top:4px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.hub-fxcfd .hub-card-sm .hub-text{left:26px;bottom:20px;max-width:calc(100% - 26px - 32.64px - 26px - 14px)}

/* 矢印 (デザイン案仕様) */
.hub-fxcfd .hub-card-lg .hub-arrow{width:42.39px;height:42.39px;right:44px;bottom:34px}
.hub-fxcfd .hub-card-lg .hub-arrow i{width:10.51px;height:10.51px}
.hub-fxcfd .hub-card-sm .hub-arrow{width:32.64px;height:32.64px;right:26px;bottom:18px}
.hub-fxcfd .hub-card-sm .hub-arrow i{width:8.09px;height:8.09px;border-top-width:2px;border-right-width:2px;left:-1px}

/* 小カードは高さが低いためグラデーションを早めに開始 (デザイン案 17.31%) */
.hub-fxcfd .hub-card-sm .hub-shade{background:linear-gradient(180deg, rgba(0,0,0,0) 17%, rgba(0,0,0,.85) 100%)}


/* 復元: 旧 max-width:980px。レスポンシブ化に伴い body.is-mobile から戻した */
@media (max-width:1023.98px){
  .hub-fxcfd .hub-col{gap:16px}
  .hub-fxcfd .hub-card-lg{height:240px;border-radius:28px}
  .hub-fxcfd .hub-card-sm{height:96px;border-radius:22px}
  .hub-fxcfd .hub-card-lg .hub-title{font-size:18px;line-height:24px}
  .hub-fxcfd .hub-card-lg .hub-desc{font-size:14px;line-height:20px}
  .hub-fxcfd .hub-card-lg .hub-text{left:26px;bottom:24px;max-width:calc(100% - 26px - 40px - 26px - 16px)}
  .hub-fxcfd .hub-card-lg .hub-arrow{width:40px;height:40px;right:26px;bottom:22px}
  .hub-fxcfd .hub-card-sm .hub-title{font-size:15px;line-height:19px}
  .hub-fxcfd .hub-card-sm .hub-desc{font-size:12px;line-height:16px}
  .hub-fxcfd .hub-card-sm .hub-text{left:20px;bottom:16px;max-width:calc(100% - 20px - 30px - 20px - 12px)}
  .hub-fxcfd .hub-card-sm .hub-arrow{width:30px;height:30px;right:20px;bottom:15px}
}


/* 復元: 旧 max-width:640px。レスポンシブ化に伴い body.is-mobile から戻した */
@media (max-width:1023.98px){
  .hub-fxcfd .hub-col{gap:14px}
  .hub-fxcfd .hub-card-lg{height:200px;border-radius:24px}
  .hub-fxcfd .hub-card-sm{height:100px;border-radius:20px}
}


/* ══════════════════════════════════════════════════════════
   利用者の声ハブ — デザイン案 Group 285   ※ カードの順序変更なし
   上部 大 925 × 312 (r50) / 下部 小 447 × 236 (r40) × 2
   312 + 31 + 236 = 579px
   ══════════════════════════════════════════════════════════ */
.hub-reviews .hub-wrap{width:925px}
.hub-reviews .hub-card-lg{height:312px;border-radius:50px}
.hub-reviews .hub-row{gap:31px;margin-top:31px}
.hub-reviews .hub-card-sm{flex:1 1 0;height:236px;border-radius:40px}

/* テキスト (デザイン案仕様) */
.hub-reviews .hub-card-lg .hub-title{font-size:21px;line-height:26px}
.hub-reviews .hub-card-lg .hub-desc{font-size:20px;line-height:25px;margin-top:6px}
.hub-reviews .hub-card-lg .hub-text{left:44px;bottom:38px;max-width:calc(100% - 44px - 56px - 44px - 20px)}
.hub-reviews .hub-card-sm .hub-title{font-size:17px;line-height:20px}
.hub-reviews .hub-card-sm .hub-desc{font-size:14px;line-height:16px;margin-top:4px}
.hub-reviews .hub-card-sm .hub-text{left:32px;bottom:30px;max-width:calc(100% - 32px - 42.39px - 32px - 16px)}

/* 矢印 (デザイン案仕様 = 従来値と同じ、固定) */
.hub-reviews .hub-card-lg .hub-arrow{width:56px;height:56px;right:44px;bottom:38px}
.hub-reviews .hub-card-lg .hub-arrow i{width:13.89px;height:13.89px}
.hub-reviews .hub-card-sm .hub-arrow{width:42.39px;height:42.39px;right:32px;bottom:28px}
.hub-reviews .hub-card-sm .hub-arrow i{width:10.51px;height:10.51px}


/* 復元: 旧 max-width:980px。レスポンシブ化に伴い body.is-mobile から戻した */
@media (max-width:1023.98px){
  .hub-reviews .hub-wrap{width:100%}
  .hub-reviews .hub-card-lg{height:250px;border-radius:32px}
  .hub-reviews .hub-card-sm{height:200px;border-radius:28px}
  .hub-reviews .hub-row{gap:18px;margin-top:18px}
  .hub-reviews .hub-card-lg .hub-title{font-size:18px;line-height:22px}
  .hub-reviews .hub-card-lg .hub-desc{font-size:15px;line-height:20px}
  .hub-reviews .hub-card-sm .hub-desc{font-size:14px;line-height:18px}
}


/* 復元: 旧 max-width:640px。レスポンシブ化に伴い body.is-mobile から戻した */
@media (max-width:1023.98px){
  .hub-reviews .hub-row{flex-direction:column;gap:16px;margin-top:16px}
  .hub-reviews .hub-card-lg{height:210px;border-radius:24px}
  .hub-reviews .hub-card-sm{height:170px;border-radius:24px}
  .hub-reviews .hub-card-lg .hub-title{font-size:19px;line-height:23px}
  .hub-reviews .hub-card-lg .hub-desc{font-size:15px;line-height:20px}
  .hub-reviews .hub-card-sm .hub-title{font-size:17px;line-height:21px}
  .hub-reviews .hub-card-sm .hub-desc{font-size:11px;line-height:14px}
}


/* ══════════════════════════════════════════════════════════
   レポートハブ — デザイン案 Rectangle 221   ※ カードの順序変更なし
   上部 大 442 × 387 (r50) × 2 / 下部 ワイド 915 × 155 (r32)
   387 + 37 + 155 = 579px
   ══════════════════════════════════════════════════════════ */
.hub-report .hub-wrap-report{width:915px}
.hub-report .hub-row-lg{gap:31px;margin-top:0}
.hub-report .hub-card-lg{flex:1 1 0;height:387px;border-radius:50px}
.hub-report .hub-card-wide{height:155px;border-radius:32px;margin-top:37px}

/* テキスト (デザイン案仕様) */
.hub-report .hub-card-lg .hub-title{font-size:21px;line-height:26px}
.hub-report .hub-card-lg .hub-desc{font-size:17px;line-height:20px;margin-top:6px}
.hub-report .hub-card-lg .hub-text{left:44px;bottom:38px;max-width:calc(100% - 44px - 56px - 44px - 20px)}
.hub-report .hub-card-wide .hub-title{font-size:17px;line-height:20px}
.hub-report .hub-card-wide .hub-desc{font-size:14px;line-height:16px;margin-top:4px}
.hub-report .hub-card-wide .hub-text{left:44px;bottom:32px;max-width:calc(100% - 44px - 42.39px - 44px - 24px)}

/* 矢印 (デザイン案仕様) */
.hub-report .hub-card-lg .hub-arrow{width:56px;height:56px;right:44px;bottom:38px}
.hub-report .hub-card-lg .hub-arrow i{width:13.88px;height:13.88px}
.hub-report .hub-card-wide .hub-arrow{width:42.39px;height:42.39px;right:44px;bottom:30px}
.hub-report .hub-card-wide .hub-arrow i{width:10.51px;height:10.51px}


/* 復元: 旧 max-width:980px。レスポンシブ化に伴い body.is-mobile から戻した */
@media (max-width:1023.98px){
  .hub-report .hub-wrap-report{width:100%}
  .hub-report .hub-row-lg{gap:18px}
  .hub-report .hub-card-lg{height:300px;border-radius:32px}
  .hub-report .hub-card-wide{height:130px;border-radius:26px;margin-top:22px}
  .hub-report .hub-card-lg .hub-title{font-size:17px;line-height:22px}
  .hub-report .hub-card-lg .hub-desc{font-size:14px;line-height:18px}
  .hub-report .hub-card-lg .hub-text{left:28px;bottom:26px;max-width:calc(100% - 28px - 46px - 28px - 16px)}
  .hub-report .hub-card-lg .hub-arrow{width:46px;height:46px;right:28px;bottom:26px}
  .hub-report .hub-card-wide .hub-title{font-size:17px;line-height:21px}
  .hub-report .hub-card-wide .hub-desc{font-size:14px;line-height:18px}
  .hub-report .hub-card-wide .hub-text{left:28px;bottom:24px}
  .hub-report .hub-card-wide .hub-arrow{width:38px;height:38px;right:28px;bottom:22px}
}


/* 復元: 旧 max-width:640px。レスポンシブ化に伴い body.is-mobile から戻した */
@media (max-width:1023.98px){
  .hub-report .hub-row-lg{flex-direction:column;gap:16px}
  .hub-report .hub-card-lg{height:220px;border-radius:24px}
  .hub-report .hub-card-wide{height:150px;border-radius:24px;margin-top:16px}
  .hub-report .hub-card-lg .hub-text{left:22px;bottom:22px}
  .hub-report .hub-card-lg .hub-arrow{width:38px;height:38px;right:20px;bottom:20px}
  .hub-report .hub-card-wide .hub-text{left:22px;bottom:22px}
  .hub-report .hub-card-wide .hub-arrow{width:34px;height:34px;right:20px;bottom:20px}
}


/* ── カード角の外に四角がはみ出して見える問題の修正 ──
   動画/画像/グラデーションがそれぞれ合成レイヤーとして描画されると
   親の overflow:hidden のクリッピングが効かないブラウザのバグへの対応。
   各レイヤーに直接同じ角丸を与える。 */
.hub-card .hub-media,
.hub-card .hub-shade,
.hub-card .hub-img,
.hub-card .hub-video,
.hub-card .hub-vid,
.hub-card img,
.hub-card video{border-radius:inherit}

/* カード自体も自身のレイヤーでクリッピングされるよう強制 */
.hub-card{transform:translateZ(0);-webkit-mask-image:-webkit-radial-gradient(#fff,#000)}

/* ══════════════════════════════════════════════════════════
   モバイル(≤640)でのカード崩れの修正 (2026-08-04)
   原因: カードの子要素がすべて position:absolute のためコンテンツサイズが0。
     ① ラッパーが flex-direction:column に変わっても align-items:flex-start が
        残っており、交差軸(幅)が shrink-to-fit → 0
     ② デスクトップ用の flex:1 1 0 が残り、主軸が縦になると
        flex-basis:0 が height 指定を打ち消して高さ0
   ══════════════════════════════════════════════════════════ */

/* 復元: 旧 max-width:640px。レスポンシブ化に伴い body.is-mobile から戻した */
@media (max-width:1023.98px){
  .hub-wrap, .hub-wrap-2col, .hub-wrap-cs, .hub-wrap-report, .hub-taian .hub-wrap, .hub-row, .hub-row-lg, .hub-col, .hub-cs-side{align-items:stretch}
  /* .hub-cs .hub-card-lg など (0,2,0) と詳細度を揃えないと flex:1 1 0 を上書きできない */
}
  .page-hub .hub-card{width:100%;flex:0 0 auto}


/* ══════════════════════════════════════════════════════════
   お客様センターハブ — カードの総高さ423px
   左: 375 × 198 (r43) × 2、縦gap 27 / 右: 511 × 423 (r57)
   198 + 27 + 198 = 423px
   ══════════════════════════════════════════════════════════ */
.hub-cs .hub-cs-side{gap:27px}
.hub-cs .hub-card-sm{height:198px;border-radius:43px}
.hub-cs .hub-card-lg{flex:0 0 511px;height:423px;border-radius:57px}

/* ══════════════════════════════════════════════════════════
   タイアンブリッジレポートハブ — デザイン案 Group 387
   左(小・大) / 右(大・小) の互い違い2列、列幅447px
   397 + 32 + 150 = 579px
   ══════════════════════════════════════════════════════════ */
.hub-report .hub-wrap-report2{width:925px;max-width:calc(100% - 40px);margin:0 auto;display:flex;gap:31px;align-items:flex-start}
.hub-report .hub-rp2-col{flex:0 0 447px;min-width:0;display:flex;flex-direction:column;gap:32px}
.hub-report .hub-rp2-col .hub-card-lg{flex:0 0 auto;height:397px;border-radius:35px}
.hub-report .hub-rp2-col .hub-card-sm{flex:0 0 auto;height:150px;border-radius:31px}

/* テキスト (デザイン案仕様) */
.hub-report .hub-rp2-col .hub-card-lg .hub-title{font-size:21px;line-height:26px}
.hub-report .hub-rp2-col .hub-card-lg .hub-desc{font-size:17px;line-height:20px;margin-top:6px}
.hub-report .hub-rp2-col .hub-card-lg .hub-text{left:44px;bottom:36px;max-width:calc(100% - 44px - 42.87px - 44px - 20px)}
.hub-report .hub-rp2-col .hub-card-sm .hub-title{font-size:17px;line-height:20px}
.hub-report .hub-rp2-col .hub-card-sm .hub-desc{
  font-size:14px;line-height:16px;margin-top:4px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.hub-report .hub-rp2-col .hub-card-sm .hub-text{left:26px;bottom:22px;max-width:calc(100% - 26px - 33.01px - 26px - 14px)}

/* 矢印 (デザイン案仕様) */
.hub-report .hub-rp2-col .hub-card-lg .hub-arrow{width:42.87px;height:42.87px;right:44px;bottom:34px}
.hub-report .hub-rp2-col .hub-card-lg .hub-arrow i{width:10.57px;height:10.57px}
.hub-report .hub-rp2-col .hub-card-sm .hub-arrow{width:33.01px;height:33.01px;right:26px;bottom:20px}
.hub-report .hub-rp2-col .hub-card-sm .hub-arrow i{width:8.14px;height:8.14px;border-top-width:2px;border-right-width:2px;left:-1px}

/* 小カードは高さが低いためグラデーションを早めに開始 (デザイン案 17.31%) */
.hub-report .hub-rp2-col .hub-card-sm .hub-shade{background:linear-gradient(180deg, rgba(0,0,0,0) 17%, rgba(0,0,0,.85) 100%)}


/* 復元: 旧 max-width:980px。レスポンシブ化に伴い body.is-mobile から戻した */
@media (max-width:1023.98px){
  .hub-report .hub-wrap-report2{width:100%;max-width:calc(100% - 32px);gap:18px}
  .hub-report .hub-rp2-col{flex:1 1 0;gap:18px}
  .hub-report .hub-rp2-col .hub-card-lg{height:280px;border-radius:28px}
  .hub-report .hub-rp2-col .hub-card-sm{height:120px;border-radius:24px}
  .hub-report .hub-rp2-col .hub-card-lg .hub-title{font-size:17px;line-height:22px}
  .hub-report .hub-rp2-col .hub-card-lg .hub-desc{font-size:15px;line-height:21px}
  .hub-report .hub-rp2-col .hub-card-lg .hub-text{left:26px;bottom:24px;max-width:calc(100% - 26px - 40px - 26px - 16px)}
  .hub-report .hub-rp2-col .hub-card-lg .hub-arrow{width:40px;height:40px;right:26px;bottom:22px}
  .hub-report .hub-rp2-col .hub-card-sm .hub-title{font-size:17px;line-height:21px}
  .hub-report .hub-rp2-col .hub-card-sm .hub-desc{font-size:11px;line-height:14px}
  .hub-report .hub-rp2-col .hub-card-sm .hub-text{left:20px;bottom:18px;max-width:calc(100% - 20px - 30px - 20px - 12px)}
  .hub-report .hub-rp2-col .hub-card-sm .hub-arrow{width:30px;height:30px;right:20px;bottom:16px}
}


/* 復元: 旧 max-width:640px。レスポンシブ化に伴い body.is-mobile から戻した */
@media (max-width:1023.98px){
  .hub-report .hub-wrap-report2{flex-direction:column;gap:16px}
  .hub-report .hub-rp2-col{flex:0 0 auto;width:100%;gap:16px}
  .hub-report .hub-rp2-col .hub-card-lg{height:230px;border-radius:24px}
  .hub-report .hub-rp2-col .hub-card-sm{height:130px;border-radius:22px}
}


/* ══════════════════════════════════════════════════════════
   利用者の声ハブ — 1行2列の大カード (2026-08-06)
   FX・CFD / バイナリーオプションの口コミを2分割。
   レポートハブ上部の大カード(442×387 r50)と同一規格。
   ══════════════════════════════════════════════════════════ */
.hub-reviews .hub-wrap-rv2{width:915px;max-width:calc(100% - 40px);margin:0 auto;display:flex;gap:31px;align-items:flex-start}
.hub-reviews .hub-wrap-rv2 .hub-card-lg{flex:1 1 0;min-width:0;height:387px;border-radius:50px}

/* テキスト */
.hub-reviews .hub-wrap-rv2 .hub-card-lg .hub-title{font-size:21px;line-height:26px}
.hub-reviews .hub-wrap-rv2 .hub-card-lg .hub-desc{font-size:17px;line-height:20px;margin-top:6px}
.hub-reviews .hub-wrap-rv2 .hub-card-lg .hub-text{left:44px;bottom:38px;max-width:calc(100% - 44px - 56px - 44px - 20px)}

/* 矢印 */
.hub-reviews .hub-wrap-rv2 .hub-card-lg .hub-arrow{width:56px;height:56px;right:44px;bottom:38px}
.hub-reviews .hub-wrap-rv2 .hub-card-lg .hub-arrow i{width:13.88px;height:13.88px}

/* 動画のクロップ位置 — 人物が切れないよう右寄せ */
.hub-reviews .hub-wrap-rv2 .hub-card-lg .hub-vid{object-position:right center}


/* 復元: 旧 max-width:980px。レスポンシブ化に伴い body.is-mobile から戻した */
@media (max-width:1023.98px){
  .hub-reviews .hub-wrap-rv2{width:100%;max-width:calc(100% - 32px);gap:18px}
  .hub-reviews .hub-wrap-rv2 .hub-card-lg{height:300px;border-radius:32px}
  .hub-reviews .hub-wrap-rv2 .hub-card-lg .hub-title{font-size:17px;line-height:22px}
  .hub-reviews .hub-wrap-rv2 .hub-card-lg .hub-desc{font-size:14px;line-height:18px}
  .hub-reviews .hub-wrap-rv2 .hub-card-lg .hub-text{left:28px;bottom:26px;max-width:calc(100% - 28px - 46px - 28px - 16px)}
  .hub-reviews .hub-wrap-rv2 .hub-card-lg .hub-arrow{width:46px;height:46px;right:28px;bottom:26px}
}


/* 復元: 旧 max-width:640px。レスポンシブ化に伴い body.is-mobile から戻した */
@media (max-width:1023.98px){
  .hub-reviews .hub-wrap-rv2{flex-direction:column;gap:16px;align-items:stretch}
  .hub-reviews .hub-wrap-rv2 .hub-card-lg{width:100%;flex:0 0 auto;height:220px;border-radius:24px}
  .hub-reviews .hub-wrap-rv2 .hub-card-lg .hub-text{left:22px;bottom:22px}
  .hub-reviews .hub-wrap-rv2 .hub-card-lg .hub-arrow{width:38px;height:38px;right:20px;bottom:20px}
}


/* ══════════════════════════════════════════════════════════
   小カード = アイコン + テキストの横型 (2026-08-06)
   動画が入る大カードはそのままに、.hub-card-sm のみ切り替える。
   構造: <span class="hub-ic"><img></span> + .hub-text + .hub-arrow
   アイコン: /assets/images/hub-icons/{slug}.jpg (350×350、白背景)
   ※ カード外形の寸法(高さ・角丸)は従来どおり → 列の高さ揃えを維持。
   ※ 詳細度に注意: ハブ別の .hub-text/.hub-arrow 規則が最大 (0,4,0) のため
     ここでは (0,5,0) 以上で上書きする。
   ══════════════════════════════════════════════════════════ */
.page-hub .hub-card.hub-card-icon{
  display:flex;align-items:center;gap:18px;
  padding:0 22px;
  background:#fff;border:1px solid #EDEFF3;
  box-shadow:5px 6px 14px -4px rgba(16,24,40,.28);
  /* メディアのクリッピング用マスク・レイヤー昇格はアイコンカードで影を切ってしまうため解除 */
  -webkit-mask-image:none;mask-image:none;transform:none;
  transition:box-shadow .25s ease,border-color .25s ease;
}
.page-hub .hub-card.hub-card-icon:hover{box-shadow:8px 10px 22px -6px rgba(16,24,40,.34);border-color:#D9E1F7}

/* アイコン */
.page-hub .hub-card.hub-card-icon .hub-ic{flex:0 0 auto;display:block;width:72px;height:72px}
.page-hub .hub-card.hub-card-icon .hub-ic img{display:block;width:100%;height:100%;object-fit:contain;border-radius:0}

/* テキスト — absolute を解除して flex アイテムに */
.page-hub .hub-card.hub-card-icon.hub-card-sm .hub-text{
  position:static;left:auto;right:auto;bottom:auto;
  flex:1 1 auto;min-width:0;max-width:none;
}
.page-hub .hub-card.hub-card-icon.hub-card-sm .hub-title{color:#454545;font-weight:700}
.page-hub .hub-card.hub-card-icon.hub-card-sm .hub-desc{
  color:#454545;font-weight:500;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

/* 矢印 — absolute を解除、グレーの円 */
.page-hub .hub-card.hub-card-icon.hub-card-sm .hub-arrow{
  position:relative;top:14px;right:auto;bottom:auto;flex:0 0 auto;background:#F1F3F7;
}
.page-hub .hub-card.hub-card-icon.hub-card-sm .hub-arrow i{border-color:#4B5563}
.page-hub .hub-card.hub-card-icon.hub-card-sm:hover .hub-arrow{background:#1F3DFF}
.page-hub .hub-card.hub-card-icon.hub-card-sm:hover .hub-arrow i{border-color:#fff}

/* リンク未定のカード — hover効果なし */
.page-hub .hub-card.hub-card-icon.is-disabled:hover{box-shadow:5px 6px 14px -4px rgba(16,24,40,.28);border-color:#EDEFF3}
.page-hub .hub-card.hub-card-icon.hub-card-sm.is-disabled:hover .hub-arrow{background:#F1F3F7}
.page-hub .hub-card.hub-card-icon.hub-card-sm.is-disabled:hover .hub-arrow i{border-color:#4B5563}

/* ── ハブ別のアイコンサイズ・余白 (カード高さに合わせる) ── */
.hub-binary .hub-card.hub-card-icon,
.hub-fxcfd  .hub-card.hub-card-icon{gap:16px;padding:0 20px}          /* 高さ110 */
.hub-binary .hub-card.hub-card-icon .hub-ic,
.hub-fxcfd  .hub-card.hub-card-icon .hub-ic{width:64px;height:64px}
.hub-report .hub-rp2-col .hub-card.hub-card-icon .hub-ic{width:82px;height:82px}   /* 高さ150 */
.hub-taian  .hub-row .hub-card.hub-card-icon .hub-ic{width:68px;height:68px}       /* 高さ173 */
.hub-cs     .hub-card.hub-card-icon{gap:22px;padding:0 26px}          /* 高さ271 */
.hub-cs     .hub-card.hub-card-icon .hub-ic{width:88px;height:88px}

/* ── タブレット ── */

/* 復元: 旧 max-width:980px。レスポンシブ化に伴い body.is-mobile から戻した */
@media (max-width:1023.98px){
  .page-hub .hub-card.hub-card-icon{gap:14px;padding:0 16px}
  .page-hub .hub-card.hub-card-icon .hub-ic{width:60px;height:60px}
  .hub-binary .hub-card.hub-card-icon .hub-ic, .hub-fxcfd  .hub-card.hub-card-icon .hub-ic{width:56px;height:56px}
  .hub-report .hub-rp2-col .hub-card.hub-card-icon .hub-ic{width:66px;height:66px}
  .hub-taian  .hub-row .hub-card.hub-card-icon .hub-ic{width:66px;height:66px}
  .hub-cs     .hub-card.hub-card-icon{gap:16px;padding:0 18px}
  .hub-cs     .hub-card.hub-card-icon .hub-ic{width:86px;height:86px}
}

/* ── モバイル ── */

/* 復元: 旧 max-width:640px。レスポンシブ化に伴い body.is-mobile から戻した */
@media (max-width:1023.98px){
  .page-hub .hub-card.hub-card-icon{gap:14px;padding:0 16px}
  .page-hub .hub-card.hub-card-icon .hub-ic{width:64px;height:64px}
  .hub-cs .hub-card.hub-card-icon .hub-ic{width:76px;height:76px}
  .hub-taian .hub-row .hub-card.hub-card-icon .hub-ic{width:72px;height:72px}
}


/* ── 幅375pxの狭いカード(Taian Bridge・お客様センターハブ)の補正 ──
   アイコン・矢印・余白が大きいとテキスト領域が170px未満になり
   見出しが2行に折れて本文が切れる。アイコンを小さくし、本文は3行まで許容する。 */
.hub-taian .hub-row .hub-card.hub-card-icon{gap:14px;padding:0 18px}
.hub-taian .hub-row .hub-card.hub-card-icon .hub-ic{width:68px;height:68px}
.page-hub.hub-taian .hub-card.hub-card-icon.hub-card-sm .hub-title{font-size:15px;line-height:20px}
.page-hub.hub-taian .hub-card.hub-card-icon.hub-card-sm .hub-desc{font-size:13px;line-height:18px;-webkit-line-clamp:3}
.page-hub.hub-taian .hub-card.hub-card-icon.hub-card-sm .hub-arrow{width:36px;height:36px}
.page-hub.hub-taian .hub-card.hub-card-icon.hub-card-sm .hub-arrow i{width:9px;height:9px;border-top-width:2px;border-right-width:2px;left:-1px}

.hub-cs .hub-card.hub-card-icon{gap:16px;padding:0 20px}
.hub-cs .hub-card.hub-card-icon .hub-ic{width:96px;height:96px}
.page-hub.hub-cs .hub-card.hub-card-icon.hub-card-sm .hub-title{font-size:19px;line-height:24px}
.page-hub.hub-cs .hub-card.hub-card-icon.hub-card-sm .hub-desc{font-size:13px;line-height:18px;-webkit-line-clamp:3}
.page-hub.hub-cs .hub-card.hub-card-icon.hub-card-sm .hub-arrow{width:36px;height:36px}
.page-hub.hub-cs .hub-card.hub-card-icon.hub-card-sm .hub-arrow i{width:9px;height:9px;border-top-width:2px;border-right-width:2px;left:-1px}

/* レポートハブの小カードも見出しが2行にならないよう少し縮小 */
.page-hub.hub-report .hub-rp2-col .hub-card.hub-card-icon.hub-card-sm .hub-title{font-size:15px;line-height:20px}
.page-hub.hub-report .hub-rp2-col .hub-card.hub-card-icon.hub-card-sm .hub-desc{font-size:12px;line-height:16px}


/* 復元: 旧 max-width:980px。レスポンシブ化に伴い body.is-mobile から戻した */
@media (max-width:1023.98px){
  .hub-taian .hub-row .hub-card.hub-card-icon .hub-ic{width:56px;height:56px}
  .hub-cs .hub-card.hub-card-icon .hub-ic{width:72px;height:72px}
}

/* ══════════════════════════════════════════════════════════════
   全ハブ モバイル: PCと同じ配置 v2 (2026-08-19)
   - 列は%幅ベース(aspect-ratio+min-heightの最小幅転移によるはみ出しを回避)
   - 文字/矢印は !important で最終確定(旧ルールとの詳細度競合を終結)
   ══════════════════════════════════════════════════════════════ */

/* ── レポート (/report/): 左(小+大) / 右(大+小) ── */
@media (max-width:1023.98px){
  .hub-report .hub-wrap-report2{display:flex;flex-direction:row;gap:12px;width:100%;max-width:calc(100% - 32px)}
  .hub-report .hub-rp2-col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:12px}
  .hub-report .hub-rp2-col .hub-card-lg{flex:0 0 auto;height:auto;min-height:0;aspect-ratio:447/397;border-radius:20px}
  .hub-report .hub-rp2-col .hub-card-sm{flex:0 0 auto;height:auto;min-height:0;border-radius:16px}
}

/* ── タイアンブリッジ (/taian-bridge/): 左 大58% / 右 小3枚(大と同じ高さに分割) ── */
@media (max-width:1023.98px){
  .hub-taian .hub-wrap{display:flex;flex-direction:row;gap:12px}
  .hub-taian .hub-card-lg{flex:0 0 58%;max-width:58%;min-width:0;height:auto;min-height:0;aspect-ratio:511/579;border-radius:20px}
  .hub-taian .hub-row{flex:1 1 0;min-width:0;width:auto;display:flex;flex-direction:column;gap:12px;margin-top:0}
  .hub-taian .hub-row .hub-card-sm{flex:1 1 0;height:auto;min-height:0;border-radius:16px}
}

/* ── バイナリー / FX・CFD: 2列スタガード ── */
@media (max-width:1023.98px){
  .hub-wrap-2col{display:flex;flex-direction:row;gap:12px}
  .hub-col{flex:1 1 0;min-width:0;gap:12px}
  .hub-binary .hub-card-lg,
  .hub-fxcfd .hub-card-lg{height:auto;min-height:150px;aspect-ratio:442/438;border-radius:20px}
  .hub-binary .hub-i-binary-option-apply,
  .hub-fxcfd .hub-i-fx-cfd-apply{aspect-ratio:442/313;min-height:120px}
  .hub-binary .hub-card-sm,
  .hub-fxcfd .hub-card-sm{height:auto;min-height:0;aspect-ratio:auto;padding-top:10px;padding-bottom:10px;border-radius:14px}
}

/* ── 利用者の声 (/reviews-hub/): 上 大2枚 / 下 小2枚 ── */
@media (max-width:1023.98px){
  .hub-reviews .hub-wrap-rv2{display:flex;flex-direction:row;gap:12px;align-items:stretch}
  .hub-reviews .hub-wrap-rv2 .hub-card-lg{width:auto;flex:1 1 0;min-width:0;height:auto;min-height:0;aspect-ratio:442/387;border-radius:20px}
  .hub-reviews .hub-row{display:flex;flex-direction:row;gap:12px;margin-top:12px}
  .hub-reviews .hub-card-sm{flex:1 1 0;min-width:0;height:auto;min-height:0;aspect-ratio:447/236;border-radius:16px}
}

/* ── お客様センター (/customer-center/): 左 小42%2枚 / 右 大 ── */
@media (max-width:1023.98px){
  .hub-wrap-cs{display:flex;flex-direction:row;gap:12px}
  .hub-cs-side{flex:0 0 42%;max-width:42%;min-width:0;display:flex;flex-direction:column;gap:12px}
  .hub-cs .hub-card-sm{flex:1 1 0;height:auto;min-height:0;border-radius:16px}
  .hub-cs .hub-card-lg{flex:1 1 0;min-width:0;height:auto;min-height:0;aspect-ratio:511/423;border-radius:20px}
}

/* ── 文字(15%縮小済みの可変値・最終確定) ── */
@media (max-width:1023.98px){
  .page-hub .hub-card-lg .hub-title{font-size:clamp(11px,3.4vw,17px)!important;line-height:1.3!important}
  .page-hub .hub-card-lg .hub-desc{font-size:clamp(8.5px,2.4vw,12px)!important;line-height:1.4!important;margin-top:3px}
  .page-hub .hub-card-sm .hub-title{font-size:clamp(9.5px,2.8vw,13.5px)!important;line-height:1.25!important}
  .page-hub .hub-card-sm .hub-desc{font-size:clamp(7.5px,2.1vw,11px)!important;line-height:1.35!important;margin-top:2px}
}

/* ── 矢印: 右端に小さな余白を空けて固定 ── */
@media (max-width:1023.98px){
  .page-hub .hub-card-lg .hub-arrow{width:clamp(24px,7vw,40px)!important;height:clamp(24px,7vw,40px)!important;right:clamp(10px,3vw,22px)!important;bottom:clamp(10px,3vw,22px)!important;left:auto!important}
  .page-hub .hub-card-lg .hub-arrow i{width:clamp(6px,1.7vw,10px);height:clamp(6px,1.7vw,10px)}
  .page-hub .hub-card-sm .hub-arrow{width:clamp(18px,5.5vw,32px)!important;height:clamp(18px,5.5vw,32px)!important;right:clamp(8px,2.5vw,18px)!important;bottom:clamp(8px,2.5vw,18px)!important;left:auto!important}
  .page-hub .hub-card-sm .hub-arrow i{width:clamp(4.5px,1.3vw,8px);height:clamp(4.5px,1.3vw,8px)}
}

/* ── 本文: 矢印の幅+間隔を必ず確保(重なり禁止・最終確定) ── */
@media (max-width:1023.98px){
  .page-hub .hub-card-lg .hub-text{left:clamp(12px,4vw,26px)!important;bottom:clamp(10px,3.5vw,22px)!important;max-width:calc(100% - clamp(12px,4vw,26px) - clamp(24px,7vw,40px) - clamp(10px,3vw,22px) - 8px)!important}
  .page-hub .hub-card-sm .hub-text{left:clamp(10px,3vw,22px)!important;bottom:clamp(8px,2.5vw,18px)!important;max-width:calc(100% - clamp(10px,3vw,22px) - clamp(18px,5.5vw,32px) - clamp(8px,2.5vw,18px) - 8px)!important}
}

/* ── アイコン型小カード: flex配置(静的)を復元・縮小・説明文非表示 ── */
@media (max-width:1023.98px){
  .page-hub .hub-card.hub-card-icon{gap:clamp(6px,2vw,14px);padding:clamp(8px,2.5vw,14px) clamp(8px,2.5vw,16px)}
  .page-hub .hub-card.hub-card-icon .hub-ic{width:clamp(26px,8vw,52px)!important;height:clamp(26px,8vw,52px)!important}
  .page-hub .hub-card.hub-card-icon .hub-text{position:static!important;max-width:none!important}
  .page-hub .hub-card.hub-card-icon.hub-card-sm .hub-desc{display:none!important}
  .page-hub .hub-card.hub-card-icon.hub-card-sm .hub-arrow{position:relative!important;top:0!important;right:auto!important;bottom:auto!important}
}

/* ── バイナリー/FX・CFD 比較ハブ v3 (2026-08-20 デザイン案): サイズ・配置のみ変更(小カードは既存アイコン式) ── */
.hub-binary .hub-body,.hub-fxcfd .hub-body{background:#F8F9FB}
.hub-binary .hub-col,.hub-fxcfd .hub-col{gap:15px}
.hub-binary .hub-card-lg,.hub-fxcfd .hub-card-lg{height:438px;border-radius:35px}
.hub-binary .hub-i-binary-option-apply,.hub-fxcfd .hub-i-fx-cfd-apply{height:313px}
.hub-binary .hub-card-sm,.hub-fxcfd .hub-card-sm{height:110px;border-radius:26px;flex:0 0 auto}
.hub-binary .hub-card-lg .hub-title,.hub-fxcfd .hub-card-lg .hub-title{font-size:25px;line-height:30px}
.hub-binary .hub-card-lg .hub-desc,.hub-fxcfd .hub-card-lg .hub-desc{font-size:20px;line-height:24px;font-weight:500}
.hub-binary .hub-card-lg .hub-text,.hub-fxcfd .hub-card-lg .hub-text{left:32px;bottom:26px;max-width:calc(100% - 32px - 42.39px - 32px - 16px)}
.hub-binary .hub-card-lg .hub-arrow,.hub-fxcfd .hub-card-lg .hub-arrow{width:42.39px;height:42.39px;right:32px;bottom:26px}
.hub-binary .hub-card-lg .hub-arrow i,.hub-fxcfd .hub-card-lg .hub-arrow i{width:10.51px;height:10.51px}