/* ライト訴求版（A/B テスト）だけが読み込む CSS。
   variant-light/index.html からのみ参照する。対照版（index.html）は読み込まない。

   ここに置くのは「ライト列を強調するために位置がずれるもの」だけ。
   色や枠は site.css の is-standard / is-standard-column / is-standard-last-row を
   ライト列に付け替えて使っているので、この 2 つのルール以外は要らない。
   site.css は両方の版が共有しているので、絶対に触らないこと。

   実験が終わったらこのファイルごと削除する。 */

/* 「＼ おすすめ ／」のラベルを 1 列ぶん左（スタンダード列 → ライト列）へずらす。

   site.css の元の値は margin-left: 120px で、スタンダード列の上に来るように
   直接指定されている。料金表は「44px 1fr 1fr 1fr 1fr」の 5 列で、
   1 列の幅は「表の幅 - 44px」の 4 分の 1。表の幅は親の内容領域と同じなので (100% - 44px) / 4 で出せる。
   親の幅は 390px 上限で、それより狭い画面では縮むので、
   固定値ではなく calc で追随させる（画面幅 360px で 48px、390px 以上で 40.5px）。 */
.pricing-table-recommend-new {
  /* 「＼ まずは週1 ／」の実測幅は 91.6px で、対照用の 90px だと
     「／」だけが 2 行目に落ちる。少しだけ広げて 1 行に収め、
     広げた分の半分だけ margin を戻して中心をライト列の上に保つ */
  width: 96px;
  margin-left: calc(120px - (100% - 44px) / 4 - 3px);
}