/* ------------------------------------------------- 

1️⃣ 基本レイアウト・見出し 

------------------------------------------------- */ 

  

/* モバイル・タブレット用：見出し (h1) を 1 行表示＆小さく */ 

@media (max-width: 900px) { 

h1 { 

font-size: 18px !important; 

white-space: nowrap !important; 

overflow: hidden !important; 

text-overflow: ellipsis !important; 

} 

} 

  

/* ------------------------------------------------- 

2️⃣ タブレット・モバイル共通：横スクロール防止 & 幅固定 

------------------------------------------------- */ 

@media (max-width: 900px) { 

html, 

body { 

overflow-x: hidden !important; 

max-width: 100vw !important; 

} 

table[align="center"] { 

width: 100vw !important; 

max-width: 100vw !important; 

box-sizing: border-box !important; 

} 

} 

  

/* ------------------------------------------------- 

3️⃣ タイトル・サブタイトルの可変サイズ 

------------------------------------------------- */ 

.responsive-title { 

color: #fff; 

font-weight: bold; 

font-size: clamp(24px, 5vw, 36px); 

line-height: 1.2; 

margin: 0; 

} 

.responsive-lead { 

color: #fff; 

font-weight: normal; 

font-size: clamp(14px, 2vw, 18px); 

line-height: 1.8; 

margin: 10px 0 0 0; 

} 

  

/* ------------------------------------------------- 

4️⃣ 背景エリア 

------------------------------------------------- */ 

.webinar-bg { 

background: #425b76; 

width: 100vw; 

margin-left: 50%; 

transform: translateX(-50%); 

box-sizing: border-box; 

padding: 48px 0 32px 0; 

} 

@media (max-width: 600px) { 

.webinar-bg { 

padding: 32px 0 24px 0; 

} 

} 

  

/* ------------------------------------------------- 

5️⃣ タブレット（横並び） 601‑900px 

------------------------------------------------- / 

@media (max-width: 900px) and (min-width: 601px) { 

table[align="center"] { 

width: 100% !important; 

max-width: 100% !important; 

margin: 0 auto !important; 

padding-left: 16px !important; 

padding-right: 16px !important; 

border-spacing: 0 !important; 

border-collapse: separate !important; 

} 

table[align="center"] td { 

width: auto !important; 

max-width: none !important; 

min-width: 0 !important; 

padding: 0 !important; 

box-sizing: border-box !important; 

margin: 0 !important; 

} 

table[align="center"] img { 

width: 100% !important; 

height: auto !important; 

max-width: 280px !important; 

min-width: 0 !important; 

} 

table[align="center"] [style="width: 380px"], 

table[align="center"] [style="width:400px"] { 

width: 100% !important; 

max-width: 280px !important; 

min-width: 0 !important; 

box-sizing: border-box !important; 

margin: 0 !important; 

padding: 0 !important; 

} 

table[align="center"] td, 

table[align="center"] td * { 

font-size: 90% !important; 

} 

} 

  

/* ------------------------------------------------- 

6️⃣ モバイル（縦並び） 0‑600px 

------------------------------------------------- */ 

@media (max-width: 600px) { 

table[align="center"] { 

width: 100% !important; 

max-width: 100% !important; 

margin: 0 auto !important; 

padding: 0 !important; 

border-spacing: 0 !important; 

border-collapse: separate !important; 

box-sizing: border-box !important; 

} 

table[align="center"] tbody { 

width: 100% !important; 

max-width: 100% !important; 

margin: 0 auto !important; 

padding: 0 !important; 

display: block !important; 

} 

table[align="center"] td { 

width: 100% !important; 

max-width: 400px !important; 

display: block !important; 

margin: 0 auto 24px auto !important; 

box-sizing: border-box !important; 

height: auto !important; 

padding-left: 12px !important; 

padding-right: 12px !important; 

padding-top: 0 !important; 

padding-bottom: 0 !important; 

} 

  

/* ---------- カード幅と中央寄せ ---------- */ 

table[align="center"] td > a { 

max-width: 380px !important; 

margin-left: auto !important; 

margin-right: auto !important; 

display: block !important; 

} 

  

table[align="center"] img { 

width: 100% !important; 

height: auto !important; 

max-width: 100% !important; 

min-width: 0 !important; 

display: block !important; 

margin: 0 !important; 

} 

table[align="center"] [style="width: 380px"], 

table[align="center"] [style*="width:400px"] { 

width: 100% !important; 

max-width: 100% !important; 

min-width: 0 !important; 

box-sizing: border-box !important; 

margin: 0 !important; 

padding: 0 !important; 

} 

  

/* --- カード内部余白 --- */ 

table[align="center"] td > a > div[style^="padding: 8px 12px"] { 

padding-top: 16px !important; 

padding-bottom: 16px !important; 

} 

  

/* タグ/ラベル行の下余白 */ 

table[align="center"] td > a > div > div:first-child { 

margin-bottom: 12px !important; 

} 

  

/* セミナー名や説明テキスト（font-size:20px）の下余白 */ 

table[align="center"] td [style="font-size: 20px"] { 

margin-bottom: 8px !important; 

display: block !important; 

} 

  

/* ボタンの上下余白 */ 

table[align="center"] button { 

margin-top: 14px !important; 

margin-bottom: 12px !important; 

} 

  

/* ---- ボタン横幅をカード幅いっぱいにする ---- / 

table[align="center"] button { 

width: 100% !important; / カード内部の幅 100% / 

max-width: 100% !important; / 余計な max‑width を解除 / 

box-sizing: border-box !important;/ パディングを幅に含める */ 

} 

  

/* ---- タグが改行したときの行間確保（flex + gap） ---- / 

table[align="center"] td > a > div > div:first-child { 

display: flex !important; 

flex-wrap: wrap !important; 

gap: 6px 0 !important; / 縦方向 6px の余白 / 

align-items: center !important; 

} 

} 

/ ------------------------------------------------- 

① カード全体を同一高さに揃える 

------------------------------------------------- / 

.card-cell { 

/ 1. Flex コンテナにして縦方向に子要素を並べる / 

display: flex !important; 

flex-direction: column !important; 

/ 2. 高さはカードのコンテンツが最大になるまで伸ばす / 

height: auto !important; / 既存の height:389px を上書き */ 

} 

  

/* ------------------------------------------------- 

② カード内部のリンク（<a>）を伸長させる 

------------------------------------------------- / 

.card-cell > a { 

/ Flex 子要素として伸びるように */ 

flex: 1 1 auto !important; 

display: flex !important; 

flex-direction: column !important; 

} 

  

/* ------------------------------------------------- 

③ 画像は上部に固定（幅は 100% のままで OK） 

------------------------------------------------- / 

.card-cell > a > img { 

flex-shrink: 0 !important; / 画像が縮まないように */ 

} 

  

/* ------------------------------------------------- 

④ タグ（ラベル）行の高さを固定 

------------------------------------------------- / 

.card-cell > a > div > div:first-child { 

/ 2 行になるケースでも高さを一定に保つ / 

min-height: 36px; / 1 行の高さに合わせた目安 / 

/ 2 行になる場合は 2 行分の高さに合わせて調整 / 

/ 例: 2 行で 48px になるので、必要に応じて 48px に変更 */ 

} 

  

/* ------------------------------------------------- 

⑤ タイトルエリアをカード上部に固定 

------------------------------------------------- / 

.card-cell > a > div > div:nth-child(2) { 

/ ここが「タイトル」エリア（画像の下のテキスト） / 

margin-top: 12px; / 画像とタイトルの間隔（好みで調整） */ 

} 

  

/* ------------------------------------------------- 

⑥ タイトルテキスト自体の高さを統一（折り返し防止） 

------------------------------------------------- / 

.card-cell > a > div > div:nth-child(2) span[style="font-size: 18px"] { 

/* 1 行で収まるように強制的に 1 行にする */ 

display: block !important; 

overflow: hidden !important; 

text-overflow: ellipsis !important; 

white-space: nowrap !important; 

} 

<style> /* PC表示（横3枚並び）のときだけ適用 */ @media (min-width: 992px) { /* タグの行数・個数に関わらず、タイトル開始位置を揃える */ .tags { min-height: 84px !important; } .tags + span > span { margin-top: 0 !important; margin-bottom: 0 !important; } /* カード高さを統一し、ボタン位置も揃える */ table[cellspacing="30"] td > a { display: flex; flex-direction: column; min-height: 580px; /* 必要に応じて調整（例: 540〜640px） */ } table[cellspacing="30"] td > a > div { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: space-between; } } </style> 

/* ------------------------------------------------- 

⑦ ボタンはカード下部に固定（余白はそのまま） 

------------------------------------------------- / 

.card-cell > a > div > div:last-child { 

margin-top: auto; / 余ったスペースを上に押し出す */ 

} 

  

/* ------------------------------------------------- 

7️⃣ タブレット・モバイル共通で「ラベル・タグ行」に左右パディングを追加 

------------------------------------------------- */ 

@media (max-width: 900px) { 

table[align="center"] td > a > div > div:first-child { 

padding-left: 12px !important; 

padding-right: 12px !important; 

} 

} 

  

/* ------------------------------------------------- 

8️⃣ カード（<a>）にマウスオーバーしたときだけ拡大 

------------------------------------------------- */ 

table[align="center"] td > a:hover { 

transform: scale(1.05) !important; 

} 

table[align="center"] td > a:active { 

transform: scale(0.98) !important; 

}