/* ========================================================================= 保証料率ABテスト 新デザイン（共有・暫定スタイル） FIDS-2900 / FIDS-2917 3LP（supplierLp23 / supplierLp16 / supplierLp26）共通で使う料率テーブル。 data-ab-pattern="pt1|pt2|pt3" の新デザインブロックに適用される。 ※※※ ABテスト終了後の対応 ※※※ これはABテスト期間中だけ使う「共有」スタイルです。テストで採用パターンが 確定したら、採用パターンのスタイルを各LPの個別CSSへ転記し、本ファイルへの 依存を解消してください。 - supplierLp23/css/style.css - supplierLp16/assets/css/adlp.css - supplierLp26/css/style.css あわせて各LPの から を削除し、本ファイルも削除すること。 ========================================================================= */ .abrate { display: flex; flex-direction: column; width: min(92%, 1011px); margin: clamp(24px, 4vw, 48px) auto 0; gap: clamp(8px, 1.2vw, 12px); } .abrate * { box-sizing: border-box; } /* 1行＝白カード（左：ラベル ｜ 縦罫線 ｜ 右：値） */ .abrate__row { display: flex; position: relative; align-items: center; min-height: clamp(72px, 12vw, 125px); padding: clamp(14px, 2vw, 24px) clamp(12px, 2vw, 24px); border-radius: clamp(8px, 1.2vw, 12px); background: #fff; } /* 縦罫線（ラベルと値の境界） */ .abrate__row::before { position: absolute; top: 50%; left: 38%; width: 1px; height: 62%; transform: translateY(-50%); background: #d6d6d6; content: ""; } .abrate__label { flex-shrink: 0; width: 38%; color: #03af7a; font-weight: bold; font-size: clamp(14px, 2.2vw, 21px); line-height: 1.4; text-align: center; } .abrate__value { flex: 1; padding-left: clamp(8px, 1.5vw, 16px); color: #03af7a; line-height: 1.3; text-align: center; } .abrate__main { display: block; font-weight: bold; font-size: clamp(22px, 3.2vw, 31px); } .abrate__main--pay { font-size: clamp(18px, 2.7vw, 26px); } .abrate__note { display: block; margin-top: 4px; color: #000; font-weight: normal; font-size: clamp(12px, 1.7vw, 17px); } /* pt3：利用金額別の段階表示 */ .abrate__tiers { display: flex; flex-direction: column; align-items: center; gap: clamp(4px, 0.8vw, 8px); color: #03af7a; font-weight: bold; } .abrate__tiers p { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; margin: 0; gap: 4px; font-size: clamp(14px, 2.4vw, 26px); } .abrate__tiers p:last-child { margin-left: -1rem; } @media screen and (min-width: 940px) { .abrate__tiers p:last-child { margin-left: 0; } } /* お支払い条件 */ .abrate__pay-sub { display: block; margin-top: clamp(6px, 1vw, 10px); color: #000; font-weight: normal; font-size: clamp(12px, 1.7vw, 17px); } .abrate__hl { display: inline-block; margin-left: 6px; padding: 2px 8px; background: #fcffd0; }