/** * AMORモンスター動的カード用の補完CSS。 * enrichment_school/monster/index.html の元の静的カードは、Bricksがカード毎に * 個別ID（#brxe-zrvhph 等）へ直接レイアウトCSSを当てていた。汎用クラス * （brxe-block等）を再利用するだけではこの個別指定分が再現できず、 * スマホ幅で本文がグリッドからはみ出す実害が出た（2026-08-06）。 * ここでは6枚の元カードに共通していた値を、専用クラスで明示的に補う。 * グリッド本体（display:grid・幅・列数・991px/478pxのブレークポイント）は * #brxe-wutoax 自体のインラインCSS（内、Bricks生成）が引き続き効くため、 * このファイルでは重複させない。 */ #brxe-wutoax .amor-monster-card { display: flex; flex-direction: column; align-items: center; justify-content: space-between; height: 100%; } #brxe-wutoax .amor-monster-body { display: flex; flex-direction: column; justify-content: space-between; flex: 1 1 auto; width: 100%; height: 100%; } @media (max-width: 767px) { #brxe-wutoax .amor-monster-body { height: auto; } } #brxe-wutoax .amor-monster-caption { font-size: 18px; align-self: flex-start; } @media (max-width: 478px) { #brxe-wutoax .amor-monster-caption { font-size: 14px; line-height: 1.5; } } /* ボタン背景: サイト全体のInstagram関連ボタンと同じブランドグラデーションに統一 （amor-ig-more・sbi_follow_btn上書きと同じ値）。 */ #brxe-wutoax .amor-monster-btn { background: linear-gradient(135deg, #feda75 0%, #fa7e1e 6%, #d62976 40%, #962fbf 68%, #4f5bd5 100%); width: 90%; margin-top: 20px; border-radius: 50px; padding-top: 10px; padding-bottom: 10px; } @media (max-width: 767px) { #brxe-wutoax .amor-monster-btn { width: 100%; } } @media (max-width: 478px) { #brxe-wutoax .amor-monster-btn { width: 95%; font-size: 13px; } }