@charset "utf-8"; /* ==== BPRICE-COMMON-BEGIN ============================================== item3.css 末尾の《メイン画像の価格テキスト化：共通パーツ》をそのまま複製。 item3.css を読み込まないページ（c-006）でも価格テキストが成立するようにする。 item3.css を読み込むページでは同じ宣言が二重になるだけで、表示は変わらない。 item3.css 側の共通パーツを直したときは、このブロックも同じ内容に合わせること。 ====================================================================== */ /* ========================================================================== メイン画像の価格テキスト化：共通パーツ -------------------------------------------------------------------------- もともとメイン画像に焼き込まれていた「メーカー希望小売価格／セット価格／ 本体のみ価格／○○％OFF」とその装飾を、HTMLテキスト＋CSSで再現するための 共通スタイル。 ・見た目（色・チップの形・フォント・文字サイズの既定値）はここに書く ・商品ごとに変わる「配置座標」は css/butsudan_price.css に書く ========================================================================== */ /* -------------------------------------------------------------------------- 1. 画像ラッパー -------------------------------------------------------------------------- 価格を載せるメイン画像は、この .bpriceBox で包む。 … … --u はマスター画像 1px 分の長さ。すべての座標を calc(<マスター画像上の実測px> * var(--u)) で書くことで、 PC（等倍）でもSP（縮小）でも同じ見え方になる。 マスター画像の幅が 980px 以外の商品は butsudan_price.css で --u を上書きする。 -------------------------------------------------------------------------- */ .bpriceBox { display: block; position: relative; --u: 1px; /* コンテナクエリ非対応ブラウザ用のフォールバック（PC等倍のみ正しく出る） */ /* 数字も和文ゴシックで組む。元画像の数字は「字送り÷字高＝0.74」で、 ヒラギノ角ゴ／游ゴシックの数字とほぼ一致する。 ※ "Hiragino Sans" は Windows で別フォントに解決され字幅が約3割広く なるため、あえて指定に入れていない。 */ --bp-gothic: "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic, Meiryo, "MS PGothic", sans-serif; --bp-num: "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic, Meiryo, "MS PGothic", sans-serif; --bp-pink: #c3064a; --bp-dark: #404040; --bp-red: #e60020; --bp-ink: #444444; } /* 対応ブラウザ（Chrome 105 / Edge 105 / Safari 16 / Firefox 110 以降）では 画像の実幅を基準にするので、SPで縮小されても配置比率が崩れない */ @supports (container-type: inline-size) { .bpriceBox { container-type: inline-size; --u: calc(100cqw / 980); } } .bpriceBox > img { display: block; width: 100%; height: auto; } /* 画像の上に重ねるブロックの共通設定 */ .bpriceBox .bpItem { position: absolute; margin: 0; padding: 0; color: var(--bp-ink); font-family: var(--bp-gothic); font-weight: bold; line-height: 1; white-space: nowrap; letter-spacing: 0; } /* グループ＝同一画像内に号数別の価格が並ぶときの入れ物。 グループ自体は left だけをずらし、中の .bpItem は left …グループ左端からの相対px ／ top …画像上の実測px で指定する（top をずらさないので号数間で値を使い回せる）。 */ /* -------------------------------------------------------------------------- 2. 金額の数字 -------------------------------------------------------------------------- 下3桁だけ小さい組み方は で表現する。 ￥1,215,000 親に「大きい方」のサイズを指定し、.s に縮小率を書く。 -------------------------------------------------------------------------- */ .bpriceBox .bpNum { font-family: var(--bp-num); font-weight: bold; line-height: 1; } .bpriceBox .bpNum .s { font-size: 80%; } /* 下3桁（小さく組む場合） */ .bpriceBox .bpTax { font-size: 32%; font-family: var(--bp-gothic); } /* (税込) */ .bpriceBox .bpWave { font-size: 55%; font-family: var(--bp-gothic); } /* 価格帯の波ダッシュ */ /* メーカー希望小売価格まわりは細字。(税込) と波ダッシュの縮小率も控えめにする */ .bpriceBox .bpRetail { font-weight: normal; } .bpriceBox .bpRetail .bpTax { font-size: 78%; } .bpriceBox .bpRetail .bpWave { font-size: 100%; } /* 打消し線つきの金額（メーカー希望小売価格） */ .bpriceBox .bpStrike { text-decoration: line-through; text-decoration-thickness: calc(2 * var(--u)); } /* -------------------------------------------------------------------------- 3. ラベルチップ（セット価格／本体のみ価格／16号 など） -------------------------------------------------------------------------- 幅・高さ・文字サイズは商品ごとに butsudan_price.css で指定する。 -------------------------------------------------------------------------- */ .bpriceBox .bpChip { display: grid; place-content: center; box-sizing: border-box; color: #fff; text-align: center; line-height: 1.16; } .bpriceBox .bpChip--pink { background: var(--bp-pink); } .bpriceBox .bpChip--dark { background: var(--bp-dark); } /* -------------------------------------------------------------------------- 4. メーカー希望小売価格ブロック -------------------------------------------------------------------------- */ /* 半透明パネル（画像側にパネルが残っている場合はこの指定を消す） */ .bpriceBox .bpPanel { background: rgba(248, 249, 241, .88); border-radius: calc(8 * var(--u)); } /* 内訳の各行：左＝品名、右＝金額 */ .bpriceBox .bpRow { display: flex; justify-content: space-between; align-items: baseline; } /* 合計行の上の区切り線 */ .bpriceBox .bpRule { background: #9a9a92; height: calc(1 * var(--u)); } /* -------------------------------------------------------------------------- 5. ○○％OFF -------------------------------------------------------------------------- 画像側の放射状バッジ（イラスト）はそのまま残し、その上に赤文字を重ねる。 -------------------------------------------------------------------------- */ .bpriceBox .bpOff { display: flex; flex-direction: column; align-items: center; color: var(--bp-red); text-align: center; line-height: 1; } .bpriceBox .bpOff .n { font-family: var(--bp-num); } /* 数字部分 */ /* バッジの外に出る「最大」 */ .bpriceBox .bpOffMax { color: var(--bp-red); } /* 白フチ。text-stroke は各ブラウザで太りが揃わないため text-shadow で作る */ .bpriceBox .bpOutline { text-shadow: calc(2 * var(--u)) 0 0 #fff, calc(-2 * var(--u)) 0 0 #fff, 0 calc(2 * var(--u)) 0 #fff, 0 calc(-2 * var(--u)) 0 #fff, calc(1.5 * var(--u)) calc(1.5 * var(--u)) 0 #fff, calc(-1.5 * var(--u)) calc(1.5 * var(--u)) 0 #fff, calc(1.5 * var(--u)) calc(-1.5 * var(--u)) 0 #fff, calc(-1.5 * var(--u)) calc(-1.5 * var(--u)) 0 #fff; } /* -------------------------------------------------------------------------- 6. 放射状バッジ（ギザギザ円） -------------------------------------------------------------------------- 元画像のバッジを実測した形（歯数32／内半径÷外半径＝0.84）。 文字は .bpOff に別要素で乗せるので、HTMLではこの .bpBurst を先に置くこと。 大きさと位置は商品ごとに butsudan_price.css で指定する。 -------------------------------------------------------------------------- */ .bpriceBox .bpBurst { clip-path: polygon( 50.00% 0.00%, 54.12% 8.20%, 59.75% 0.96%, 62.19% 9.81%, 69.13% 3.81%, 69.80% 12.96%, 77.78% 8.43%, 76.64% 17.53%, 85.36% 14.64%, 82.47% 23.36%, 91.57% 22.22%, 87.04% 30.20%, 96.19% 30.87%, 90.19% 37.81%, 99.04% 40.25%, 91.80% 45.88%, 100.00% 50.00%, 91.80% 54.12%, 99.04% 59.75%, 90.19% 62.19%, 96.19% 69.13%, 87.04% 69.80%, 91.57% 77.78%, 82.47% 76.64%, 85.36% 85.36%, 76.64% 82.47%, 77.78% 91.57%, 69.80% 87.04%, 69.13% 96.19%, 62.19% 90.19%, 59.75% 99.04%, 54.12% 91.80%, 50.00% 100.00%, 45.88% 91.80%, 40.25% 99.04%, 37.81% 90.19%, 30.87% 96.19%, 30.20% 87.04%, 22.22% 91.57%, 23.36% 82.47%, 14.64% 85.36%, 17.53% 76.64%, 8.43% 77.78%, 12.96% 69.80%, 3.81% 69.13%, 9.81% 62.19%, 0.96% 59.75%, 8.20% 54.12%, 0.00% 50.00%, 8.20% 45.88%, 0.96% 40.25%, 9.81% 37.81%, 3.81% 30.87%, 12.96% 30.20%, 8.43% 22.22%, 17.53% 23.36%, 14.64% 14.64%, 23.36% 17.53%, 22.22% 8.43%, 30.20% 12.96%, 30.87% 3.81%, 37.81% 9.81%, 40.25% 0.96%, 45.88% 8.20% ); } /* 赤ベタ（スペック画像などの小さいバッジ） */ .bpriceBox .bpBurst--red { background: #fe0000; } /* 黄からオレンジへのグラデーション（メインビジュアルの大きいバッジ） */ .bpriceBox .bpBurst--yellow { background: radial-gradient(circle at 50% 42%, #fff0a8 0%, #ffd530 46%, #f5a81e 100%); filter: drop-shadow(calc(2 * var(--u)) calc(3 * var(--u)) calc(3 * var(--u)) rgba(0, 0, 0, .25)); } /* -------------------------------------------------------------------------- 7. リード文（「仏具一式＋付属品が全部付いて」など） -------------------------------------------------------------------------- .em = ピンクで大きい強調（全部 など）／ .dk = 黒文字 -------------------------------------------------------------------------- */ .bpriceBox .bpLead { color: var(--bp-pink); } .bpriceBox .bpLead .dk { color: #333333; } .bpriceBox .bpLead .em { color: var(--bp-pink); } /* -------------------------------------------------------------------------- 8. 号数・サイズのリボンタグ -------------------------------------------------------------------------- 上が肩、下が細い足になった着物型のタグ。 文字は上段（肩）の中央に入る。幅・高さ・文字サイズは商品ごとに指定する。 -------------------------------------------------------------------------- */ .bpriceBox .bpRibbon { display: grid; grid-template-rows: 57fr 43fr; place-items: center; box-sizing: border-box; color: #fff; text-align: center; line-height: 1.1; background: linear-gradient(to bottom, #ff8cb2 0%, #f62a6c 100%); clip-path: polygon( 0 0, 100% 0, 100% 57%, 81% 57%, 81% 100%, 19% 100%, 19% 57%, 0 57% ); } /* -------------------------------------------------------------------------- 9. 下向き三角（▼） -------------------------------------------------------------------------- 色は color で指定する（既定は本文色）。 -------------------------------------------------------------------------- */ .bpriceBox .bpTri { background: currentColor; clip-path: polygon(0 0, 100% 0, 50% 100%); } /* 右向き三角 */ .bpriceBox .bpTri--right { clip-path: polygon(0 0, 100% 50%, 0 100%); } /* -------------------------------------------------------------------------- 10. 赤い×印（希望小売価格を×で消す表現） -------------------------------------------------------------------------- 打消し線の代わりに斜めの2本線を重ねる。太さ・角度は共通。 -------------------------------------------------------------------------- */ .bpriceBox .bpCross { position: relative; } .bpriceBox .bpCross::before, .bpriceBox .bpCross::after { content: ""; position: absolute; left: -4%; right: -4%; top: 50%; height: calc(3 * var(--u)); margin-top: calc(-1.5 * var(--u)); background: #e60020; } .bpriceBox .bpCross::before { transform: rotate(13deg); } .bpriceBox .bpCross::after { transform: rotate(-13deg); } /* -------------------------------------------------------------------------- 11. サイズ表（高さ／台幅／奥行き） -------------------------------------------------------------------------- 高さ台幅奥行き 160 cm64.5 cm59.5 cm 列数は --3（高さ・台幅・奥行き）と --4（号数つき）の2種類。 幅・高さ・文字サイズは商品ごとに butsudan_price.css で指定する。 -------------------------------------------------------------------------- */ .bpriceBox .bpSizeTbl { display: grid; box-sizing: border-box; border: calc(1 * var(--u)) solid #f2b4ce; background: #ffffff; font-weight: normal; text-align: center; line-height: 1; } .bpriceBox .bpSizeTbl--3 { grid-template-columns: repeat(3, 1fr); } .bpriceBox .bpSizeTbl--4 { grid-template-columns: repeat(4, 1fr); } .bpriceBox .bpSizeTbl > span { display: flex; align-items: center; justify-content: center; border-left: calc(1 * var(--u)) solid #f2b4ce; color: #666666; } .bpriceBox .bpSizeTbl--3 > span:nth-child(3n + 1), .bpriceBox .bpSizeTbl--4 > span:nth-child(4n + 1) { border-left: 0; } /* 見出し行 */ .bpriceBox .bpSizeTbl .h { background: #fdd9e8; border-bottom: calc(1 * var(--u)) solid #f2b4ce; color: #8c003c; } /* ==== BPRICE-COMMON-END ================================================ */ /* ========================================================================== 外部CSSとのクラス名衝突よけ -------------------------------------------------------------------------- バッジの「％」は で組んでいるが、商品ページが読み込む 他のCSS（s_new_itempage.css／サーバ側 new_common.css など）は .pc を 「PC表示用」の汎用クラスとして display:block で使っている。 そのままだと ％ だけが次の行に落ちて「37 ／ ％ ／ OFF」の3行になるため、 .bpriceBox 配下に限って inline に戻し、さらに数字＋％が折り返さないよう固定する。 （セレクタは .bpriceBox 配下限定なので、他ページの .pc には影響しない） ========================================================================== */ .bpriceBox .bpOff .n { white-space: nowrap; } /* 「○○％ OFF」の塊が放射状バッジの中で少し上寄りに見えるため、 組み方はそのままで全体を 2px 下げて上下中央に寄せる。 各商品の top は触らず margin で調整する（配置値の意味を変えないため） */ .bpriceBox .bpOff { margin-top: calc(2 * var(--u)); } /* 打消し線に白フチが乗らないようにする -------------------------------------------------------------------------- text-shadow は文字だけでなく text-decoration にも掛かるため、白フチを付けた 打消し価格は横ラインまで白く縁取られてしまう。 白フチを付けた要素に限り line-through をやめ、同じ太さ・同じ色の横ラインを 擬似要素で引き直す（擬似要素は text-shadow を打ち消す）。 白フチなしの .bpStrike（main_02 など）は従来どおり line-through のまま。 */ .bpriceBox .bpStrike.bpOutline { text-decoration: none; } .bpriceBox .bpStrike.bpOutline::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: calc(2 * var(--u)); margin-top: calc(-1 * var(--u)); background: currentColor; text-shadow: none; pointer-events: none; } .bpriceBox .bpOff .n .pc, .bpriceBox .bpOff .pc { display: inline; width: auto; float: none; } /* ========================================================================== 仏壇 商品ページ：メイン画像に重ねる価格テキストの「配置」 ========================================================================== ■ このファイルの役割 もともとメイン画像に焼き込まれていた価格を、HTMLテキスト＋CSSに置き換えた。 色・チップの形・フォントなど「どの商品でも共通の見た目」は css/item3.css の《メイン画像の価格テキスト化：共通パーツ》にまとめてある。 このファイルには「その商品の画像のどこに、どの大きさで置くか」だけを書く。 ■ 座標の書き方 数値はすべて「マスター画像上の実測ピクセル」。 top: calc(567 * var(--u)); → 元画像の上から 567px の位置 var(--u) は元画像 1px 分の長さで、item3.css の .bpriceBox で --u: calc(100cqw / 980) ← マスター画像の幅が 980px の場合 と定義している。画像がSPで縮小されても、この式なので比率が崩れない。 マスター画像の幅が 980px 以外の商品は、下のように上書きする （item3.css 側の定義が @supports の中にあるので、上書きも同じ中に置く）。 @supports (container-type: inline-size) { .bpriceBox--c006-01 { --u: calc(100cqw / 800); } } ■ HTML 側の書き方（例） … セット
価格 ￥1,215,000 クラス名は bpriceBox--〈商品ID〉-〈画像番号〉 で統一する。 ■ 使う部品クラス（item3.css で定義） .bpPanel メーカー希望小売価格の半透明パネル .bpRetail メーカー希望小売価格まわり（細字になる） .bpRow 左＝品名／右＝金額 の1行（品名は .nm） .bpRule 合計行の上の区切り線 .bpNum 金額の数字（.s＝下3桁の小さい部分／.bpTax＝(税込)／.bpWave＝波ダッシュ） .bpStrike 打消し線つきの金額 .bpChip ラベルチップ（--pink／--dark） .bpOff ○○％OFF（.n＝数字／.off＝OFF） .bpOffMax バッジの外に出る「最大」 .bpBurst 放射状バッジ（ギザギザ円）。--red／--yellow .bpOutline 白フチ .bpLead リード文（.dk＝黒文字／.em＝ピンクで大きい強調／ .s1 .s2 .s3＝同一行で文字サイズが変わる部分） .bpGroup 号数別の価格が並ぶときの入れ物 ■ 商品を追加するときの手順 1) HTML の を で包み、 価格テキストを で書き足す 2) このファイルの末尾に、下と同じ形式の見出しコメント＋配置ルールを追記する 既存商品のルールには手を入れないこと。 ========================================================================== 目次 c-114 唐木モダン仏壇 風皇 本黒檀 ========================================================================== */ /* ========================================================================== c-114 唐木モダン仏壇 風皇 本黒檀（16号・18号） ========================================================================== */ /* -------------------------------------------------------------------------- main_01.jpg メインビジュアル（マスター 980 × 700） -------------------------------------------------------------------------- */ /* メーカー希望小売価格：半透明パネル ※差し替え後の画像にパネルが残っている場合は、この1ブロックを削除する */ .bpriceBox--c114-01 .bpPanel { left: calc( 11 * var(--u)); top: calc(401 * var(--u)); width: calc(334 * var(--u)); height: calc(119 * var(--u)); } /* 「メーカー希望小売価格(税込)」見出し */ .bpriceBox--c114-01 .bpRetailTtl { left: calc( 38 * var(--u)); top: calc(404 * var(--u)); font-size: calc( 18 * var(--u)); } .bpriceBox--c114-01 .bpRetailTtl .bpTax { font-size: 92%; } /* 内訳2行（仏壇／仏具＋リン＋付属品）。品名だけ金額より大きい */ .bpriceBox--c114-01 .bpRows { left: calc( 28 * var(--u)); top: calc(439 * var(--u)); width: calc(273 * var(--u)); font-size: calc( 17 * var(--u)); line-height: calc( 21 / 17); } .bpriceBox--c114-01 .bpRows .nm { font-size: calc(19 * var(--u)); } /* 合計行の上の区切り線 */ .bpriceBox--c114-01 .bpRule { left: calc( 23 * var(--u)); top: calc(494 * var(--u)); width: calc(322 * var(--u)); } /* 合計行 */ .bpriceBox--c114-01 .bpTotal { left: calc( 28 * var(--u)); top: calc(500 * var(--u)); width: calc(317 * var(--u)); font-size: calc( 19 * var(--u)); } /* 放射状バッジ（ギザギザ円）。文字より先に置くこと */ .bpriceBox--c114-01 .bpBurst { left: calc(312 * var(--u)); top: calc(402 * var(--u)); width: calc(105 * var(--u)); height: calc(104 * var(--u)); } /* 「最大」（放射状バッジの左上） */ .bpriceBox--c114-01 .bpOffMax { left: calc(310 * var(--u)); top: calc(402 * var(--u)); font-size: calc( 19 * var(--u)); } /* 「40% OFF」（放射状バッジの中） */ .bpriceBox--c114-01 .bpOff { left: calc(333 * var(--u)); top: calc(429 * var(--u)); width: calc( 76 * var(--u)); font-size: calc( 33 * var(--u)); } .bpriceBox--c114-01 .bpOff .off { margin-top: calc( 6 * var(--u)); font-size: calc( 20 * var(--u)); } /* 「相当が、仏具一式＋付属品 全部セットになって」 */ .bpriceBox--c114-01 .bpLead { left: calc( 9 * var(--u)); top: calc(528 * var(--u)); font-size: calc(25.5 * var(--u)); /* 相当が、 */ } .bpriceBox--c114-01 .bpLead .em { font-size: calc(25 * var(--u)); } /* 全部 */ .bpriceBox--c114-01 .bpLead .s1 { font-size: calc(15 * var(--u)); } /* 仏具一式＋付属品 */ .bpriceBox--c114-01 .bpLead .s2 { font-size: calc(17 * var(--u)); } /* セット */ .bpriceBox--c114-01 .bpLead .s3 { font-size: calc(13 * var(--u)); } /* になって */ /* セット価格 */ .bpriceBox--c114-01 .bpSetLabel { left: calc( 12 * var(--u)); top: calc(567 * var(--u)); width: calc( 80 * var(--u)); height: calc( 58 * var(--u)); font-size: calc( 19 * var(--u)); } .bpriceBox--c114-01 .bpSetNum { left: calc(107 * var(--u)); top: calc(569 * var(--u)); font-size: calc( 63 * var(--u)); color: var(--bp-pink); } .bpriceBox--c114-01 .bpSetNum .bpTax { font-size: 30%; } /* 本体のみ価格 */ .bpriceBox--c114-01 .bpBodyLabel { left: calc( 12 * var(--u)); top: calc(641 * var(--u)); width: calc( 80 * var(--u)); height: calc( 50 * var(--u)); font-size: calc( 17 * var(--u)); } .bpriceBox--c114-01 .bpBodyNum { left: calc(108 * var(--u)); top: calc(639 * var(--u)); font-size: calc( 55 * var(--u)); color: var(--bp-dark); } .bpriceBox--c114-01 .bpBodyNum .s { font-size: 82%; } .bpriceBox--c114-01 .bpBodyNum .bpTax { font-size: 36%; } /* -------------------------------------------------------------------------- main_02.jpg スペック（マスター 980 × 1052） 号数ごとに .bpGroup で囲み、グループの left だけを変える。 グループ内の top は画像上の実測px、left はグループ左端からの相対px。 -------------------------------------------------------------------------- */ .bpriceBox--c114-02 .bpGroup { top: 0; } .bpriceBox--c114-02 .bpGroup--16 { left: calc( 31 * var(--u)); } /* 16号 */ .bpriceBox--c114-02 .bpGroup--18 { left: calc(475 * var(--u)); } /* 18号 */ /* 「メーカー希望小売価格（セット）」見出し */ .bpriceBox--c114-02 .bpRetailTtl { left: calc( 36 * var(--u)); top: calc(631 * var(--u)); font-size: calc( 12 * var(--u)); } /* 打消し線つきの希望小売価格 */ .bpriceBox--c114-02 .bpRetailNum { left: calc( 77 * var(--u)); top: calc(650 * var(--u)); font-size: calc( 21 * var(--u)); letter-spacing: calc(4 * var(--u)); } /* 放射状バッジ（ギザギザ円）。文字より先に置くこと */ .bpriceBox--c114-02 .bpBurst { left: calc(237 * var(--u)); top: calc(615 * var(--u)); width: calc( 87 * var(--u)); height: calc( 85 * var(--u)); } /* 「40% OFF」（放射状バッジの中） */ .bpriceBox--c114-02 .bpOff { left: calc(237 * var(--u)); top: calc(631 * var(--u)); width: calc( 87 * var(--u)); font-size: calc( 30 * var(--u)); } .bpriceBox--c114-02 .bpOff .off { margin-top: calc( 4 * var(--u)); font-size: calc(21 * var(--u)); } /* 「仏具一式＋付属品が全部付いて」 */ .bpriceBox--c114-02 .bpLead { left: calc( 1 * var(--u)); top: calc(687 * var(--u)); font-size: calc( 15 * var(--u)); } .bpriceBox--c114-02 .bpLead .em { font-size: calc(19 * var(--u)); } /* 号数チップ＋セット価格 */ .bpriceBox--c114-02 .bpSetLabel { left: calc( 0 * var(--u)); top: calc(728 * var(--u)); width: calc( 98 * var(--u)); height: calc( 33 * var(--u)); font-size: calc( 20 * var(--u)); } .bpriceBox--c114-02 .bpSetNum { left: calc(101 * var(--u)); top: calc(718 * var(--u)); font-size: calc( 53 * var(--u)); color: var(--bp-red); } .bpriceBox--c114-02 .bpSetNum .s { font-size: 72%; } .bpriceBox--c114-02 .bpSetNum .bpTax { font-size: 36%; } /* 本体のみチップ＋本体価格 */ .bpriceBox--c114-02 .bpBodyLabel { left: calc( -1 * var(--u)); top: calc(790 * var(--u)); width: calc( 98 * var(--u)); height: calc( 33 * var(--u)); font-size: calc( 17 * var(--u)); } .bpriceBox--c114-02 .bpBodyNum { left: calc(103 * var(--u)); top: calc(786 * var(--u)); font-size: calc( 47 * var(--u)); color: var(--bp-dark); } .bpriceBox--c114-02 .bpBodyNum .s { font-size: 79%; } /* (税込) は元画像だと16号と18号で大きさが違うが、実装では中間の値に揃えた。 18号側は数字が広く、大きいままだと右の「必需品が全て￥0」の円に重なる */ .bpriceBox--c114-02 .bpBodyNum .bpTax { font-size: 36%; } /* ========================================================================== 雅モダン仏壇シリーズ（c-119 / c-121 / c-123 / c-125 / c-157 / c-165 / c-186 / c-208 / c-209） -------------------------------------------------------------------------- main_01（メインビジュアル 980×700）は全商品が同じ構成。 メーカー希望小売価格（セット）／打消し価格／▼／リード文／大きい価格 ＋ 放射状バッジ（最大○○％OFF） 位置だけが商品ごとに違うので、共通の値をまとめてから個別に上書きする。 ========================================================================== */ /* --- シリーズ共通の文字比率 ------------------------------------------- */ .bpriceBox--c119-01, .bpriceBox--c121-01, .bpriceBox--c123-01, .bpriceBox--c125-01, .bpriceBox--c157-01, .bpriceBox--c165-01, .bpriceBox--c186-01, .bpriceBox--c208-01, .bpriceBox--c209-01 { --tri-w: 14; /* ▼ の幅（px／マスター画像基準） */ --tri-h: 9; } .bpriceBox--c119-01 .bpSetNum .bpWave, .bpriceBox--c121-01 .bpSetNum .bpWave, .bpriceBox--c123-01 .bpSetNum .bpWave, .bpriceBox--c125-01 .bpSetNum .bpWave, .bpriceBox--c157-01 .bpSetNum .bpWave, .bpriceBox--c165-01 .bpSetNum .bpWave, .bpriceBox--c186-01 .bpSetNum .bpWave, .bpriceBox--c209-01 .bpSetNum .bpWave { font-size: 100%; } .bpriceBox--c119-01 .bpSetNum .bpTax, .bpriceBox--c121-01 .bpSetNum .bpTax, .bpriceBox--c123-01 .bpSetNum .bpTax, .bpriceBox--c125-01 .bpSetNum .bpTax, .bpriceBox--c157-01 .bpSetNum .bpTax, .bpriceBox--c165-01 .bpSetNum .bpTax, .bpriceBox--c186-01 .bpSetNum .bpTax, .bpriceBox--c208-01 .bpSetNum .bpTax, .bpriceBox--c209-01 .bpSetNum .bpTax { font-size: 34%; } .bpriceBox--c119-01 .bpTri, .bpriceBox--c121-01 .bpTri, .bpriceBox--c123-01 .bpTri, .bpriceBox--c125-01 .bpTri, .bpriceBox--c157-01 .bpTri, .bpriceBox--c165-01 .bpTri, .bpriceBox--c186-01 .bpTri, .bpriceBox--c209-01 .bpTri { width: calc(var(--tri-w) * var(--u)); height: calc(var(--tri-h) * var(--u)); color: #6b6b6b; } .bpriceBox--c119-01 .bpSetNum, .bpriceBox--c121-01 .bpSetNum, .bpriceBox--c123-01 .bpSetNum, .bpriceBox--c125-01 .bpSetNum, .bpriceBox--c157-01 .bpSetNum, .bpriceBox--c165-01 .bpSetNum, .bpriceBox--c186-01 .bpSetNum, .bpriceBox--c208-01 .bpSetNum, .bpriceBox--c209-01 .bpSetNum { color: var(--bp-pink); } .bpriceBox--c119-01 .bpRetailNum, .bpriceBox--c121-01 .bpRetailNum, .bpriceBox--c123-01 .bpRetailNum, .bpriceBox--c125-01 .bpRetailNum, .bpriceBox--c157-01 .bpRetailNum, .bpriceBox--c165-01 .bpRetailNum, .bpriceBox--c186-01 .bpRetailNum, .bpriceBox--c209-01 .bpRetailNum { color: #6b6b6b; letter-spacing: calc(1 * var(--u)); } .bpriceBox--c119-01 .bpRetailTtl, .bpriceBox--c121-01 .bpRetailTtl, .bpriceBox--c123-01 .bpRetailTtl, .bpriceBox--c125-01 .bpRetailTtl, .bpriceBox--c157-01 .bpRetailTtl, .bpriceBox--c165-01 .bpRetailTtl, .bpriceBox--c186-01 .bpRetailTtl, .bpriceBox--c209-01 .bpRetailTtl { color: #6b6b6b; } /* バッジ内の文字（最大／○○％／OFF）はどの商品も同じ組み方 */ .bpriceBox--c119-01 .bpOff, .bpriceBox--c121-01 .bpOff, .bpriceBox--c123-01 .bpOff, .bpriceBox--c125-01 .bpOff, .bpriceBox--c157-01 .bpOff, .bpriceBox--c165-01 .bpOff, .bpriceBox--c186-01 .bpOff, .bpriceBox--c208-01 .bpOff, .bpriceBox--c209-01 .bpOff { text-align: center; } /* -------------------------------------------------------------------------- c-119 雅モダン仏壇 京錦（1300・1500） main_01 -------------------------------------------------------------------------- */ .bpriceBox--c119-01 .bpBurst { left: calc(566 * var(--u)); top: calc(518 * var(--u)); width: calc(92 * var(--u)); height: calc(91 * var(--u)); } .bpriceBox--c119-01 .bpOffMax { left: calc(570 * var(--u)); top: calc(514 * var(--u)); font-size: calc(17 * var(--u)); } .bpriceBox--c119-01 .bpOff { left: calc(570 * var(--u)); top: calc(536 * var(--u)); width: calc(84 * var(--u)); font-size: calc(30 * var(--u)); } .bpriceBox--c119-01 .bpOff .off { margin-top: calc(4 * var(--u)); font-size: calc(19 * var(--u)); } .bpriceBox--c119-01 .bpRetailTtl { left: calc(682 * var(--u)); top: calc(534 * var(--u)); font-size: calc(12 * var(--u)); } .bpriceBox--c119-01 .bpRetailNum { left: calc(678 * var(--u)); top: calc(559 * var(--u)); font-size: calc(23 * var(--u)); } .bpriceBox--c119-01 .bpTri { left: calc(707 * var(--u)); top: calc(583 * var(--u)); } .bpriceBox--c119-01 .bpLead { left: calc(689 * var(--u)); top: calc(594 * var(--u)); font-size: calc(17.5 * var(--u)); } .bpriceBox--c119-01 .bpLead .em { font-size: calc(22 * var(--u)); } .bpriceBox--c119-01 .bpSetNum { left: calc(296 * var(--u)); top: calc(631 * var(--u)); font-size: calc(54 * var(--u)); } /* -------------------------------------------------------------------------- c-121 雅モダン仏壇 京錦 DX main_01 -------------------------------------------------------------------------- */ /* バッジは打消し価格（右端 281px）とリード文（右端 265px）の右隣に置く */ .bpriceBox--c121-01 .bpBurst { left: calc(295 * var(--u)); top: calc(535 * var(--u)); width: calc(93 * var(--u)); height: calc(92 * var(--u)); } .bpriceBox--c121-01 .bpOffMax { left: calc(306 * var(--u)); top: calc(531 * var(--u)); font-size: calc(17 * var(--u)); } .bpriceBox--c121-01 .bpOff { left: calc(299 * var(--u)); top: calc(553 * var(--u)); width: calc(84 * var(--u)); font-size: calc(30 * var(--u)); } .bpriceBox--c121-01 .bpOff .off { margin-top: calc(4 * var(--u)); font-size: calc(19 * var(--u)); } .bpriceBox--c121-01 .bpRetailTtl { left: calc( 10 * var(--u)); top: calc(516 * var(--u)); font-size: calc(12 * var(--u)); } .bpriceBox--c121-01 .bpRetailNum { left: calc( 10 * var(--u)); top: calc(543 * var(--u)); font-size: calc(23 * var(--u)); } .bpriceBox--c121-01 .bpTri { left: calc( 38 * var(--u)); top: calc(568 * var(--u)); } .bpriceBox--c121-01 .bpLead { left: calc( 16 * var(--u)); top: calc(598 * var(--u)); font-size: calc(17 * var(--u)); } .bpriceBox--c121-01 .bpLead .em { font-size: calc(21 * var(--u)); } .bpriceBox--c121-01 .bpSetNum { left: calc( 23 * var(--u)); top: calc(634 * var(--u)); font-size: calc(54 * var(--u)); } /* -------------------------------------------------------------------------- c-123 雅モダン仏壇 京調 main_01 -------------------------------------------------------------------------- */ /* バッジは打消し価格とリード文の右隣に置く */ .bpriceBox--c123-01 .bpBurst { left: calc(310 * var(--u)); top: calc(529 * var(--u)); width: calc(93 * var(--u)); height: calc(93 * var(--u)); } .bpriceBox--c123-01 .bpOffMax { left: calc(321 * var(--u)); top: calc(525 * var(--u)); font-size: calc(17 * var(--u)); } .bpriceBox--c123-01 .bpOff { left: calc(314 * var(--u)); top: calc(547 * var(--u)); width: calc(84 * var(--u)); font-size: calc(30 * var(--u)); } .bpriceBox--c123-01 .bpOff .off { margin-top: calc(4 * var(--u)); font-size: calc(19 * var(--u)); } .bpriceBox--c123-01 .bpRetailTtl { left: calc( 33 * var(--u)); top: calc(518 * var(--u)); font-size: calc(12 * var(--u)); } .bpriceBox--c123-01 .bpRetailNum { left: calc( 24 * var(--u)); top: calc(543 * var(--u)); font-size: calc(23 * var(--u)); } .bpriceBox--c123-01 .bpTri { left: calc( 52 * var(--u)); top: calc(568 * var(--u)); } .bpriceBox--c123-01 .bpLead { left: calc( 34 * var(--u)); top: calc(598 * var(--u)); font-size: calc(17 * var(--u)); } .bpriceBox--c123-01 .bpLead .em { font-size: calc(21 * var(--u)); } .bpriceBox--c123-01 .bpSetNum { left: calc( 36 * var(--u)); top: calc(628 * var(--u)); font-size: calc(59 * var(--u)); } /* -------------------------------------------------------------------------- c-125 雅モダン仏壇 京調 DX main_01 -------------------------------------------------------------------------- */ /* バッジが打消し価格（右端 272px）に掛かるので少し右へ */ .bpriceBox--c125-01 .bpBurst { left: calc(280 * var(--u)); top: calc(546 * var(--u)); width: calc(79 * var(--u)); height: calc(79 * var(--u)); } .bpriceBox--c125-01 .bpOffMax { left: calc(289 * var(--u)); top: calc(540 * var(--u)); font-size: calc(15 * var(--u)); } .bpriceBox--c125-01 .bpOff { left: calc(283 * var(--u)); top: calc(560 * var(--u)); width: calc(73 * var(--u)); font-size: calc(26 * var(--u)); } .bpriceBox--c125-01 .bpOff .off { margin-top: calc(3 * var(--u)); font-size: calc(17 * var(--u)); } .bpriceBox--c125-01 .bpRetailTtl { left: calc( 20 * var(--u)); top: calc(542 * var(--u)); font-size: calc(11 * var(--u)); } .bpriceBox--c125-01 .bpRetailNum { left: calc( 18 * var(--u)); top: calc(563 * var(--u)); font-size: calc(21 * var(--u)); } .bpriceBox--c125-01 .bpTri { left: calc( 30 * var(--u)); top: calc(588 * var(--u)); } .bpriceBox--c125-01 .bpLead { left: calc( 18 * var(--u)); top: calc(604 * var(--u)); font-size: calc(16 * var(--u)); } .bpriceBox--c125-01 .bpLead .em { font-size: calc(20 * var(--u)); } .bpriceBox--c125-01 .bpSetNum { left: calc( 25 * var(--u)); top: calc(633 * var(--u)); font-size: calc(58 * var(--u)); } /* -------------------------------------------------------------------------- c-157 雅モダン仏壇 遥かなる旅路 main_01 -------------------------------------------------------------------------- */ /* バッジは希望小売価格ブロックの右隣へ（打消し価格の右端 307px を避ける） */ .bpriceBox--c157-01 .bpBurst { left: calc(320 * var(--u)); top: calc(495 * var(--u)); width: calc(92 * var(--u)); height: calc(92 * var(--u)); } .bpriceBox--c157-01 .bpOffMax { left: calc(330 * var(--u)); top: calc(491 * var(--u)); font-size: calc(17 * var(--u)); } .bpriceBox--c157-01 .bpOff { left: calc(324 * var(--u)); top: calc(513 * var(--u)); width: calc(84 * var(--u)); font-size: calc(30 * var(--u)); } .bpriceBox--c157-01 .bpOff .off { margin-top: calc(4 * var(--u)); font-size: calc(19 * var(--u)); } .bpriceBox--c157-01 .bpRetailTtl { left: calc( 29 * var(--u)); top: calc(520 * var(--u)); font-size: calc(12 * var(--u)); } .bpriceBox--c157-01 .bpRetailNum { left: calc( 24 * var(--u)); top: calc(546 * var(--u)); font-size: calc(23 * var(--u)); } .bpriceBox--c157-01 .bpTri { left: calc( 46 * var(--u)); top: calc(571 * var(--u)); } .bpriceBox--c157-01 .bpLead { left: calc( 34 * var(--u)); top: calc(598 * var(--u)); font-size: calc(17 * var(--u)); } .bpriceBox--c157-01 .bpLead .em { font-size: calc(21 * var(--u)); } .bpriceBox--c157-01 .bpSetNum { left: calc( 31 * var(--u)); top: calc(633 * var(--u)); font-size: calc(56 * var(--u)); } /* -------------------------------------------------------------------------- c-165 雅モダン仏壇 宙の旋律 main_01 -------------------------------------------------------------------------- */ .bpriceBox--c165-01 .bpBurst { left: calc(331 * var(--u)); top: calc(527 * var(--u)); width: calc(92 * var(--u)); height: calc(91 * var(--u)); } .bpriceBox--c165-01 .bpOffMax { left: calc(335 * var(--u)); top: calc(523 * var(--u)); font-size: calc(17 * var(--u)); } .bpriceBox--c165-01 .bpOff { left: calc(335 * var(--u)); top: calc(545 * var(--u)); width: calc(84 * var(--u)); font-size: calc(30 * var(--u)); } .bpriceBox--c165-01 .bpOff .off { margin-top: calc(4 * var(--u)); font-size: calc(19 * var(--u)); } .bpriceBox--c165-01 .bpRetailTtl { left: calc( 41 * var(--u)); top: calc(534 * var(--u)); font-size: calc(12.5 * var(--u)); } .bpriceBox--c165-01 .bpRetailNum { left: calc( 38 * var(--u)); top: calc(559 * var(--u)); font-size: calc(23 * var(--u)); } .bpriceBox--c165-01 .bpTri { left: calc( 56 * var(--u)); top: calc(584 * var(--u)); } .bpriceBox--c165-01 .bpLead { left: calc( 39 * var(--u)); top: calc(594 * var(--u)); font-size: calc(17.5 * var(--u)); } .bpriceBox--c165-01 .bpLead .em { font-size: calc(22 * var(--u)); } .bpriceBox--c165-01 .bpSetNum { left: calc( 40 * var(--u)); top: calc(631 * var(--u)); font-size: calc(54 * var(--u)); } /* -------------------------------------------------------------------------- c-186 雅モダン仏壇 あさきゆめみし main_01 -------------------------------------------------------------------------- */ .bpriceBox--c186-01 .bpBurst { left: calc(271 * var(--u)); top: calc(546 * var(--u)); width: calc(78 * var(--u)); height: calc(78 * var(--u)); } .bpriceBox--c186-01 .bpOffMax { left: calc(280 * var(--u)); top: calc(540 * var(--u)); font-size: calc(15 * var(--u)); } .bpriceBox--c186-01 .bpOff { left: calc(274 * var(--u)); top: calc(560 * var(--u)); width: calc(72 * var(--u)); font-size: calc(26 * var(--u)); } .bpriceBox--c186-01 .bpOff .off { margin-top: calc(3 * var(--u)); font-size: calc(17 * var(--u)); } .bpriceBox--c186-01 .bpRetailTtl { left: calc( 18 * var(--u)); top: calc(551 * var(--u)); font-size: calc(11 * var(--u)); } .bpriceBox--c186-01 .bpRetailNum { left: calc( 16 * var(--u)); top: calc(569 * var(--u)); font-size: calc(21 * var(--u)); } .bpriceBox--c186-01 .bpTri { left: calc( 28 * var(--u)); top: calc(594 * var(--u)); } .bpriceBox--c186-01 .bpLead { left: calc( 18 * var(--u)); top: calc(603 * var(--u)); font-size: calc(16 * var(--u)); } .bpriceBox--c186-01 .bpLead .em { font-size: calc(20 * var(--u)); } .bpriceBox--c186-01 .bpSetNum { left: calc( 21 * var(--u)); top: calc(637 * var(--u)); font-size: calc(54 * var(--u)); } /* -------------------------------------------------------------------------- c-208 雅モダン仏壇 永遠乃響 バーズアイメープル main_01 希望小売価格の表示はなく、「特別価格」バッジと価格だけ -------------------------------------------------------------------------- */ .bpriceBox--c208-01 .bpBurst { left: calc(292 * var(--u)); top: calc(545 * var(--u)); width: calc(85 * var(--u)); height: calc(85 * var(--u)); } .bpriceBox--c208-01 .bpOff { left: calc(296 * var(--u)); top: calc(560 * var(--u)); width: calc(77 * var(--u)); font-size: calc(21 * var(--u)); line-height: 1.35; } .bpriceBox--c208-01 .bpLead { left: calc( 33 * var(--u)); top: calc(591 * var(--u)); font-size: calc(17.5 * var(--u)); } .bpriceBox--c208-01 .bpLead .em { font-size: calc(22 * var(--u)); } .bpriceBox--c208-01 .bpSetNum { left: calc( 36 * var(--u)); top: calc(632 * var(--u)); font-size: calc(52 * var(--u)); } /* -------------------------------------------------------------------------- c-209 雅モダン仏壇 時重ね main_01 -------------------------------------------------------------------------- */ .bpriceBox--c209-01 .bpBurst { left: calc(299 * var(--u)); top: calc(506 * var(--u)); width: calc(111 * var(--u)); height: calc(110 * var(--u)); } .bpriceBox--c209-01 .bpOffMax { left: calc(310 * var(--u)); top: calc(504 * var(--u)); font-size: calc(19 * var(--u)); } .bpriceBox--c209-01 .bpOff { left: calc(304 * var(--u)); top: calc(530 * var(--u)); width: calc(101 * var(--u)); font-size: calc(36 * var(--u)); } .bpriceBox--c209-01 .bpOff .off { margin-top: calc(4 * var(--u)); font-size: calc(22 * var(--u)); } .bpriceBox--c209-01 .bpRetailTtl { left: calc( 27 * var(--u)); top: calc(530 * var(--u)); font-size: calc(12 * var(--u)); } .bpriceBox--c209-01 .bpRetailNum { left: calc( 26 * var(--u)); top: calc(555 * var(--u)); font-size: calc(23 * var(--u)); } .bpriceBox--c209-01 .bpTri { left: calc( 44 * var(--u)); top: calc(580 * var(--u)); } .bpriceBox--c209-01 .bpLead { left: calc( 28 * var(--u)); top: calc(594 * var(--u)); font-size: calc(17.5 * var(--u)); } .bpriceBox--c209-01 .bpLead .em { font-size: calc(22 * var(--u)); } .bpriceBox--c209-01 .bpSetNum { left: calc( 31 * var(--u)); top: calc(631 * var(--u)); font-size: calc(54 * var(--u)); } /* ========================================================================== 雅モダン仏壇シリーズ main_02（スペック画像） -------------------------------------------------------------------------- 号数ごとに .bpGroup で囲み、グループの left だけをずらす（既定 463px）。 グループ内の top は画像上の実測px、left はグループ左端からの相対px。 構成：リボンタグ／リード文／打消し価格／▼／大きい価格／赤いギザギザバッジ ========================================================================== */ /* --- シリーズ共通 ------------------------------------------------------- */ .bpriceBox--c119-02 .bpGroup, .bpriceBox--c121-02 .bpGroup, .bpriceBox--c123-02 .bpGroup, .bpriceBox--c125-02 .bpGroup, .bpriceBox--c157-02 .bpGroup, .bpriceBox--c165-02 .bpGroup, .bpriceBox--c186-02 .bpGroup, .bpriceBox--c209-02 .bpGroup { top: 0; } .bpriceBox--c119-02 .bpGroup--1, .bpriceBox--c121-02 .bpGroup--1, .bpriceBox--c123-02 .bpGroup--1, .bpriceBox--c125-02 .bpGroup--1, .bpriceBox--c157-02 .bpGroup--1, .bpriceBox--c165-02 .bpGroup--1, .bpriceBox--c186-02 .bpGroup--1, .bpriceBox--c209-02 .bpGroup--1 { left: 0; } .bpriceBox--c119-02 .bpGroup--2, .bpriceBox--c121-02 .bpGroup--2, .bpriceBox--c123-02 .bpGroup--2, .bpriceBox--c125-02 .bpGroup--2, .bpriceBox--c157-02 .bpGroup--2, .bpriceBox--c165-02 .bpGroup--2, .bpriceBox--c186-02 .bpGroup--2, .bpriceBox--c209-02 .bpGroup--2 { left: calc(463 * var(--u)); } /* 価格は赤、打消しはグレー、▼もグレー */ .bpriceBox--c119-02 .bpSetNum, .bpriceBox--c121-02 .bpSetNum, .bpriceBox--c123-02 .bpSetNum, .bpriceBox--c125-02 .bpSetNum, .bpriceBox--c157-02 .bpSetNum, .bpriceBox--c165-02 .bpSetNum, .bpriceBox--c186-02 .bpSetNum, .bpriceBox--c208-02 .bpSetNum, .bpriceBox--c209-02 .bpSetNum { color: #e8380d; } .bpriceBox--c119-02 .bpRetailNum, .bpriceBox--c121-02 .bpRetailNum, .bpriceBox--c123-02 .bpRetailNum, .bpriceBox--c125-02 .bpRetailNum, .bpriceBox--c157-02 .bpRetailNum, .bpriceBox--c165-02 .bpRetailNum, .bpriceBox--c186-02 .bpRetailNum, .bpriceBox--c209-02 .bpRetailNum { color: #808080; } .bpriceBox--c119-02 .bpTri, .bpriceBox--c121-02 .bpTri, .bpriceBox--c123-02 .bpTri, .bpriceBox--c125-02 .bpTri, .bpriceBox--c157-02 .bpTri, .bpriceBox--c165-02 .bpTri, .bpriceBox--c186-02 .bpTri, .bpriceBox--c209-02 .bpTri { color: #4d4d4d; } .bpriceBox--c119-02 .bpLead, .bpriceBox--c121-02 .bpLead, .bpriceBox--c123-02 .bpLead, .bpriceBox--c125-02 .bpLead, .bpriceBox--c157-02 .bpLead, .bpriceBox--c165-02 .bpLead, .bpriceBox--c186-02 .bpLead, .bpriceBox--c208-02 .bpLead, .bpriceBox--c209-02 .bpLead { color: #e8380d; } .bpriceBox--c119-02 .bpLead .em, .bpriceBox--c121-02 .bpLead .em, .bpriceBox--c123-02 .bpLead .em, .bpriceBox--c125-02 .bpLead .em, .bpriceBox--c157-02 .bpLead .em, .bpriceBox--c165-02 .bpLead .em, .bpriceBox--c186-02 .bpLead .em, .bpriceBox--c208-02 .bpLead .em, .bpriceBox--c209-02 .bpLead .em { color: #e8380d; } .bpriceBox--c119-02 .bpSetNum .bpTax, .bpriceBox--c121-02 .bpSetNum .bpTax, .bpriceBox--c123-02 .bpSetNum .bpTax, .bpriceBox--c125-02 .bpSetNum .bpTax, .bpriceBox--c157-02 .bpSetNum .bpTax, .bpriceBox--c208-02 .bpSetNum .bpTax { font-size: 34%; } /* (税込) が価格の下の行に置かれている商品用 */ .bpriceBox--c119-02 .bpTaxLine, .bpriceBox--c165-02 .bpTaxLine, .bpriceBox--c209-02 .bpTaxLine { color: #e8380d; } /* -------------------------------------------------------------------------- c-119 京錦 main_02（980×1130） -------------------------------------------------------------------------- */ .bpriceBox--c119-02 .bpRibbon { left: calc( 38 * var(--u)); top: calc(784 * var(--u)); width: calc(64 * var(--u)); height: calc(112 * var(--u)); font-size: calc(17 * var(--u)); } .bpriceBox--c119-02 .bpLead { left: calc(122 * var(--u)); top: calc(746 * var(--u)); font-size: calc(19 * var(--u)); } .bpriceBox--c119-02 .bpLead .em { font-size: calc(24 * var(--u)); } .bpriceBox--c119-02 .bpRetailNum { left: calc(122 * var(--u)); top: calc(783 * var(--u)); font-size: calc(26 * var(--u)); } .bpriceBox--c119-02 .bpTri { left: calc(134 * var(--u)); top: calc(813 * var(--u)); width: calc(14 * var(--u)); height: calc(9 * var(--u)); } .bpriceBox--c119-02 .bpSetNum { left: calc(123 * var(--u)); top: calc(829 * var(--u)); font-size: calc(54 * var(--u)); } .bpriceBox--c119-02 .bpTaxLine { left: calc(311 * var(--u)); top: calc(887 * var(--u)); font-size: calc(19 * var(--u)); } .bpriceBox--c119-02 .bpBurst { left: calc(392 * var(--u)); top: calc(800 * var(--u)); width: calc(84 * var(--u)); height: calc(84 * var(--u)); } .bpriceBox--c119-02 .bpOff { left: calc(396 * var(--u)); top: calc(816 * var(--u)); width: calc(76 * var(--u)); font-size: calc(26 * var(--u)); } .bpriceBox--c119-02 .bpOff .off { margin-top: calc(2 * var(--u)); font-size: calc(17 * var(--u)); } /* -------------------------------------------------------------------------- c-121 京錦 DX main_02（980×1100） -------------------------------------------------------------------------- */ .bpriceBox--c121-02 .bpRibbon { left: calc( 38 * var(--u)); top: calc(784 * var(--u)); width: calc(64 * var(--u)); height: calc(112 * var(--u)); font-size: calc(17 * var(--u)); } .bpriceBox--c121-02 .bpLead { left: calc(122 * var(--u)); top: calc(742 * var(--u)); font-size: calc(19 * var(--u)); } .bpriceBox--c121-02 .bpLead .em { font-size: calc(24 * var(--u)); } .bpriceBox--c121-02 .bpRetailNum { left: calc(119 * var(--u)); top: calc(777 * var(--u)); font-size: calc(29 * var(--u)); } .bpriceBox--c121-02 .bpTri { left: calc(191 * var(--u)); top: calc(812 * var(--u)); width: calc(16 * var(--u)); height: calc(9 * var(--u)); } .bpriceBox--c121-02 .bpSetNum { left: calc(106 * var(--u)); top: calc(820 * var(--u)); font-size: calc(55 * var(--u)); } .bpriceBox--c121-02 .bpBurst { left: calc(392 * var(--u)); top: calc(746 * var(--u)); width: calc(82 * var(--u)); height: calc(82 * var(--u)); } .bpriceBox--c121-02 .bpOff { left: calc(396 * var(--u)); top: calc(762 * var(--u)); width: calc(74 * var(--u)); font-size: calc(25 * var(--u)); } .bpriceBox--c121-02 .bpOff .off { margin-top: calc(2 * var(--u)); font-size: calc(17 * var(--u)); } /* -------------------------------------------------------------------------- c-123 京調 main_02（980×1200）　リボンは2行（43×／16号） -------------------------------------------------------------------------- */ .bpriceBox--c123-02 .bpRibbon { left: calc( 38 * var(--u)); top: calc(838 * var(--u)); width: calc(64 * var(--u)); height: calc(112 * var(--u)); font-size: calc(14 * var(--u)); } .bpriceBox--c123-02 .bpLead { left: calc(124 * var(--u)); top: calc(796 * var(--u)); font-size: calc(19 * var(--u)); } .bpriceBox--c123-02 .bpLead .em { font-size: calc(24 * var(--u)); } .bpriceBox--c123-02 .bpRetailNum { left: calc(122 * var(--u)); top: calc(826 * var(--u)); font-size: calc(29 * var(--u)); } .bpriceBox--c123-02 .bpTri { left: calc(139 * var(--u)); top: calc(861 * var(--u)); width: calc(17 * var(--u)); height: calc(11 * var(--u)); } .bpriceBox--c123-02 .bpSetNum { left: calc(118 * var(--u)); top: calc(880 * var(--u)); font-size: calc(55 * var(--u)); } .bpriceBox--c123-02 .bpBurst { left: calc(408 * var(--u)); top: calc(785 * var(--u)); width: calc(89 * var(--u)); height: calc(89 * var(--u)); } .bpriceBox--c123-02 .bpOff { left: calc(412 * var(--u)); top: calc(802 * var(--u)); width: calc(82 * var(--u)); font-size: calc(28 * var(--u)); } .bpriceBox--c123-02 .bpOff .off { margin-top: calc(2 * var(--u)); font-size: calc(18 * var(--u)); } /* -------------------------------------------------------------------------- c-125 京調 DX main_02（980×1200）　リード文は打消し価格の下 -------------------------------------------------------------------------- */ .bpriceBox--c125-02 .bpRibbon { left: calc( 38 * var(--u)); top: calc(838 * var(--u)); width: calc(64 * var(--u)); height: calc(112 * var(--u)); font-size: calc(17 * var(--u)); } .bpriceBox--c125-02 .bpRetailNum { left: calc(115 * var(--u)); top: calc(819 * var(--u)); font-size: calc(22 * var(--u)); } .bpriceBox--c125-02 .bpTri { left: calc(169 * var(--u)); top: calc(849 * var(--u)); width: calc(12 * var(--u)); height: calc(9 * var(--u)); } .bpriceBox--c125-02 .bpLead { left: calc(113 * var(--u)); top: calc(864 * var(--u)); font-size: calc(19 * var(--u)); } .bpriceBox--c125-02 .bpLead .em { font-size: calc(24 * var(--u)); } .bpriceBox--c125-02 .bpSetNum { left: calc(114 * var(--u)); top: calc(891 * var(--u)); font-size: calc(55 * var(--u)); } .bpriceBox--c125-02 .bpBurst { left: calc(379 * var(--u)); top: calc(792 * var(--u)); width: calc(89 * var(--u)); height: calc(89 * var(--u)); } .bpriceBox--c125-02 .bpOff { left: calc(383 * var(--u)); top: calc(809 * var(--u)); width: calc(81 * var(--u)); font-size: calc(28 * var(--u)); } .bpriceBox--c125-02 .bpOff .off { margin-top: calc(2 * var(--u)); font-size: calc(18 * var(--u)); } /* -------------------------------------------------------------------------- c-157 遥かなる旅路 main_02（980×1130） -------------------------------------------------------------------------- */ .bpriceBox--c157-02 .bpRibbon { left: calc( 38 * var(--u)); top: calc(784 * var(--u)); width: calc(64 * var(--u)); height: calc(112 * var(--u)); font-size: calc(17 * var(--u)); } .bpriceBox--c157-02 .bpLead { left: calc(122 * var(--u)); top: calc(743 * var(--u)); font-size: calc(19 * var(--u)); } .bpriceBox--c157-02 .bpLead .em { font-size: calc(24 * var(--u)); } .bpriceBox--c157-02 .bpRetailNum { left: calc(122 * var(--u)); top: calc(777 * var(--u)); font-size: calc(25 * var(--u)); } .bpriceBox--c157-02 .bpTri { left: calc(139 * var(--u)); top: calc(807 * var(--u)); width: calc(17 * var(--u)); height: calc(11 * var(--u)); } .bpriceBox--c157-02 .bpSetNum { left: calc(119 * var(--u)); top: calc(835 * var(--u)); font-size: calc(52 * var(--u)); } .bpriceBox--c157-02 .bpBurst { left: calc(399 * var(--u)); top: calc(749 * var(--u)); width: calc(92 * var(--u)); height: calc(92 * var(--u)); } .bpriceBox--c157-02 .bpOff { left: calc(403 * var(--u)); top: calc(766 * var(--u)); width: calc(84 * var(--u)); font-size: calc(29 * var(--u)); } .bpriceBox--c157-02 .bpOff .off { margin-top: calc(2 * var(--u)); font-size: calc(18 * var(--u)); } /* -------------------------------------------------------------------------- c-165 宙の旋律 main_02（980×1130） -------------------------------------------------------------------------- */ .bpriceBox--c165-02 .bpRibbon { left: calc( 38 * var(--u)); top: calc(784 * var(--u)); width: calc(64 * var(--u)); height: calc(112 * var(--u)); font-size: calc(17 * var(--u)); } .bpriceBox--c165-02 .bpLead { left: calc(122 * var(--u)); top: calc(746 * var(--u)); font-size: calc(19 * var(--u)); } .bpriceBox--c165-02 .bpLead .em { font-size: calc(24 * var(--u)); } .bpriceBox--c165-02 .bpRetailNum { left: calc(122 * var(--u)); top: calc(783 * var(--u)); font-size: calc(25 * var(--u)); } .bpriceBox--c165-02 .bpTri { left: calc(134 * var(--u)); top: calc(813 * var(--u)); width: calc(14 * var(--u)); height: calc(9 * var(--u)); } .bpriceBox--c165-02 .bpSetNum { left: calc(118 * var(--u)); top: calc(834 * var(--u)); font-size: calc(54 * var(--u)); } .bpriceBox--c165-02 .bpTaxLine { left: calc(313 * var(--u)); top: calc(891 * var(--u)); font-size: calc(19 * var(--u)); } .bpriceBox--c165-02 .bpBurst { left: calc(365 * var(--u)); top: calc(787 * var(--u)); width: calc(88 * var(--u)); height: calc(88 * var(--u)); } .bpriceBox--c165-02 .bpOff { left: calc(369 * var(--u)); top: calc(803 * var(--u)); width: calc(80 * var(--u)); font-size: calc(27 * var(--u)); } .bpriceBox--c165-02 .bpOff .off { margin-top: calc(2 * var(--u)); font-size: calc(18 * var(--u)); } /* -------------------------------------------------------------------------- c-186 あさきゆめみし main_02（980×1200）　(税込)表記なし -------------------------------------------------------------------------- */ .bpriceBox--c186-02 .bpRibbon { left: calc( 38 * var(--u)); top: calc(826 * var(--u)); width: calc(64 * var(--u)); height: calc(112 * var(--u)); font-size: calc(17 * var(--u)); } .bpriceBox--c186-02 .bpRetailNum { left: calc(115 * var(--u)); top: calc(807 * var(--u)); font-size: calc(23 * var(--u)); } .bpriceBox--c186-02 .bpTri { left: calc(169 * var(--u)); top: calc(837 * var(--u)); width: calc(12 * var(--u)); height: calc(9 * var(--u)); } .bpriceBox--c186-02 .bpLead { left: calc(113 * var(--u)); top: calc(851 * var(--u)); font-size: calc(19 * var(--u)); } .bpriceBox--c186-02 .bpLead .em { font-size: calc(24 * var(--u)); } .bpriceBox--c186-02 .bpSetNum { left: calc(109 * var(--u)); top: calc(880 * var(--u)); font-size: calc(57 * var(--u)); } .bpriceBox--c186-02 .bpBurst { left: calc(392 * var(--u)); top: calc(794 * var(--u)); width: calc(84 * var(--u)); height: calc(84 * var(--u)); } .bpriceBox--c186-02 .bpOff { left: calc(396 * var(--u)); top: calc(810 * var(--u)); width: calc(76 * var(--u)); font-size: calc(26 * var(--u)); } .bpriceBox--c186-02 .bpOff .off { margin-top: calc(2 * var(--u)); font-size: calc(17 * var(--u)); } /* -------------------------------------------------------------------------- c-208 永遠乃響 main_02（980×1130）　1ブロックのみ・特別価格 -------------------------------------------------------------------------- */ .bpriceBox--c208-02 .bpBurst { left: calc(370 * var(--u)); top: calc(753 * var(--u)); width: calc(84 * var(--u)); height: calc(84 * var(--u)); } .bpriceBox--c208-02 .bpOff { left: calc(374 * var(--u)); top: calc(770 * var(--u)); width: calc(76 * var(--u)); font-size: calc(21 * var(--u)); line-height: 1.35; } .bpriceBox--c208-02 .bpLead { left: calc( 42 * var(--u)); top: calc(798 * var(--u)); font-size: calc(19.5 * var(--u)); } .bpriceBox--c208-02 .bpLead .em { font-size: calc(24 * var(--u)); } .bpriceBox--c208-02 .bpSetNum { left: calc( 53 * var(--u)); top: calc(838 * var(--u)); font-size: calc(59 * var(--u)); } /* -------------------------------------------------------------------------- c-209 時重ね main_02（980×1130） -------------------------------------------------------------------------- */ .bpriceBox--c209-02 .bpRibbon { left: calc( 38 * var(--u)); top: calc(784 * var(--u)); width: calc(64 * var(--u)); height: calc(112 * var(--u)); font-size: calc(17 * var(--u)); } .bpriceBox--c209-02 .bpLead { left: calc(122 * var(--u)); top: calc(746 * var(--u)); font-size: calc(19 * var(--u)); } .bpriceBox--c209-02 .bpLead .em { font-size: calc(24 * var(--u)); } .bpriceBox--c209-02 .bpRetailNum { left: calc(122 * var(--u)); top: calc(783 * var(--u)); font-size: calc(25 * var(--u)); } .bpriceBox--c209-02 .bpTri { left: calc(134 * var(--u)); top: calc(813 * var(--u)); width: calc(14 * var(--u)); height: calc(9 * var(--u)); } .bpriceBox--c209-02 .bpSetNum { left: calc(119 * var(--u)); top: calc(834 * var(--u)); font-size: calc(54 * var(--u)); } .bpriceBox--c209-02 .bpTaxLine { left: calc(306 * var(--u)); top: calc(887 * var(--u)); font-size: calc(19 * var(--u)); } .bpriceBox--c209-02 .bpBurst { left: calc(371 * var(--u)); top: calc(784 * var(--u)); width: calc(84 * var(--u)); height: calc(84 * var(--u)); } .bpriceBox--c209-02 .bpOff { left: calc(375 * var(--u)); top: calc(800 * var(--u)); width: calc(76 * var(--u)); font-size: calc(26 * var(--u)); } .bpriceBox--c209-02 .bpOff .off { margin-top: calc(2 * var(--u)); font-size: calc(17 * var(--u)); } /* -------------------------------------------------------------------------- main_02：2つ目のグループだけバッジの左位置が違う商品 （グループの既定ずらし幅 463px では合わないので個別に上書き） -------------------------------------------------------------------------- */ .bpriceBox--c119-02 .bpGroup--2 .bpBurst { left: calc(413 * var(--u)); } .bpriceBox--c119-02 .bpGroup--2 .bpOff { left: calc(417 * var(--u)); } .bpriceBox--c121-02 .bpGroup--2 .bpBurst { left: calc(403 * var(--u)); } .bpriceBox--c121-02 .bpGroup--2 .bpOff { left: calc(407 * var(--u)); } .bpriceBox--c123-02 .bpGroup--2 .bpBurst { left: calc(394 * var(--u)); } .bpriceBox--c123-02 .bpGroup--2 .bpOff { left: calc(398 * var(--u)); } .bpriceBox--c125-02 .bpGroup--2 .bpBurst { left: calc(392 * var(--u)); } .bpriceBox--c125-02 .bpGroup--2 .bpOff { left: calc(396 * var(--u)); } .bpriceBox--c157-02 .bpGroup--2 .bpBurst { left: calc(382 * var(--u)); } .bpriceBox--c157-02 .bpGroup--2 .bpOff { left: calc(386 * var(--u)); } .bpriceBox--c165-02 .bpGroup--2 .bpBurst { left: calc(404 * var(--u)); } .bpriceBox--c165-02 .bpGroup--2 .bpOff { left: calc(408 * var(--u)); } .bpriceBox--c186-02 .bpGroup--2 .bpBurst { left: calc(409 * var(--u)); } .bpriceBox--c186-02 .bpGroup--2 .bpOff { left: calc(413 * var(--u)); } .bpriceBox--c209-02 .bpGroup--2 .bpBurst { left: calc(410 * var(--u)); } .bpriceBox--c209-02 .bpGroup--2 .bpOff { left: calc(414 * var(--u)); } /* ========================================================================== 唐木モダン仏壇 風皇シリーズ／モダン仏壇 香華・尽誠シリーズ main_01 （c-145 / c-147 / c-048 / c-066 / c-076） -------------------------------------------------------------------------- c-114 と同じ構成。半透明パネル＋メーカー希望小売価格の内訳＋合計、 放射状バッジ（最大○○％OFF）、リード文、セット価格／本体のみ価格のチップ。 c-048 / c-066 / c-076 は内訳が3行（品名と金額が別行になる行がある）。 ========================================================================== */ /* --- シリーズ共通 ------------------------------------------------------- */ .bpriceBox--c145-01 .bpSetNum, .bpriceBox--c147-01 .bpSetNum, .bpriceBox--c048-01 .bpSetNum, .bpriceBox--c066-01 .bpSetNum, .bpriceBox--c076-01 .bpSetNum { color: var(--bp-pink); } .bpriceBox--c145-01 .bpBodyNum, .bpriceBox--c147-01 .bpBodyNum, .bpriceBox--c048-01 .bpBodyNum, .bpriceBox--c066-01 .bpBodyNum, .bpriceBox--c076-01 .bpBodyNum { color: var(--bp-dark); } .bpriceBox--c145-01 .bpSetNum .bpTax, .bpriceBox--c147-01 .bpSetNum .bpTax, .bpriceBox--c048-01 .bpSetNum .bpTax, .bpriceBox--c066-01 .bpSetNum .bpTax, .bpriceBox--c076-01 .bpSetNum .bpTax { font-size: 30%; } .bpriceBox--c145-01 .bpBodyNum .bpTax, .bpriceBox--c147-01 .bpBodyNum .bpTax, .bpriceBox--c048-01 .bpBodyNum .bpTax, .bpriceBox--c066-01 .bpBodyNum .bpTax, .bpriceBox--c076-01 .bpBodyNum .bpTax { font-size: 36%; } /* リード文「相当が、仏具一式＋付属品 全部セットになって」の文字サイズ比 */ .bpriceBox--c145-01 .bpLead .em, .bpriceBox--c147-01 .bpLead .em, .bpriceBox--c048-01 .bpLead .em, .bpriceBox--c066-01 .bpLead .em, .bpriceBox--c076-01 .bpLead .em { font-size: 98%; } .bpriceBox--c145-01 .bpLead .s1, .bpriceBox--c147-01 .bpLead .s1, .bpriceBox--c048-01 .bpLead .s1, .bpriceBox--c066-01 .bpLead .s1, .bpriceBox--c076-01 .bpLead .s1 { font-size: 59%; } .bpriceBox--c145-01 .bpLead .s2, .bpriceBox--c147-01 .bpLead .s2, .bpriceBox--c048-01 .bpLead .s2, .bpriceBox--c066-01 .bpLead .s2, .bpriceBox--c076-01 .bpLead .s2 { font-size: 67%; } .bpriceBox--c145-01 .bpLead .s3, .bpriceBox--c147-01 .bpLead .s3, .bpriceBox--c048-01 .bpLead .s3, .bpriceBox--c066-01 .bpLead .s3, .bpriceBox--c076-01 .bpLead .s3 { font-size: 51%; } /* -------------------------------------------------------------------------- c-145 唐木モダン仏壇 風皇 紫檀系 main_01（980×700） -------------------------------------------------------------------------- */ .bpriceBox--c145-01 .bpPanel { left: calc( 8 * var(--u)); top: calc(397 * var(--u)); width: calc(342 * var(--u)); height: calc(120 * var(--u)); } .bpriceBox--c145-01 .bpRetailTtl { left: calc( 33 * var(--u)); top: calc(400 * var(--u)); font-size: calc(18 * var(--u)); } /* 行間 44px では2行目が区切り線（490px）と合計行に重なるため 26px に詰め、 1行目の位置が変わらないよう top を下げて相殺する */ .bpriceBox--c145-01 .bpRows { left: calc( 27 * var(--u)); top: calc(433 * var(--u)); width: calc(278 * var(--u)); font-size: calc(17 * var(--u)); line-height: calc(26 / 17); } .bpriceBox--c145-01 .bpRows .nm { font-size: calc(19 * var(--u)); } .bpriceBox--c145-01 .bpRule { left: calc( 22 * var(--u)); top: calc(490 * var(--u)); width: calc(320 * var(--u)); } .bpriceBox--c145-01 .bpTotal { left: calc( 28 * var(--u)); top: calc(494 * var(--u)); width: calc(312 * var(--u)); font-size: calc(19 * var(--u)); } .bpriceBox--c145-01 .bpBurst { left: calc(316 * var(--u)); top: calc(397 * var(--u)); width: calc(102 * var(--u)); height: calc(102 * var(--u)); } .bpriceBox--c145-01 .bpOffMax { left: calc(322 * var(--u)); top: calc(396 * var(--u)); font-size: calc(19 * var(--u)); } .bpriceBox--c145-01 .bpOff { left: calc(330 * var(--u)); top: calc(423 * var(--u)); width: calc(76 * var(--u)); font-size: calc(33 * var(--u)); } .bpriceBox--c145-01 .bpOff .off { margin-top: calc(6 * var(--u)); font-size: calc(20 * var(--u)); } .bpriceBox--c145-01 .bpLead { left: calc( 8 * var(--u)); top: calc(524 * var(--u)); font-size: calc(25.5 * var(--u)); } .bpriceBox--c145-01 .bpSetLabel { left: calc( 13 * var(--u)); top: calc(561 * var(--u)); width: calc(80 * var(--u)); height: calc(58 * var(--u)); font-size: calc(19 * var(--u)); } .bpriceBox--c145-01 .bpSetNum { left: calc(106 * var(--u)); top: calc(566 * var(--u)); font-size: calc(63 * var(--u)); } .bpriceBox--c145-01 .bpBodyLabel { left: calc( 13 * var(--u)); top: calc(635 * var(--u)); width: calc(80 * var(--u)); height: calc(50 * var(--u)); font-size: calc(17 * var(--u)); } .bpriceBox--c145-01 .bpBodyNum { left: calc(106 * var(--u)); top: calc(632 * var(--u)); font-size: calc(55 * var(--u)); } /* -------------------------------------------------------------------------- c-147 唐木モダン仏壇 風皇 本欅 main_01（980×700） -------------------------------------------------------------------------- */ .bpriceBox--c147-01 .bpPanel { left: calc( 8 * var(--u)); top: calc(400 * var(--u)); width: calc(347 * var(--u)); height: calc(122 * var(--u)); } .bpriceBox--c147-01 .bpRetailTtl { left: calc( 36 * var(--u)); top: calc(403 * var(--u)); font-size: calc(18 * var(--u)); } /* c-145 と同じ理由で行間を詰める（区切り線は 487px） */ .bpriceBox--c147-01 .bpRows { left: calc( 27 * var(--u)); top: calc(440 * var(--u)); width: calc(278 * var(--u)); font-size: calc(17 * var(--u)); line-height: calc(22 / 17); } .bpriceBox--c147-01 .bpRows .nm { font-size: calc(19 * var(--u)); } .bpriceBox--c147-01 .bpRule { left: calc( 22 * var(--u)); top: calc(487 * var(--u)); width: calc(325 * var(--u)); } .bpriceBox--c147-01 .bpTotal { left: calc( 28 * var(--u)); top: calc(500 * var(--u)); width: calc(317 * var(--u)); font-size: calc(19 * var(--u)); } .bpriceBox--c147-01 .bpBurst { left: calc(315 * var(--u)); top: calc(403 * var(--u)); width: calc(102 * var(--u)); height: calc(102 * var(--u)); } .bpriceBox--c147-01 .bpOffMax { left: calc(321 * var(--u)); top: calc(402 * var(--u)); font-size: calc(19 * var(--u)); } .bpriceBox--c147-01 .bpOff { left: calc(329 * var(--u)); top: calc(429 * var(--u)); width: calc(76 * var(--u)); font-size: calc(33 * var(--u)); } .bpriceBox--c147-01 .bpOff .off { margin-top: calc(6 * var(--u)); font-size: calc(20 * var(--u)); } .bpriceBox--c147-01 .bpLead { left: calc( 8 * var(--u)); top: calc(530 * var(--u)); font-size: calc(25.5 * var(--u)); } .bpriceBox--c147-01 .bpSetLabel { left: calc( 12 * var(--u)); top: calc(567 * var(--u)); width: calc(80 * var(--u)); height: calc(58 * var(--u)); font-size: calc(19 * var(--u)); } .bpriceBox--c147-01 .bpSetNum { left: calc(105 * var(--u)); top: calc(569 * var(--u)); font-size: calc(63 * var(--u)); } .bpriceBox--c147-01 .bpBodyLabel { left: calc( 12 * var(--u)); top: calc(641 * var(--u)); width: calc(80 * var(--u)); height: calc(50 * var(--u)); font-size: calc(17 * var(--u)); } .bpriceBox--c147-01 .bpBodyNum { left: calc(102 * var(--u)); top: calc(637 * var(--u)); font-size: calc(57 * var(--u)); } /* -------------------------------------------------------------------------- c-048 モダン仏壇 尽誠 本黒檀 main_01（980×700）　価格ブロックは右寄せ -------------------------------------------------------------------------- */ .bpriceBox--c048-01 .bpPanel { left: calc(562 * var(--u)); top: calc(392 * var(--u)); width: calc(252 * var(--u)); height: calc(122 * var(--u)); } .bpriceBox--c048-01 .bpRetailTtl { left: calc(586 * var(--u)); top: calc(400 * var(--u)); font-size: calc(17 * var(--u)); } .bpriceBox--c048-01 .bpRows { left: calc(576 * var(--u)); top: calc(423 * var(--u)); width: calc(234 * var(--u)); font-size: calc(16 * var(--u)); line-height: calc(22 / 16); } .bpriceBox--c048-01 .bpRows .nm { font-size: calc(17 * var(--u)); } .bpriceBox--c048-01 .bpRule { left: calc(568 * var(--u)); top: calc(486 * var(--u)); width: calc(244 * var(--u)); } .bpriceBox--c048-01 .bpTotal { left: calc(578 * var(--u)); top: calc(488 * var(--u)); width: calc(232 * var(--u)); font-size: calc(18 * var(--u)); } /* バッジは希望小売価格の数字（右端 812px）に掛からない位置まで右へ寄せる */ .bpriceBox--c048-01 .bpBurst { left: calc(824 * var(--u)); top: calc(407 * var(--u)); width: calc(94 * var(--u)); height: calc(94 * var(--u)); } .bpriceBox--c048-01 .bpOff { left: calc(836 * var(--u)); top: calc(425 * var(--u)); width: calc(70 * var(--u)); font-size: calc(30 * var(--u)); } .bpriceBox--c048-01 .bpOff .off { margin-top: calc(4 * var(--u)); font-size: calc(19 * var(--u)); } .bpriceBox--c048-01 .bpLead { left: calc(561 * var(--u)); top: calc(516 * var(--u)); font-size: calc(24 * var(--u)); } .bpriceBox--c048-01 .bpSetLabel { left: calc(564 * var(--u)); top: calc(553 * var(--u)); width: calc(80 * var(--u)); height: calc(58 * var(--u)); font-size: calc(19 * var(--u)); } .bpriceBox--c048-01 .bpSetNum { left: calc(651 * var(--u)); top: calc(558 * var(--u)); font-size: calc(52 * var(--u)); } .bpriceBox--c048-01 .bpBodyLabel { left: calc(564 * var(--u)); top: calc(620 * var(--u)); width: calc(80 * var(--u)); height: calc(50 * var(--u)); font-size: calc(17 * var(--u)); } .bpriceBox--c048-01 .bpBodyNum { left: calc(652 * var(--u)); top: calc(625 * var(--u)); font-size: calc(45 * var(--u)); } /* -------------------------------------------------------------------------- c-066 モダン仏壇 香華 本黒檀 main_01（980×800） -------------------------------------------------------------------------- */ .bpriceBox--c066-01 .bpPanel { left: calc( 14 * var(--u)); top: calc(495 * var(--u)); width: calc(305 * var(--u)); height: calc(128 * var(--u)); } .bpriceBox--c066-01 .bpRetailTtl { left: calc( 32 * var(--u)); top: calc(501 * var(--u)); font-size: calc(17 * var(--u)); } .bpriceBox--c066-01 .bpRows { left: calc( 32 * var(--u)); top: calc(527 * var(--u)); width: calc(270 * var(--u)); font-size: calc(16 * var(--u)); line-height: calc(22.5 / 16); } .bpriceBox--c066-01 .bpRows .nm { font-size: calc(17 * var(--u)); } .bpriceBox--c066-01 .bpRule { left: calc( 26 * var(--u)); top: calc(596 * var(--u)); width: calc(280 * var(--u)); } .bpriceBox--c066-01 .bpTotal { left: calc( 34 * var(--u)); top: calc(598 * var(--u)); width: calc(270 * var(--u)); font-size: calc(18 * var(--u)); } .bpriceBox--c066-01 .bpBurst { left: calc(317 * var(--u)); top: calc(497 * var(--u)); width: calc(102 * var(--u)); height: calc(102 * var(--u)); } .bpriceBox--c066-01 .bpOff { left: calc(331 * var(--u)); top: calc(520 * var(--u)); width: calc(74 * var(--u)); font-size: calc(32 * var(--u)); } .bpriceBox--c066-01 .bpOff .off { margin-top: calc(4 * var(--u)); font-size: calc(20 * var(--u)); } .bpriceBox--c066-01 .bpLead { left: calc( 13 * var(--u)); top: calc(629 * var(--u)); font-size: calc(24 * var(--u)); } .bpriceBox--c066-01 .bpSetLabel { left: calc( 16 * var(--u)); top: calc(665 * var(--u)); width: calc(80 * var(--u)); height: calc(58 * var(--u)); font-size: calc(19 * var(--u)); } .bpriceBox--c066-01 .bpSetNum { left: calc(149 * var(--u)); top: calc(671 * var(--u)); font-size: calc(58 * var(--u)); } .bpriceBox--c066-01 .bpBodyLabel { left: calc( 16 * var(--u)); top: calc(734 * var(--u)); width: calc(80 * var(--u)); height: calc(50 * var(--u)); font-size: calc(17 * var(--u)); } .bpriceBox--c066-01 .bpBodyNum { left: calc(149 * var(--u)); top: calc(735 * var(--u)); font-size: calc(50 * var(--u)); } /* -------------------------------------------------------------------------- c-076 モダン仏壇 香華 紫檀系 main_01（980×700） -------------------------------------------------------------------------- */ .bpriceBox--c076-01 .bpPanel { left: calc( 8 * var(--u)); top: calc(418 * var(--u)); width: calc(295 * var(--u)); height: calc(118 * var(--u)); } .bpriceBox--c076-01 .bpRetailTtl { left: calc( 24 * var(--u)); top: calc(422 * var(--u)); font-size: calc(17 * var(--u)); } .bpriceBox--c076-01 .bpRows { left: calc( 24 * var(--u)); top: calc(449 * var(--u)); width: calc(265 * var(--u)); font-size: calc(16 * var(--u)); line-height: calc(22 / 16); } .bpriceBox--c076-01 .bpRows .nm { font-size: calc(17 * var(--u)); } .bpriceBox--c076-01 .bpRule { left: calc( 18 * var(--u)); top: calc(514 * var(--u)); width: calc(275 * var(--u)); } .bpriceBox--c076-01 .bpTotal { left: calc( 26 * var(--u)); top: calc(516 * var(--u)); width: calc(265 * var(--u)); font-size: calc(18 * var(--u)); } .bpriceBox--c076-01 .bpBurst { left: calc(297 * var(--u)); top: calc(420 * var(--u)); width: calc(97 * var(--u)); height: calc(98 * var(--u)); } .bpriceBox--c076-01 .bpOff { left: calc(310 * var(--u)); top: calc(442 * var(--u)); width: calc(71 * var(--u)); font-size: calc(31 * var(--u)); } .bpriceBox--c076-01 .bpOff .off { margin-top: calc(4 * var(--u)); font-size: calc(19 * var(--u)); } .bpriceBox--c076-01 .bpLead { left: calc( 6 * var(--u)); top: calc(545 * var(--u)); font-size: calc(24 * var(--u)); } .bpriceBox--c076-01 .bpSetLabel { left: calc( 9 * var(--u)); top: calc(581 * var(--u)); width: calc(80 * var(--u)); height: calc(55 * var(--u)); font-size: calc(19 * var(--u)); } .bpriceBox--c076-01 .bpSetNum { left: calc(138 * var(--u)); top: calc(584 * var(--u)); font-size: calc(59 * var(--u)); } .bpriceBox--c076-01 .bpBodyLabel { left: calc( 9 * var(--u)); top: calc(647 * var(--u)); width: calc(80 * var(--u)); height: calc(48 * var(--u)); font-size: calc(17 * var(--u)); } .bpriceBox--c076-01 .bpBodyNum { left: calc(138 * var(--u)); top: calc(646 * var(--u)); font-size: calc(51 * var(--u)); } /* ========================================================================== c-145 / c-147 / c-048 / c-066 / c-076 main_02（スペック画像） -------------------------------------------------------------------------- c-145・c-147 は号数2グループ（.bpGroup）、c-048・c-066・c-076 は1ブロック。 ========================================================================== */ /* --- 共通 --------------------------------------------------------------- */ .bpriceBox--c145-02 .bpSetNum, .bpriceBox--c147-02 .bpSetNum, .bpriceBox--c048-02 .bpSetNum, .bpriceBox--c066-02 .bpSetNum, .bpriceBox--c076-02 .bpSetNum { color: #e8380d; } .bpriceBox--c145-02 .bpBodyNum, .bpriceBox--c147-02 .bpBodyNum, .bpriceBox--c048-02 .bpBodyNum, .bpriceBox--c066-02 .bpBodyNum, .bpriceBox--c076-02 .bpBodyNum { color: #4d4d4d; } .bpriceBox--c145-02 .bpLead, .bpriceBox--c147-02 .bpLead, .bpriceBox--c048-02 .bpLead, .bpriceBox--c066-02 .bpLead, .bpriceBox--c076-02 .bpLead { color: #e8380d; } .bpriceBox--c145-02 .bpLead .em, .bpriceBox--c147-02 .bpLead .em, .bpriceBox--c048-02 .bpLead .em, .bpriceBox--c066-02 .bpLead .em, .bpriceBox--c076-02 .bpLead .em { color: #e8380d; font-size: calc(19 * var(--u)); } .bpriceBox--c145-02 .bpRetailNum, .bpriceBox--c147-02 .bpRetailNum, .bpriceBox--c048-02 .bpRetailNum, .bpriceBox--c066-02 .bpRetailNum, .bpriceBox--c076-02 .bpRetailNum { color: #808080; letter-spacing: calc(4 * var(--u)); } .bpriceBox--c145-02 .bpRetailTtl, .bpriceBox--c147-02 .bpRetailTtl, .bpriceBox--c048-02 .bpRetailTtl, .bpriceBox--c066-02 .bpRetailTtl, .bpriceBox--c076-02 .bpRetailTtl { color: #808080; } .bpriceBox--c145-02 .bpSetNum .bpTax, .bpriceBox--c147-02 .bpSetNum .bpTax, .bpriceBox--c048-02 .bpSetNum .bpTax, .bpriceBox--c066-02 .bpSetNum .bpTax, .bpriceBox--c076-02 .bpSetNum .bpTax { font-size: 36%; } .bpriceBox--c145-02 .bpBodyNum .bpTax, .bpriceBox--c147-02 .bpBodyNum .bpTax, .bpriceBox--c048-02 .bpBodyNum .bpTax, .bpriceBox--c066-02 .bpBodyNum .bpTax, .bpriceBox--c076-02 .bpBodyNum .bpTax { font-size: 40%; } /* -------------------------------------------------------------------------- c-145 main_02（980×1200）　16号／18号 -------------------------------------------------------------------------- */ .bpriceBox--c145-02 .bpGroup { top: 0; } .bpriceBox--c145-02 .bpGroup--1 { left: calc( 33 * var(--u)); } .bpriceBox--c145-02 .bpGroup--2 { left: calc(467 * var(--u)); } .bpriceBox--c145-02 .bpRetailTtl { left: calc( 36 * var(--u)); top: calc(751 * var(--u)); font-size: calc(12 * var(--u)); } .bpriceBox--c145-02 .bpRetailNum { left: calc( 76 * var(--u)); top: calc(770 * var(--u)); font-size: calc(21 * var(--u)); } .bpriceBox--c145-02 .bpBurst { left: calc(238 * var(--u)); top: calc(739 * var(--u)); width: calc(100 * var(--u)); height: calc(100 * var(--u)); } .bpriceBox--c145-02 .bpOff { left: calc(242 * var(--u)); top: calc(757 * var(--u)); width: calc(92 * var(--u)); font-size: calc(31 * var(--u)); } .bpriceBox--c145-02 .bpOff .off { margin-top: calc(3 * var(--u)); font-size: calc(20 * var(--u)); } .bpriceBox--c145-02 .bpLead { left: calc( 0 * var(--u)); top: calc(806 * var(--u)); font-size: calc(15 * var(--u)); } .bpriceBox--c145-02 .bpSetLabel { left: calc( 0 * var(--u)); top: calc(847 * var(--u)); width: calc(96 * var(--u)); height: calc(32 * var(--u)); font-size: calc(19 * var(--u)); } .bpriceBox--c145-02 .bpSetNum { left: calc(105 * var(--u)); top: calc(843 * var(--u)); font-size: calc(50 * var(--u)); } .bpriceBox--c145-02 .bpBodyLabel { left: calc( -3 * var(--u)); top: calc(901 * var(--u)); width: calc(96 * var(--u)); height: calc(30 * var(--u)); font-size: calc(16 * var(--u)); } .bpriceBox--c145-02 .bpBodyNum { left: calc(105 * var(--u)); top: calc(903 * var(--u)); font-size: calc(43 * var(--u)); } /* -------------------------------------------------------------------------- c-147 main_02（980×1250）　16号／18号 -------------------------------------------------------------------------- */ .bpriceBox--c147-02 .bpGroup { top: 0; } .bpriceBox--c147-02 .bpGroup--1 { left: calc( 31 * var(--u)); } .bpriceBox--c147-02 .bpGroup--2 { left: calc(454 * var(--u)); } .bpriceBox--c147-02 .bpRetailTtl { left: calc( 36 * var(--u)); top: calc(781 * var(--u)); font-size: calc(12 * var(--u)); } .bpriceBox--c147-02 .bpRetailNum { left: calc( 77 * var(--u)); top: calc(800 * var(--u)); font-size: calc(21 * var(--u)); } .bpriceBox--c147-02 .bpBurst { left: calc(246 * var(--u)); top: calc(770 * var(--u)); width: calc(84 * var(--u)); height: calc(84 * var(--u)); } .bpriceBox--c147-02 .bpOff { left: calc(250 * var(--u)); top: calc(786 * var(--u)); width: calc(76 * var(--u)); font-size: calc(26 * var(--u)); } .bpriceBox--c147-02 .bpOff .off { margin-top: calc(2 * var(--u)); font-size: calc(17 * var(--u)); } .bpriceBox--c147-02 .bpLead { left: calc( 0 * var(--u)); top: calc(834 * var(--u)); font-size: calc(15 * var(--u)); } .bpriceBox--c147-02 .bpSetLabel { left: calc( 0 * var(--u)); top: calc(877 * var(--u)); width: calc(98 * var(--u)); height: calc(34 * var(--u)); font-size: calc(20 * var(--u)); } .bpriceBox--c147-02 .bpSetNum { left: calc(103 * var(--u)); top: calc(872 * var(--u)); font-size: calc(50 * var(--u)); } .bpriceBox--c147-02 .bpBodyLabel { left: calc( -1 * var(--u)); top: calc(935 * var(--u)); width: calc(98 * var(--u)); height: calc(34 * var(--u)); font-size: calc(16 * var(--u)); } .bpriceBox--c147-02 .bpBodyNum { left: calc(107 * var(--u)); top: calc(934 * var(--u)); font-size: calc(44 * var(--u)); } /* -------------------------------------------------------------------------- c-048 main_02（980×906）　1ブロック -------------------------------------------------------------------------- */ .bpriceBox--c048-02 .bpRetailTtl { left: calc( 74 * var(--u)); top: calc(502 * var(--u)); font-size: calc(12 * var(--u)); } .bpriceBox--c048-02 .bpRetailNum { left: calc(113 * var(--u)); top: calc(522 * var(--u)); font-size: calc(21 * var(--u)); } .bpriceBox--c048-02 .bpBurst { left: calc(289 * var(--u)); top: calc(484 * var(--u)); width: calc(88 * var(--u)); height: calc(88 * var(--u)); } .bpriceBox--c048-02 .bpOff { left: calc(293 * var(--u)); top: calc(501 * var(--u)); width: calc(80 * var(--u)); font-size: calc(27 * var(--u)); } .bpriceBox--c048-02 .bpOff .off { margin-top: calc(2 * var(--u)); font-size: calc(18 * var(--u)); } .bpriceBox--c048-02 .bpLead { left: calc( 36 * var(--u)); top: calc(563 * var(--u)); font-size: calc(15 * var(--u)); } .bpriceBox--c048-02 .bpSetLabel { left: calc( 35 * var(--u)); top: calc(614 * var(--u)); width: calc(92 * var(--u)); height: calc(30 * var(--u)); font-size: calc(15 * var(--u)); } .bpriceBox--c048-02 .bpSetNum { left: calc(133 * var(--u)); top: calc(607 * var(--u)); font-size: calc(55 * var(--u)); } .bpriceBox--c048-02 .bpBodyLabel { left: calc(476 * var(--u)); top: calc(614 * var(--u)); width: calc(92 * var(--u)); height: calc(30 * var(--u)); font-size: calc(15 * var(--u)); } .bpriceBox--c048-02 .bpBodyNum { left: calc(575 * var(--u)); top: calc(610 * var(--u)); font-size: calc(48 * var(--u)); } /* -------------------------------------------------------------------------- c-066 main_02（980×1105）　1ブロック -------------------------------------------------------------------------- */ .bpriceBox--c066-02 .bpRetailTtl { left: calc( 43 * var(--u)); top: calc(646 * var(--u)); font-size: calc(12 * var(--u)); } .bpriceBox--c066-02 .bpRetailNum { left: calc( 45 * var(--u)); top: calc(672 * var(--u)); font-size: calc(21 * var(--u)); } /* バッジはリード文の右隣（リード文の右端 263px）へ寄せ、下のセット価格（上端 770px）に 掛からないよう上へずらす */ .bpriceBox--c066-02 .bpBurst { left: calc(275 * var(--u)); top: calc(688 * var(--u)); width: calc(78 * var(--u)); height: calc(78 * var(--u)); } .bpriceBox--c066-02 .bpOff { left: calc(279 * var(--u)); top: calc(703 * var(--u)); width: calc(70 * var(--u)); font-size: calc(24 * var(--u)); } .bpriceBox--c066-02 .bpOff .off { margin-top: calc(2 * var(--u)); font-size: calc(16 * var(--u)); } .bpriceBox--c066-02 .bpLead { left: calc( 45 * var(--u)); top: calc(736 * var(--u)); font-size: calc(15 * var(--u)); } .bpriceBox--c066-02 .bpSetLabel { left: calc( 35 * var(--u)); top: calc(791 * var(--u)); width: calc(92 * var(--u)); height: calc(30 * var(--u)); font-size: calc(15 * var(--u)); } .bpriceBox--c066-02 .bpSetNum { left: calc(131 * var(--u)); top: calc(770 * var(--u)); font-size: calc(55 * var(--u)); } .bpriceBox--c066-02 .bpBodyLabel { left: calc(497 * var(--u)); top: calc(791 * var(--u)); width: calc(92 * var(--u)); height: calc(30 * var(--u)); font-size: calc(15 * var(--u)); } .bpriceBox--c066-02 .bpBodyNum { left: calc(595 * var(--u)); top: calc(774 * var(--u)); font-size: calc(48 * var(--u)); } /* -------------------------------------------------------------------------- c-076 main_02（980×1051）　1ブロック -------------------------------------------------------------------------- */ .bpriceBox--c076-02 .bpRetailTtl { left: calc( 53 * var(--u)); top: calc(588 * var(--u)); font-size: calc(12 * var(--u)); } .bpriceBox--c076-02 .bpRetailNum { left: calc( 57 * var(--u)); top: calc(622 * var(--u)); font-size: calc(21 * var(--u)); } /* バッジはリード文の右隣（リード文の右端 348px）へ寄せ、下のセット価格（上端 729px）と 「本体のみ」チップ（上端 733px）に掛からないよう上へずらす */ .bpriceBox--c076-02 .bpBurst { left: calc(370 * var(--u)); top: calc(646 * var(--u)); width: calc(79 * var(--u)); height: calc(79 * var(--u)); } .bpriceBox--c076-02 .bpOff { left: calc(374 * var(--u)); top: calc(661 * var(--u)); width: calc(71 * var(--u)); font-size: calc(24 * var(--u)); } .bpriceBox--c076-02 .bpOff .off { margin-top: calc(2 * var(--u)); font-size: calc(16 * var(--u)); } .bpriceBox--c076-02 .bpLead { left: calc(125 * var(--u)); top: calc(685 * var(--u)); font-size: calc(15 * var(--u)); } .bpriceBox--c076-02 .bpSetLabel { left: calc( 36 * var(--u)); top: calc(742 * var(--u)); width: calc(92 * var(--u)); height: calc(30 * var(--u)); font-size: calc(15 * var(--u)); } .bpriceBox--c076-02 .bpSetNum { left: calc(129 * var(--u)); top: calc(729 * var(--u)); font-size: calc(55 * var(--u)); } .bpriceBox--c076-02 .bpBodyLabel { left: calc(475 * var(--u)); top: calc(733 * var(--u)); width: calc(92 * var(--u)); height: calc(30 * var(--u)); font-size: calc(15 * var(--u)); } /* 「本体のみ」チップ（右端 567px）に数字が重ならないよう右へ出す */ .bpriceBox--c076-02 .bpBodyNum { left: calc(575 * var(--u)); top: calc(737 * var(--u)); font-size: calc(48 * var(--u)); } /* ========================================================================== c-006 モダン仏壇 尽誠 紫檀系 mein01.jpg（マスター 800 × 1100） -------------------------------------------------------------------------- 黒パネルに白抜き。希望小売価格は赤い×印で消してある（.bpCross）。 マスター画像の幅が 800px なので --u を上書きする。 ========================================================================== */ @supports (container-type: inline-size) { .bpriceBox--c006-01 { --u: calc(100cqw / 800); } } /* item3.css の .bpCross が position:relative を当てるため .bpItem の絶対配置が 打ち消され、価格が画像の下に流れてしまう。両方付く場合は絶対配置に戻す */ .bpriceBox .bpItem.bpCross { position: absolute; } .bpriceBox--c006-01 .bpRetailTtl { left: calc( 24 * var(--u)); top: calc(974 * var(--u)); font-size: calc(13 * var(--u)); line-height: calc(19 / 13); color: #ffffff; } .bpriceBox--c006-01 .bpRetailNum { left: calc( 33 * var(--u)); top: calc(1015 * var(--u)); font-size: calc(21 * var(--u)); color: #ffffff; } .bpriceBox--c006-01 .bpTri { left: calc(164 * var(--u)); top: calc(995 * var(--u)); width: calc(20 * var(--u)); height: calc(27 * var(--u)); color: #ffffff; } .bpriceBox--c006-01 .bpLead { left: calc(194 * var(--u)); top: calc(989 * var(--u)); font-size: calc(17 * var(--u)); line-height: calc(24 / 17); color: #ffffff; } .bpriceBox--c006-01 .bpLead .em, .bpriceBox--c006-01 .bpLead .dk { color: #ffffff; font-size: 100%; } /* リード文「…が」の末尾に掛からない位置まで右へ（リード文の右端 347px） */ .bpriceBox--c006-01 .bpSetNum { left: calc(352 * var(--u)); top: calc(980 * var(--u)); font-size: calc(49 * var(--u)); color: #ffffff; } .bpriceBox--c006-01 .bpTaxLine { left: calc(506 * var(--u)); top: calc(1032 * var(--u)); font-size: calc(19 * var(--u)); color: #ffffff; } .bpriceBox--c006-01 .bpBurst { left: calc(435 * var(--u)); top: calc(808 * var(--u)); width: calc(131 * var(--u)); height: calc(131 * var(--u)); } .bpriceBox--c006-01 .bpOff { left: calc(443 * var(--u)); top: calc(843 * var(--u)); width: calc(115 * var(--u)); font-size: calc(52 * var(--u)); } .bpriceBox--c006-01 .bpOff .off { margin-top: calc(-7 * var(--u)); font-size: calc(34 * var(--u)); } /* ========================================================================== c-319 永遠桜 黒檀 main.jpg（マスター 978 × 700） -------------------------------------------------------------------------- c-114 と同じ構成。マスター画像の幅が 978px なので --u を上書きする。 ========================================================================== */ @supports (container-type: inline-size) { .bpriceBox--c319-01 { --u: calc(100cqw / 978); } } .bpriceBox--c319-01 .bpPanel { left: calc( 0 * var(--u)); top: calc(383 * var(--u)); width: calc(382 * var(--u)); height: calc(131 * var(--u)); } .bpriceBox--c319-01 .bpRetailTtl { left: calc( 24 * var(--u)); top: calc(391 * var(--u)); font-size: calc(18 * var(--u)); } .bpriceBox--c319-01 .bpRows { left: calc( 26 * var(--u)); top: calc(418 * var(--u)); width: calc(308 * var(--u)); font-size: calc(17 * var(--u)); line-height: calc(24 / 17); } .bpriceBox--c319-01 .bpRows .nm { font-size: calc(18 * var(--u)); } .bpriceBox--c319-01 .bpRule { left: calc( 20 * var(--u)); top: calc(477 * var(--u)); width: calc(350 * var(--u)); } .bpriceBox--c319-01 .bpTotal { left: calc( 26 * var(--u)); top: calc(484 * var(--u)); width: calc(345 * var(--u)); font-size: calc(19 * var(--u)); } .bpriceBox--c319-01 .bpBurst { left: calc(348 * var(--u)); top: calc(389 * var(--u)); width: calc(102 * var(--u)); height: calc(103 * var(--u)); } .bpriceBox--c319-01 .bpOff { left: calc(356 * var(--u)); top: calc(414 * var(--u)); width: calc(86 * var(--u)); font-size: calc(30 * var(--u)); } .bpriceBox--c319-01 .bpOff .off { margin-top: calc(4 * var(--u)); font-size: calc(20 * var(--u)); } .bpriceBox--c319-01 .bpLead { left: calc( 20 * var(--u)); top: calc(522 * var(--u)); font-size: calc(25 * var(--u)); } .bpriceBox--c319-01 .bpLead .em { font-size: 98%; } .bpriceBox--c319-01 .bpLead .s1 { font-size: 62%; } .bpriceBox--c319-01 .bpLead .s2 { font-size: 70%; } .bpriceBox--c319-01 .bpLead .s3 { font-size: 54%; } .bpriceBox--c319-01 .bpSetLabel { left: calc( 21 * var(--u)); top: calc(564 * var(--u)); width: calc(80 * var(--u)); height: calc(58 * var(--u)); font-size: calc(19 * var(--u)); } .bpriceBox--c319-01 .bpSetNum { left: calc(114 * var(--u)); top: calc(565 * var(--u)); font-size: calc(60 * var(--u)); color: var(--bp-pink); } .bpriceBox--c319-01 .bpSetNum .bpTax { font-size: 30%; } .bpriceBox--c319-01 .bpBodyLabel { left: calc( 21 * var(--u)); top: calc(638 * var(--u)); width: calc(80 * var(--u)); height: calc(50 * var(--u)); font-size: calc(17 * var(--u)); } .bpriceBox--c319-01 .bpBodyNum { left: calc(114 * var(--u)); top: calc(639 * var(--u)); font-size: calc(52 * var(--u)); color: var(--bp-dark); } .bpriceBox--c319-01 .bpBodyNum .bpTax { font-size: 36%; } /* ========================================================================== 唐木仏壇シリーズ（d-069 / d-107 / d-108 / d-300 / d-305 / d-310 / d-316 / d-328 / d-333） -------------------------------------------------------------------------- main_02 には価格の記載がないため対象外。main_01（メインビジュアル）と main_03（号数別のサイズ表）だけをテキスト化する。 ■ main_03 のグループの使い方（main_02 とは基準が違うので注意） 号数ブロックが格子状に並ぶので、.bpGroup に left と top の両方を指定し、 ブロック内の要素は「そのブロックの左上からの相対px」で書く。 （main_02 では left だけをずらし、top は画像上の実測pxで書いている） ========================================================================== */ /* --- d系 共通の色 ------------------------------------------------------- */ .bpriceBox--d069-01 .bpSetNum, .bpriceBox--d107-01 .bpSetNum, .bpriceBox--d108-01 .bpSetNum, .bpriceBox--d316-01 .bpSetNum, .bpriceBox--d328-01 .bpSetNum, .bpriceBox--d333-01 .bpSetNum, .bpriceBox--d300-01 .bpSetNum, .bpriceBox--d305-01 .bpSetNum, .bpriceBox--d310-01 .bpSetNum, .bpriceBox--d069-03 .bpSetNum, .bpriceBox--d316-03 .bpSetNum, .bpriceBox--d328-03 .bpSetNum, .bpriceBox--d333-03 .bpSetNum, .bpriceBox--d300-03 .bpSetNum, .bpriceBox--d305-03 .bpSetNum, .bpriceBox--d310-03 .bpSetNum, .bpriceBox--d107-03 .bpSetNum, .bpriceBox--d108-03 .bpSetNum { color: var(--bp-pink); } .bpriceBox--d300-01 .bpBodyNum, .bpriceBox--d305-01 .bpBodyNum, .bpriceBox--d310-01 .bpBodyNum, .bpriceBox--d300-03 .bpBodyNum, .bpriceBox--d305-03 .bpBodyNum, .bpriceBox--d310-03 .bpBodyNum { color: var(--bp-dark); } .bpriceBox--d069-01 .bpLead, .bpriceBox--d107-01 .bpLead, .bpriceBox--d108-01 .bpLead, .bpriceBox--d316-01 .bpLead, .bpriceBox--d328-01 .bpLead, .bpriceBox--d333-01 .bpLead, .bpriceBox--d069-03 .bpLead, .bpriceBox--d316-03 .bpLead, .bpriceBox--d328-03 .bpLead, .bpriceBox--d333-03 .bpLead, .bpriceBox--d107-03 .bpLead, .bpriceBox--d108-03 .bpLead { color: var(--bp-pink); } /* ========================================================================== main_01（メインビジュアル 980×700） ========================================================================== */ /* --- d-069 唐木仏壇 桜浪漫 紫檀系 --------------------------------------- */ .bpriceBox--d069-01 .bpPanel { left: calc( 8 * var(--u)); top: calc(472 * var(--u)); width: calc(330 * var(--u)); height: calc(112 * var(--u)); } .bpriceBox--d069-01 .bpRetailTtl { left: calc( 26 * var(--u)); top: calc(476 * var(--u)); font-size: calc(16 * var(--u)); } .bpriceBox--d069-01 .bpRows { left: calc( 30 * var(--u)); top: calc(501 * var(--u)); width: calc(290 * var(--u)); font-size: calc(16 * var(--u)); line-height: calc(20 / 16); } .bpriceBox--d069-01 .bpRows .nm { font-size: calc(16 * var(--u)); } .bpriceBox--d069-01 .bpRule { left: calc( 22 * var(--u)); top: calc(548 * var(--u)); width: calc(310 * var(--u)); } .bpriceBox--d069-01 .bpTotal { left: calc( 28 * var(--u)); top: calc(552 * var(--u)); width: calc(300 * var(--u)); font-size: calc(17 * var(--u)); } /* バッジが希望小売価格の数字（右端 329px）に掛かるので右へ寄せる */ .bpriceBox--d069-01 .bpBurst { left: calc(342 * var(--u)); top: calc(474 * var(--u)); width: calc(72 * var(--u)); height: calc(72 * var(--u)); } .bpriceBox--d069-01 .bpOffMax { left: calc(346 * var(--u)); top: calc(470 * var(--u)); font-size: calc(13 * var(--u)); } .bpriceBox--d069-01 .bpOff { left: calc(346 * var(--u)); top: calc(488 * var(--u)); width: calc(64 * var(--u)); font-size: calc(24 * var(--u)); } .bpriceBox--d069-01 .bpOff .off { margin-top: calc(2 * var(--u)); font-size: calc(15 * var(--u)); } .bpriceBox--d069-01 .bpLead { left: calc( 18 * var(--u)); top: calc(594 * var(--u)); font-size: calc(19 * var(--u)); } .bpriceBox--d069-01 .bpLead .em { font-size: calc(24 * var(--u)); } .bpriceBox--d069-01 .bpSetNum { left: calc( 21 * var(--u)); top: calc(627 * var(--u)); font-size: calc(60 * var(--u)); } .bpriceBox--d069-01 .bpSetNum .bpTax { font-size: 30%; } /* --- d-107 唐木仏壇 平等院栄花 黒檀 ------------------------------------- */ .bpriceBox--d107-01 .bpLead { left: calc( 16 * var(--u)); top: calc(594 * var(--u)); font-size: calc(19 * var(--u)); } .bpriceBox--d107-01 .bpLead .em { font-size: calc(24 * var(--u)); } .bpriceBox--d107-01 .bpSetNum { left: calc( 23 * var(--u)); top: calc(630 * var(--u)); font-size: calc(54 * var(--u)); } .bpriceBox--d107-01 .bpSetNum .bpTax { font-size: 32%; } /* バッジを d-300 と同じ 100px に拡大。右端はパネル（左端 712px）の手前で止める */ .bpriceBox--d107-01 .bpBurst { left: calc(595 * var(--u)); top: calc(545 * var(--u)); width: calc(115 * var(--u)); height: calc(115 * var(--u)); } .bpriceBox--d107-01 .bpOff { left: calc(602 * var(--u)); top: calc(569 * var(--u)); width: calc(101 * var(--u)); font-size: calc(37 * var(--u)); } .bpriceBox--d107-01 .bpOff .off { margin-top: calc(3 * var(--u)); font-size: calc(23 * var(--u)); } /* パネルを一回り広げ、中身を左へ4px寄せて文字まわりに5px前後の余白をつくる */ .bpriceBox--d107-01 .bpPanel { left: calc(712 * var(--u)); top: calc(574 * var(--u)); width: calc(264 * var(--u)); height: calc(112 * var(--u)); } .bpriceBox--d107-01 .bpRetailTtl { left: calc(720 * var(--u)); top: calc(581 * var(--u)); font-size: calc(15 * var(--u)); } .bpriceBox--d107-01 .bpRows { left: calc(722 * var(--u)); top: calc(603 * var(--u)); width: calc(244 * var(--u)); font-size: calc(15 * var(--u)); line-height: calc(20 / 15); } .bpriceBox--d107-01 .bpRule { left: calc(716 * var(--u)); top: calc(652 * var(--u)); width: calc(254 * var(--u)); } .bpriceBox--d107-01 .bpTotal { left: calc(722 * var(--u)); top: calc(656 * var(--u)); width: calc(244 * var(--u)); font-size: calc(16 * var(--u)); } /* --- d-108 唐木仏壇 平等院栄花 紫檀 ------------------------------------- */ .bpriceBox--d108-01 .bpLead { left: calc( 26 * var(--u)); top: calc(594 * var(--u)); font-size: calc(19 * var(--u)); } .bpriceBox--d108-01 .bpLead .em { font-size: calc(24 * var(--u)); } .bpriceBox--d108-01 .bpSetNum { left: calc( 31 * var(--u)); top: calc(629 * var(--u)); font-size: calc(54 * var(--u)); } .bpriceBox--d108-01 .bpSetNum .bpTax { font-size: 32%; } /* バッジを d-300 と同じ 100px に拡大。右端はパネル（左端 656px）の手前で止める */ .bpriceBox--d108-01 .bpBurst { left: calc(534 * var(--u)); top: calc(550 * var(--u)); width: calc(115 * var(--u)); height: calc(115 * var(--u)); } .bpriceBox--d108-01 .bpOff { left: calc(541 * var(--u)); top: calc(574 * var(--u)); width: calc(101 * var(--u)); font-size: calc(37 * var(--u)); } .bpriceBox--d108-01 .bpOff .off { margin-top: calc(3 * var(--u)); font-size: calc(23 * var(--u)); } /* d-107 と同じく文字まわりに5px前後の余白をつくる */ .bpriceBox--d108-01 .bpPanel { left: calc(656 * var(--u)); top: calc(574 * var(--u)); width: calc(320 * var(--u)); height: calc(112 * var(--u)); } .bpriceBox--d108-01 .bpRetailTtl { left: calc(664 * var(--u)); top: calc(581 * var(--u)); font-size: calc(15 * var(--u)); } .bpriceBox--d108-01 .bpRows { left: calc(666 * var(--u)); top: calc(603 * var(--u)); width: calc(300 * var(--u)); font-size: calc(15 * var(--u)); line-height: calc(20 / 15); } .bpriceBox--d108-01 .bpRule { left: calc(660 * var(--u)); top: calc(652 * var(--u)); width: calc(310 * var(--u)); } .bpriceBox--d108-01 .bpTotal { left: calc(666 * var(--u)); top: calc(656 * var(--u)); width: calc(300 * var(--u)); font-size: calc(16 * var(--u)); } /* --- d-316 唐木仏壇 法隆寺夢殿 紫檀 ------------------------------------- */ /* パネル下端がリード文（上端 600px）に掛かっていたので 5px 空くまで縮める */ .bpriceBox--d316-01 .bpPanel { left: calc( 8 * var(--u)); top: calc(492 * var(--u)); width: calc(340 * var(--u)); height: calc(103 * var(--u)); } .bpriceBox--d316-01 .bpRows { left: calc( 18 * var(--u)); top: calc(497 * var(--u)); width: calc(310 * var(--u)); font-size: calc(16 * var(--u)); line-height: calc(24 / 16); } .bpriceBox--d316-01 .bpRule { left: calc( 14 * var(--u)); top: calc(553 * var(--u)); width: calc(320 * var(--u)); } .bpriceBox--d316-01 .bpTotal { left: calc( 18 * var(--u)); top: calc(557 * var(--u)); width: calc(310 * var(--u)); font-size: calc(17 * var(--u)); } /* 金額の右端（328px）に掛からない位置まで右へ出し、パネル（492〜595px）の 上下中央に来るまで下げる */ /* バッジを d-300 と同じ 100px に拡大。金額の右端 328px とリード文の上端 600px を避ける */ .bpriceBox--d316-01 .bpBurst { left: calc(332 * var(--u)); top: calc(480 * var(--u)); width: calc(115 * var(--u)); height: calc(115 * var(--u)); } .bpriceBox--d316-01 .bpOff { left: calc(339 * var(--u)); top: calc(504 * var(--u)); width: calc(101 * var(--u)); font-size: calc(37 * var(--u)); } .bpriceBox--d316-01 .bpOff .off { margin-top: calc(3 * var(--u)); font-size: calc(23 * var(--u)); } .bpriceBox--d316-01 .bpLead { left: calc( 16 * var(--u)); top: calc(600 * var(--u)); font-size: calc(19 * var(--u)); } .bpriceBox--d316-01 .bpLead .em { font-size: calc(24 * var(--u)); } .bpriceBox--d316-01 .bpSetNum { left: calc( 17 * var(--u)); top: calc(632 * var(--u)); font-size: calc(55 * var(--u)); } .bpriceBox--d316-01 .bpSetNum .bpTax { font-size: 30%; } /* --- d-328 唐木仏壇 平等院栄花 本黒檀 ----------------------------------- */ /* パネル下端がリード文（上端 543px）に掛かっていたので 5px 空くまで縮める */ .bpriceBox--d328-01 .bpPanel { left: calc( 8 * var(--u)); top: calc(440 * var(--u)); width: calc(330 * var(--u)); height: calc( 98 * var(--u)); } .bpriceBox--d328-01 .bpRows { left: calc( 20 * var(--u)); top: calc(444 * var(--u)); width: calc(300 * var(--u)); font-size: calc(16 * var(--u)); line-height: calc(24 / 16); } .bpriceBox--d328-01 .bpRule { left: calc( 14 * var(--u)); top: calc(500 * var(--u)); width: calc(315 * var(--u)); } .bpriceBox--d328-01 .bpTotal { left: calc( 20 * var(--u)); top: calc(504 * var(--u)); width: calc(300 * var(--u)); font-size: calc(16 * var(--u)); } /* 金額の右端（320px）に掛からない位置まで右へ出し、パネル（440〜538px）の 上下中央に来るまで下げる */ .bpriceBox--d328-01 .bpBurst { left: calc(330 * var(--u)); top: calc(453 * var(--u)); width: calc(72 * var(--u)); height: calc(72 * var(--u)); } .bpriceBox--d328-01 .bpOff { left: calc(334 * var(--u)); top: calc(467 * var(--u)); width: calc(64 * var(--u)); font-size: calc(24 * var(--u)); } .bpriceBox--d328-01 .bpOff .off { margin-top: calc(2 * var(--u)); font-size: calc(15 * var(--u)); } .bpriceBox--d328-01 .bpLead { left: calc( 18 * var(--u)); top: calc(543 * var(--u)); font-size: calc(19 * var(--u)); } .bpriceBox--d328-01 .bpLead .em { font-size: calc(24 * var(--u)); } .bpriceBox--d328-01 .bpSetNum { left: calc( 22 * var(--u)); top: calc(575 * var(--u)); font-size: calc(49 * var(--u)); line-height: calc(60 / 49); white-space: normal; width: calc(420 * var(--u)); } .bpriceBox--d328-01 .bpSetNum .bpTax { font-size: 32%; } /* --- d-333 唐木仏壇 平等院栄花 紫檀 ------------------------------------- */ /* d-328 と同様にパネル下端がリード文に掛かっていたので縮める */ .bpriceBox--d333-01 .bpPanel { left: calc( 8 * var(--u)); top: calc(440 * var(--u)); width: calc(330 * var(--u)); height: calc( 98 * var(--u)); } .bpriceBox--d333-01 .bpRows { left: calc( 20 * var(--u)); top: calc(444 * var(--u)); width: calc(300 * var(--u)); font-size: calc(16 * var(--u)); line-height: calc(24 / 16); } .bpriceBox--d333-01 .bpRule { left: calc( 14 * var(--u)); top: calc(500 * var(--u)); width: calc(315 * var(--u)); } .bpriceBox--d333-01 .bpTotal { left: calc( 20 * var(--u)); top: calc(504 * var(--u)); width: calc(300 * var(--u)); font-size: calc(16 * var(--u)); } /* d-328 と同じく金額を避けてパネルの上下中央へ */ /* バッジを d-300 と同じ 100px に拡大。金額の右端 320px とリード文の上端 543px を避ける */ .bpriceBox--d333-01 .bpBurst { left: calc(326 * var(--u)); top: calc(423 * var(--u)); width: calc(115 * var(--u)); height: calc(115 * var(--u)); } .bpriceBox--d333-01 .bpOff { left: calc(333 * var(--u)); top: calc(447 * var(--u)); width: calc(101 * var(--u)); font-size: calc(37 * var(--u)); } .bpriceBox--d333-01 .bpOff .off { margin-top: calc(3 * var(--u)); font-size: calc(23 * var(--u)); } .bpriceBox--d333-01 .bpLead { left: calc( 18 * var(--u)); top: calc(543 * var(--u)); font-size: calc(19 * var(--u)); } .bpriceBox--d333-01 .bpLead .em { font-size: calc(24 * var(--u)); } .bpriceBox--d333-01 .bpSetNum { left: calc( 22 * var(--u)); top: calc(575 * var(--u)); font-size: calc(52 * var(--u)); line-height: calc(60 / 52); white-space: normal; width: calc(420 * var(--u)); } .bpriceBox--d333-01 .bpSetNum .bpTax { font-size: 30%; } /* --- d-300 唐木仏壇 仏王 本黒檀 ----------------------------------------- */ /* 暗い背景に文字が乗って読めないため c-319 と同じ半透明パネルを敷く */ .bpriceBox--d300-01 .bpPanel { left: calc( 9 * var(--u)); top: calc(360 * var(--u)); width: calc(300 * var(--u)); height: calc(122 * var(--u)); } .bpriceBox--d300-01 .bpRetailTtl { left: calc( 20 * var(--u)); top: calc(365 * var(--u)); font-size: calc(19 * var(--u)); } .bpriceBox--d300-01 .bpRows { left: calc( 18 * var(--u)); top: calc(395 * var(--u)); width: calc(282 * var(--u)); font-size: calc(17 * var(--u)); line-height: calc(24 / 17); } .bpriceBox--d300-01 .bpRule { left: calc( 14 * var(--u)); top: calc(452 * var(--u)); width: calc(290 * var(--u)); } .bpriceBox--d300-01 .bpTotal { left: calc( 18 * var(--u)); top: calc(456 * var(--u)); width: calc(285 * var(--u)); font-size: calc(17 * var(--u)); } .bpriceBox--d300-01 .bpBurst { left: calc(300 * var(--u)); top: calc(370 * var(--u)); width: calc(100 * var(--u)); height: calc(100 * var(--u)); } .bpriceBox--d300-01 .bpOffMax { left: calc(310 * var(--u)); top: calc(368 * var(--u)); font-size: calc(17 * var(--u)); } .bpriceBox--d300-01 .bpOff { left: calc(306 * var(--u)); top: calc(392 * var(--u)); width: calc(88 * var(--u)); font-size: calc(32 * var(--u)); } .bpriceBox--d300-01 .bpOff .off { margin-top: calc(3 * var(--u)); font-size: calc(20 * var(--u)); } .bpriceBox--d300-01 .bpLead { left: calc( 12 * var(--u)); top: calc(496 * var(--u)); font-size: calc(23 * var(--u)); } .bpriceBox--d300-01 .bpLead .s1 { font-size: 70%; } .bpriceBox--d300-01 .bpLead2 { left: calc( 12 * var(--u)); top: calc(536 * var(--u)); font-size: calc(16 * var(--u)); color: #333333; } .bpriceBox--d300-01 .bpLead2 .em { font-size: calc(20 * var(--u)); color: var(--bp-pink); } .bpriceBox--d300-01 .bpSetLabel { left: calc( 16 * var(--u)); top: calc(566 * var(--u)); width: calc(50 * var(--u)); height: calc(34 * var(--u)); font-size: calc(14 * var(--u)); } .bpriceBox--d300-01 .bpSetNum { left: calc( 74 * var(--u)); top: calc(560 * var(--u)); font-size: calc(57 * var(--u)); } .bpriceBox--d300-01 .bpSetNum .bpTax { font-size: 30%; } .bpriceBox--d300-01 .bpLead3 { left: calc( 12 * var(--u)); top: calc(616 * var(--u)); font-size: calc(19 * var(--u)); color: #333333; } .bpriceBox--d300-01 .bpLead3 .em { color: var(--bp-pink); } .bpriceBox--d300-01 .bpBodyLabel { left: calc( 16 * var(--u)); top: calc(646 * var(--u)); width: calc(50 * var(--u)); height: calc(34 * var(--u)); font-size: calc(14 * var(--u)); } .bpriceBox--d300-01 .bpBodyNum { left: calc( 74 * var(--u)); top: calc(642 * var(--u)); font-size: calc(50 * var(--u)); } .bpriceBox--d300-01 .bpBodyNum .bpTax { font-size: 34%; } /* --- d-305 唐木仏壇 仏王 紫檀（d-300 と同じ配置・希望小売価格の記載なし）- */ .bpriceBox--d305-01 .bpLead { left: calc( 12 * var(--u)); top: calc(496 * var(--u)); font-size: calc(23 * var(--u)); } .bpriceBox--d305-01 .bpLead .s1 { font-size: 70%; } .bpriceBox--d305-01 .bpLead2 { left: calc( 12 * var(--u)); top: calc(536 * var(--u)); font-size: calc(16 * var(--u)); color: #333333; } .bpriceBox--d305-01 .bpLead2 .em { font-size: calc(20 * var(--u)); color: var(--bp-pink); } .bpriceBox--d305-01 .bpSetLabel { left: calc( 16 * var(--u)); top: calc(566 * var(--u)); width: calc(50 * var(--u)); height: calc(34 * var(--u)); font-size: calc(14 * var(--u)); } .bpriceBox--d305-01 .bpSetNum { left: calc( 74 * var(--u)); top: calc(560 * var(--u)); font-size: calc(57 * var(--u)); } .bpriceBox--d305-01 .bpSetNum .bpTax { font-size: 30%; } .bpriceBox--d305-01 .bpLead3 { left: calc( 12 * var(--u)); top: calc(616 * var(--u)); font-size: calc(19 * var(--u)); color: #333333; } .bpriceBox--d305-01 .bpLead3 .em { color: var(--bp-pink); } .bpriceBox--d305-01 .bpBodyLabel { left: calc( 16 * var(--u)); top: calc(646 * var(--u)); width: calc(50 * var(--u)); height: calc(34 * var(--u)); font-size: calc(14 * var(--u)); } .bpriceBox--d305-01 .bpBodyNum { left: calc( 74 * var(--u)); top: calc(642 * var(--u)); font-size: calc(50 * var(--u)); } .bpriceBox--d305-01 .bpBodyNum .bpTax { font-size: 34%; } /* --- d-310 唐木仏壇 仏王 本欅（価格ブロックは右側） --------------------- */ /* 希望小売価格ブロックとバッジは仏壇に重なって読めなかったため、 「本格志向の方にオススメ!!」（上端 496px）の上の余白へ移動し、パネルを敷く */ .bpriceBox--d310-01 .bpPanel { left: calc(546 * var(--u)); top: calc(341 * var(--u)); width: calc(312 * var(--u)); height: calc(145 * var(--u)); } .bpriceBox--d310-01 .bpRetailTtl { left: calc(556 * var(--u)); top: calc(347 * var(--u)); font-size: calc(17 * var(--u)); } .bpriceBox--d310-01 .bpRows { left: calc(556 * var(--u)); top: calc(373 * var(--u)); width: calc(292 * var(--u)); font-size: calc(16 * var(--u)); line-height: calc(40 / 16); } .bpriceBox--d310-01 .bpRule { left: calc(552 * var(--u)); top: calc(455 * var(--u)); width: calc(300 * var(--u)); } .bpriceBox--d310-01 .bpTotal { left: calc(556 * var(--u)); top: calc(459 * var(--u)); width: calc(296 * var(--u)); font-size: calc(16 * var(--u)); } .bpriceBox--d310-01 .bpBurst { left: calc(866 * var(--u)); top: calc(367 * var(--u)); width: calc(90 * var(--u)); height: calc(90 * var(--u)); } .bpriceBox--d310-01 .bpOffMax { left: calc(874 * var(--u)); top: calc(365 * var(--u)); font-size: calc(15 * var(--u)); } .bpriceBox--d310-01 .bpOff { left: calc(871 * var(--u)); top: calc(387 * var(--u)); width: calc(80 * var(--u)); font-size: calc(29 * var(--u)); } .bpriceBox--d310-01 .bpOff .off { margin-top: calc(3 * var(--u)); font-size: calc(18 * var(--u)); } .bpriceBox--d310-01 .bpLead { left: calc(556 * var(--u)); top: calc(496 * var(--u)); font-size: calc(23 * var(--u)); } .bpriceBox--d310-01 .bpLead .s1 { font-size: 70%; } .bpriceBox--d310-01 .bpLead2 { left: calc(556 * var(--u)); top: calc(536 * var(--u)); font-size: calc(16 * var(--u)); color: #333333; } .bpriceBox--d310-01 .bpLead2 .em { font-size: calc(20 * var(--u)); color: var(--bp-pink); } .bpriceBox--d310-01 .bpSetLabel { left: calc(561 * var(--u)); top: calc(566 * var(--u)); width: calc(50 * var(--u)); height: calc(34 * var(--u)); font-size: calc(14 * var(--u)); } .bpriceBox--d310-01 .bpSetNum { left: calc(619 * var(--u)); top: calc(560 * var(--u)); font-size: calc(52 * var(--u)); } .bpriceBox--d310-01 .bpSetNum .bpTax { font-size: 30%; } .bpriceBox--d310-01 .bpLead3 { left: calc(556 * var(--u)); top: calc(616 * var(--u)); font-size: calc(19 * var(--u)); color: #333333; } .bpriceBox--d310-01 .bpLead3 .em { color: var(--bp-pink); } .bpriceBox--d310-01 .bpBodyLabel { left: calc(561 * var(--u)); top: calc(646 * var(--u)); width: calc(50 * var(--u)); height: calc(34 * var(--u)); font-size: calc(14 * var(--u)); } .bpriceBox--d310-01 .bpBodyNum { left: calc(619 * var(--u)); top: calc(642 * var(--u)); font-size: calc(44 * var(--u)); } .bpriceBox--d310-01 .bpBodyNum .bpTax { font-size: 34%; } /* ========================================================================== main_03（号数別のサイズ表） ブロック内の座標はすべて「そのブロックの左上からの相対px」 ========================================================================== */ /* --- パターンA：リボン＋セット価格＋本体のみ＋3列表（d-300 / d-305 / d-310） */ .bpriceBox--d300-03 .bpRibbon, .bpriceBox--d305-03 .bpRibbon, .bpriceBox--d310-03 .bpRibbon { left: 0; top: 0; width: calc(78 * var(--u)); height: calc(160 * var(--u)); font-size: calc(19 * var(--u)); } .bpriceBox--d300-03 .bpSetLabel, .bpriceBox--d305-03 .bpSetLabel, .bpriceBox--d310-03 .bpSetLabel { left: calc(89 * var(--u)); top: calc(-2 * var(--u)); width: calc(91 * var(--u)); height: calc(34 * var(--u)); font-size: calc(15 * var(--u)); } /* チップ（右端 180px）と金額がくっついて見えるので 11px 空ける */ .bpriceBox--d300-03 .bpSetNum, .bpriceBox--d305-03 .bpSetNum, .bpriceBox--d310-03 .bpSetNum { left: calc(191 * var(--u)); top: calc(-2 * var(--u)); font-size: calc(49 * var(--u)); } .bpriceBox--d300-03 .bpBodyLabel, .bpriceBox--d305-03 .bpBodyLabel, .bpriceBox--d310-03 .bpBodyLabel { left: calc(89 * var(--u)); top: calc(58 * var(--u)); width: calc(91 * var(--u)); height: calc(34 * var(--u)); font-size: calc(15 * var(--u)); } .bpriceBox--d300-03 .bpBodyNum, .bpriceBox--d305-03 .bpBodyNum, .bpriceBox--d310-03 .bpBodyNum { left: calc(191 * var(--u)); top: calc(58 * var(--u)); font-size: calc(44 * var(--u)); } .bpriceBox--d300-03 .bpSizeTbl, .bpriceBox--d305-03 .bpSizeTbl, .bpriceBox--d310-03 .bpSizeTbl { left: calc(89 * var(--u)); top: calc(116 * var(--u)); width: calc(313 * var(--u)); height: calc(60 * var(--u)); grid-template-rows: 28fr 31fr; font-size: calc(14 * var(--u)); } .bpriceBox--d300-03 .bpGroup--1 { left: calc( 21 * var(--u)); top: calc( 18 * var(--u)); } .bpriceBox--d300-03 .bpGroup--2 { left: calc(509 * var(--u)); top: calc( 18 * var(--u)); } .bpriceBox--d300-03 .bpGroup--3 { left: calc( 21 * var(--u)); top: calc(245 * var(--u)); } .bpriceBox--d300-03 .bpGroup--4 { left: calc(509 * var(--u)); top: calc(245 * var(--u)); } .bpriceBox--d300-03 .bpGroup--5 { left: calc( 21 * var(--u)); top: calc(455 * var(--u)); } .bpriceBox--d305-03 .bpGroup--1 { left: calc( 21 * var(--u)); top: calc( 18 * var(--u)); } .bpriceBox--d305-03 .bpGroup--2 { left: calc(509 * var(--u)); top: calc( 18 * var(--u)); } .bpriceBox--d305-03 .bpGroup--3 { left: calc( 21 * var(--u)); top: calc(233 * var(--u)); } .bpriceBox--d305-03 .bpGroup--4 { left: calc(509 * var(--u)); top: calc(233 * var(--u)); } .bpriceBox--d305-03 .bpGroup--5 { left: calc( 21 * var(--u)); top: calc(460 * var(--u)); } .bpriceBox--d310-03 .bpGroup--1 { left: calc( 18 * var(--u)); top: calc( 20 * var(--u)); } .bpriceBox--d310-03 .bpGroup--2 { left: calc(507 * var(--u)); top: calc( 20 * var(--u)); } /* --- パターンB：リボン＋リード文＋価格＋4列表（d-316 / d-328 / d-333） --- */ .bpriceBox--d316-03 .bpRibbon, .bpriceBox--d328-03 .bpRibbon, .bpriceBox--d333-03 .bpRibbon { left: 0; top: 0; width: calc(58 * var(--u)); height: calc(101 * var(--u)); font-size: calc(17 * var(--u)); } .bpriceBox--d316-03 .bpLead, .bpriceBox--d328-03 .bpLead, .bpriceBox--d333-03 .bpLead { left: calc(79 * var(--u)); top: calc(21 * var(--u)); font-size: calc(15 * var(--u)); } .bpriceBox--d316-03 .bpLead .em, .bpriceBox--d328-03 .bpLead .em, .bpriceBox--d333-03 .bpLead .em { font-size: calc(19 * var(--u)); } .bpriceBox--d316-03 .bpSetNum, .bpriceBox--d328-03 .bpSetNum, .bpriceBox--d333-03 .bpSetNum { left: calc(83 * var(--u)); top: calc(53 * var(--u)); font-size: calc(55 * var(--u)); } .bpriceBox--d316-03 .bpSetNum .bpTax, .bpriceBox--d328-03 .bpSetNum .bpTax, .bpriceBox--d333-03 .bpSetNum .bpTax { font-size: 32%; } .bpriceBox--d316-03 .bpSizeTbl, .bpriceBox--d328-03 .bpSizeTbl, .bpriceBox--d333-03 .bpSizeTbl { left: calc(-10 * var(--u)); top: calc(115 * var(--u)); width: calc(433 * var(--u)); height: calc(62 * var(--u)); grid-template-rows: 30fr 32fr; font-size: calc(14 * var(--u)); } .bpriceBox--d316-03 .bpGroup--1 { left: calc( 36 * var(--u)); top: calc( 14 * var(--u)); } .bpriceBox--d316-03 .bpGroup--2 { left: calc(539 * var(--u)); top: calc( 14 * var(--u)); } .bpriceBox--d316-03 .bpGroup--3 { left: calc( 37 * var(--u)); top: calc(225 * var(--u)); } .bpriceBox--d316-03 .bpGroup--4 { left: calc(539 * var(--u)); top: calc(225 * var(--u)); } .bpriceBox--d328-03 .bpGroup--1 { left: calc( 36 * var(--u)); top: calc( 5 * var(--u)); } .bpriceBox--d328-03 .bpGroup--2 { left: calc(539 * var(--u)); top: calc( 5 * var(--u)); } .bpriceBox--d328-03 .bpGroup--3 { left: calc( 37 * var(--u)); top: calc(215 * var(--u)); } .bpriceBox--d328-03 .bpGroup--4 { left: calc(539 * var(--u)); top: calc(215 * var(--u)); } .bpriceBox--d328-03 .bpGroup--5 { left: calc( 39 * var(--u)); top: calc(417 * var(--u)); } .bpriceBox--d333-03 .bpGroup--1 { left: calc( 36 * var(--u)); top: calc( 7 * var(--u)); } .bpriceBox--d333-03 .bpGroup--2 { left: calc(539 * var(--u)); top: calc( 7 * var(--u)); } .bpriceBox--d333-03 .bpGroup--3 { left: calc( 37 * var(--u)); top: calc(217 * var(--u)); } .bpriceBox--d333-03 .bpGroup--4 { left: calc(539 * var(--u)); top: calc(217 * var(--u)); } .bpriceBox--d333-03 .bpGroup--5 { left: calc( 39 * var(--u)); top: calc(419 * var(--u)); } /* --- パターンC：d-069（希望小売価格＋バッジ＋リボン＋価格を横3列） ------- */ .bpriceBox--d069-03 .bpRetailTtl { left: calc( 19 * var(--u)); top: calc(-27 * var(--u)); font-size: calc(13 * var(--u)); color: #808080; } .bpriceBox--d069-03 .bpRetailNum { left: calc( 73 * var(--u)); top: calc( -8 * var(--u)); font-size: calc(19 * var(--u)); color: #808080; } .bpriceBox--d069-03 .bpBurst { left: calc(228 * var(--u)); top: calc(-47 * var(--u)); width: calc(65 * var(--u)); height: calc(65 * var(--u)); } .bpriceBox--d069-03 .bpOff { left: calc(232 * var(--u)); top: calc(-33 * var(--u)); width: calc(57 * var(--u)); font-size: calc(22 * var(--u)); } .bpriceBox--d069-03 .bpOff .off { margin-top: calc(1 * var(--u)); font-size: calc(13 * var(--u)); } .bpriceBox--d069-03 .bpRibbon { left: 0; top: 0; width: calc(52 * var(--u)); height: calc(107 * var(--u)); font-size: calc(15 * var(--u)); } .bpriceBox--d069-03 .bpLead { left: calc( 67 * var(--u)); top: calc( 36 * var(--u)); font-size: calc(15 * var(--u)); } .bpriceBox--d069-03 .bpLead .em { font-size: calc(19 * var(--u)); } /* 値上げで桁が増え「(税込)」が隣の号数リボン／仏壇サイズアイコンに掛かるため級数を下げる */ .bpriceBox--d069-03 .bpSetNum { left: calc( 66 * var(--u)); top: calc( 62 * var(--u)); font-size: calc(40 * var(--u)); } .bpriceBox--d069-03 .bpSetNum .bpTax { font-size: 32%; } .bpriceBox--d069-03 .bpGroup--1 { left: calc( 24 * var(--u)); top: calc( 62 * var(--u)); } .bpriceBox--d069-03 .bpGroup--2 { left: calc(339 * var(--u)); top: calc( 62 * var(--u)); } .bpriceBox--d069-03 .bpGroup--3 { left: calc(655 * var(--u)); top: calc( 62 * var(--u)); } /* --- パターンD：d-107 / d-108（1価格のみ） ------------------------------ */ .bpriceBox--d107-03 .bpLead { left: calc( 26 * var(--u)); top: calc(277 * var(--u)); font-size: calc(19 * var(--u)); } .bpriceBox--d107-03 .bpLead .em{ font-size: calc(24 * var(--u)); } .bpriceBox--d107-03 .bpSetNum { left: calc( 26 * var(--u)); top: calc(308 * var(--u)); font-size: calc(58 * var(--u)); } .bpriceBox--d107-03 .bpSetNum .bpTax { font-size: 30%; } .bpriceBox--d108-03 .bpLead { left: calc( 26 * var(--u)); top: calc(277 * var(--u)); font-size: calc(19 * var(--u)); } .bpriceBox--d108-03 .bpLead .em{ font-size: calc(24 * var(--u)); } .bpriceBox--d108-03 .bpSetNum { left: calc( 26 * var(--u)); top: calc(308 * var(--u)); font-size: calc(58 * var(--u)); } .bpriceBox--d108-03 .bpSetNum .bpTax { font-size: 30%; } /* d-316 は main_03 のリード文・価格が d-328 / d-333 より 16px ほど上にある */ .bpriceBox--d316-03 .bpLead { top: calc( 5 * var(--u)); } .bpriceBox--d316-03 .bpSetNum { top: calc(37 * var(--u)); }