/* ad（グラフィック広告）— 本番 https://570design.jp/ad を写したもの * * 作り方（2026-10-05）: 本番を手元のヘッドレス Chrome で 1230 / 614 / 550 / 390 幅に開き、Bubble の要素 * （.bubble-element）のインライン style を全部取って、要素1つにつき1クラス（a-<定義の id から cm を除いたもの>）の * 規則に移した。Bubble の新レスポンシブは配置（flex・幅・余白）が全部インライン style にあるので、これで写る。 * 幅の帯は定義の Current Page Width の条件どおり 770 / 600 / 500 未満。帯の中は各帯の代表幅のダンプどうしの差だけ。 * 道具は scratchpad の bdump.py / gen_ad.py（リポジトリ外）。実測の結論は measured/ad.md。 * * 色は Bubble の変数を base.css の変数へ置き換えた（primary → --c-primary 等）。 * 写していないもの: シミュレーター（Group Y・定義で常に非表示＝本番の DOM でも display:none）。 */ /* ---- Bubble の配置の仕組み（本番の Bubble の CSS と同じ。:where で詳細度 0 にし、要素ごとの規則が勝つ） */ /* 本番は全体に -webkit-font-smoothing: antialiased（Bubble の既定。Mac で文字が細く見える）。共通（base.css）に 無いので、このページの中だけ合わせる */ .ad, .adp { -webkit-font-smoothing: antialiased; } :where(.ad) { display: flex; flex-flow: column; align-content: stretch; overflow: hidden; box-sizing: border-box; } /* ページ（main-page）自身 */ :where(.ad, .adp) :where(.b) { position: relative; box-sizing: border-box; } :where(.ad, .adp) :where(div.b, a.b, button.b) { overflow: hidden; } :where(.ad, .adp) :where(.rc) { overflow: hidden; } :where(.ad, .adp) :where(.rc.fx) { display: flex; align-content: stretch; } :where(.ad, .adp) :where(.rc.fx.row) { flex-flow: wrap; } :where(.ad, .adp) :where(.rc.fx.col) { flex-flow: column; } :where(.ad, .adp) :where(.rc.rel) { display: grid; grid-template: "stack" 100% / 100%; } :where(.ad, .adp) :where(.rc.rel > .b) { grid-area: stack; } :where(.ad, .adp) :where(.vc) { display: flex; flex-direction: column; justify-content: center; } :where(.ad, .adp) :where(.t-Text) { overflow-wrap: break-word; } :where(.ad, .adp) :where(.tv) { display: none; } /* 幅で替わる文字の候補（要素ごとの規則で1つだけ display: contents） */ :where(.ad, .adp) :where(.t-Image) { display: flex; flex-direction: row; align-items: stretch; } :where(.ad, .adp) :where(.t-Image) .ar { position: relative; height: 0; } :where(.ad, .adp) :where(.t-Image) img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; } :where(.ad, .adp) :where(button.b, a.b) { display: block; font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; text-align: inherit; cursor: pointer; text-decoration: none; } :where(.ad, .adp) :where(button.rc.fx) { display: flex; } /* Bubble の Button は