@charset "UTF-8"; /* ========================== 2026.05 YZY-3177 一時オーバーライド商品詳細ページのアップセル枠（.prt_cta_series.is-legacy-design）に対して、 YZY-3177 で導入した新しい CTA カードデザインを打ち消し、旧デザイン（test ブランチ時点の wrap.scss 内容）を再現する。【一時運用】client がアップセル枠の旧デザイン継続を希望しているため当面適用。将来的に新デザインへ完全移行する際は本ファイルと、関連する以下の仕掛けを全て削除すること: - 9 PC + 9 SP の cv/product//series.ctp 先頭の $legacyDesignClass 行 - 5 PC 商品詳細 index.ctp（ninniku/shijimi, premium, shirokuro, yukimachi, voice/product_2）の series 要素呼び出しに付与した ['legacyDesign' => true] - 本 SCSS ファイル本体と、コンパイル先 CSS ============================= */ /* test ブランチの wrap.scss 内容を、.prt_cta_series.is-legacy-design 配下にスコープして再定義する。新デザイン用 wrap.scss と同じセレクタを上書きするため、ロード順は本 CSS を後ろに置く必要がある（detail page CSS 配列で series.css の後ろに追加）。 */ /* ------------------------------ 定期便ボタンを旧緑色に戻す（YZY-3177 commit 6be9610f8f で導入されたオレンジ化を打ち消す）。fancybox モーダルが直下に移動するため、定期便ボタン本体はカード内の `_fancy__template_cta` クラスで絞り込んで指定する。 ---------------------------------*/ .prt_cta_series.is-legacy-design .box__cta_series__order_01 .btn__cta_series__order.bg_green a { background: #009b3f !important; } .prt_cta_series.is-legacy-design .box__cta_series__order_01 .btn__cta_series__order.bg_green a::after { background-image: url(/assets/img/common/icon-arrow__cta_order_button.png) !important; } .prt_cta_series.is-legacy-design { /* ラベル「定期便価格 / 単品通常価格」→ 旧文言「お得な定期便 / １回だけのお届け」へ。ボタン文言「コース・個数を選択 / 個数を選択」は旧と新で同一のため変更不要。 */ } .prt_cta_series.is-legacy-design .price_row--teiki .price_row__label { font-size: 0; /* 新文言を非表示 */ } .prt_cta_series.is-legacy-design .price_row--teiki .price_row__label::before { content: "お得な定期便"; font-size: 14px; color: #009b3f; } .prt_cta_series.is-legacy-design .box__cta_series__order_02 .price_row .price_row__label { font-size: 0; } .prt_cta_series.is-legacy-design .box__cta_series__order_02 .price_row .price_row__label::before { content: "１回だけのお届け"; font-size: 14px; color: #009b3f; /* 旧デザインに合わせて緑色（定期便価格ラベルと統一） */ } .prt_cta_series.is-legacy-design { /* 定期便価格は赤色を維持（旧デザインも単品時の数字を赤色で表示していた）。一旦明示的に再宣言して新規則と同等の specificity を確保。 */ } .prt_cta_series.is-legacy-design .price_row--teiki .price_row__price_num { color: #e00000 !important; } .prt_cta_series.is-legacy-design { /* 価格末尾の「円（税込）〜」を旧デザイン色（茶色 #432515）で再描画。 span の元テキストは font-size:0 で消し、::before で再構築。 `〜` は旧デザインでも表示されていたため含める。 priceSuffixOverride（zbatake の「3個（約1ヵ月分）」など）で
+ テキストが入る商品があるが、レガシーでは 1 行表示にしたいので
も非表示にする。 */ } .prt_cta_series.is-legacy-design .price_row__price_suffix { font-size: 0; line-height: 1; } .prt_cta_series.is-legacy-design .price_row__price_suffix::before { content: "円（税込）〜"; font-size: 14px; color: #432515; } .prt_cta_series.is-legacy-design .price_row__price_suffix br { display: none; } .prt_cta_series.is-legacy-design { /* 商品詳細ページのアップセル枠では、各カードの itemInfo（商品個別の説明文）を非表示にして、汎用注記文「※原材料やパッケージデザインが変更になる場合がございます。」に差し替える。css のみでの差し替えのため、要素自体は残し font-size 0 で文字を潰し ::before で再描画する。 ※ 既知の負債：スクリーンリーダーが元 DOM テキストと ::before content を二重読み上げする可能性があるため、本来は PHP 側（共通 wrap.ctp）の条件分岐で差し替えるべき。本リリースは一時対応のため CSS のみで実施。 */ } .prt_cta_series.is-legacy-design .description_box__p--itemInfo { font-size: 0 !important; } .prt_cta_series.is-legacy-design .description_box__p--itemInfo::before { content: "※原材料やパッケージデザインが変更になる場合がございます。"; font-size: 14px; color: #432515; display: block; padding-left: 1em; text-indent: -1em; } .prt_cta_series.is-legacy-design { /* レガシーモードでもカードを 550px 固定高にして全カードの上端・下端を揃える。旧デザインは master で全カード同高だったため、その視覚を再現する。新デザインの仕様（550px 固定 + 3 行 clamp）をそのまま流用するので、この箇所では override せず wrap.scss の既定をそのまま生かす。 */ /* カテゴリータグ（機能性表示食品 / 栄養機能食品等）は master には存在せず、 YZY-3177 で新規追加されたバッジ。レガシーモードでは非表示にして master の見た目を再現する。`is-placeholder`（kiseki 用の空プレースホルダ）も同様に隠してレイアウト分の高さも詰める。 */ } .prt_cta_series.is-legacy-design .template__cta_series__wrap .item_functionality { display: none !important; } .prt_cta_series.is-legacy-design { /* 商品名 h4 は YZY-3177 で 2 行固定高 + 縦中央寄せ + .is-long/.is-very-long クラスでフォント縮小 / 3 行高さになっていたが、master では auto 高 + 上揃え + 一定フォントサイズだったためそれを再現する。フォントサイズは wrap.scss の既定（$font-size-card-title）をそのまま使い、 .is-long による font-size 縮小だけ打ち消す。 */ } .prt_cta_series.is-legacy-design .template__cta_series__wrap .box__cta_series__wrap_heading h4 { height: auto !important; display: block !important; justify-content: initial !important; } .prt_cta_series.is-legacy-design .template__cta_series__wrap .box__cta_series__wrap_heading h4.is-long, .prt_cta_series.is-legacy-design .template__cta_series__wrap .box__cta_series__wrap_heading h4.is-very-long { /* .is-long / .is-very-long の font-size 縮小を打ち消し、通常の h4 と同じ既定サイズ（20px = $font-size-card-title）を強制。 legacy では文字列の長さに応じてフォントサイズが変わらないようにする。 */ font-size: 20px !important; } .prt_cta_series.is-legacy-design { /* description_box（説明枠）は master では border / overflow / scrollbar を一切持たない普通のテキスト領域だった。YZY-3177 で 550px カードに収めるため border-top/bottom + overflow-y:scroll + scrollbar-color などを追加したが、旧デザインでは余計なので全て無効化する。フェイクスクロールバー（SP 用 .description_box_wrap + thumb）も同様に非表示。 3 行 clamp + 商品名 clamp（.is-long/.is-very-long）はカード高揃えのため保持する。 */ } .prt_cta_series.is-legacy-design .template__cta_series__wrap .description_box { border: none !important; overflow: visible !important; scrollbar-width: none !important; padding: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; } .prt_cta_series.is-legacy-design .template__cta_series__wrap .description_box::-webkit-scrollbar { display: none !important; } .prt_cta_series.is-legacy-design .template__cta_series__wrap .description_box_wrap { border: none !important; margin: 0 !important; } .prt_cta_series.is-legacy-design .template__cta_series__wrap .description_box_wrap > .description_box { padding: 0 !important; } .prt_cta_series.is-legacy-design .template__cta_series__wrap .description_box__fake_scrollbar { display: none !important; } .prt_cta_series.is-legacy-design { /* レガシーシリーズページでは、master 同様カード本文に各商品の disclaimer 注記を表示する。新デザインで各商品の itemInfo / descriptionParagraphs を本文に流すようなったが、master では notice 配列の 1〜2 行だけだったためそれを再現する。既存の本文（itemInfo / descriptionParagraphs）は CSS で非表示にして、 index.ctp 側に注入した JS が各カードのモーダル内の `.js-disclaimer-line` から実テキストを読み取って description_box に挿入する（`.js-legacy-notice` クラスで）。ハードコード文言は使わず、商品ごとの disclaimerLine データが反映される。 */ } .prt_cta_series.is-legacy-design .template__cta_series__wrap .description_box > p:not(.js-legacy-notice) { display: none !important; } .prt_cta_series.is-legacy-design .template__cta_series__wrap .description_box .js-legacy-notice { display: block; line-height: 1.5; margin: 0; padding-left: 1em; text-indent: -1em; } .prt_cta_series.is-legacy-design .template__cta_series__wrap .description_box .js-legacy-notice + .js-legacy-notice { margin-top: 0.3em; } .prt_cta_series.is-legacy-design { /* zbatake (productCd=SY0103) は master では disclaimer 行の前に赤字のビタミンK警告を表示していた。これも JS が挿入する（`.js-legacy-notice--red`）。 */ } .prt_cta_series.is-legacy-design .template__cta_series__wrap .description_box .js-legacy-notice--red { color: #e00000; } .prt_cta_series.is-legacy-design { /* 「続きを見る」アコーディオンボタン（JS 注入）：1 件の disclaimer テキストが長くて 2 行以内に収まらないとき用。クリックでカード高を伸ばし、同行の他カードも追随。master と同じ accordion_button クラスを使う。 */ /* 「続きを見る/閉じる」ボタンは description_box の overflow:hidden を回避するため JS で description_box の外側（sibling）に挿入する。description_box 系ではない別セレクタで当てるため、直接の `.accordion_button` で記述。 */ } .prt_cta_series.is-legacy-design .template__cta_series__wrap--SY0103 .accordion_button { display: block !important; margin: 0.4em auto 0; padding: 0; background: none; border: none; color: #000000; text-decoration: underline; cursor: pointer; } .prt_cta_series.is-legacy-design .template__cta_series__wrap--SY0103 .accordion_button:hover { opacity: 0.85; } .prt_cta_series.is-legacy-design { /* 展開後はボタンを非表示（master の .accordion.active .accordion_button { display:none } と同じ挙動）。 */ } .prt_cta_series.is-legacy-design .template__cta_series__wrap--SY0103.is-accordion-expanded .accordion_button { display: none !important; } .prt_cta_series.is-legacy-design { /* 展開時：そのカード本人＋同行の兄弟カードを全部高さ可変にする。 .prt_inner のレイアウトは弄らず（マスターの既存レイアウトをそのまま生かす）、カードに `align-self: stretch` を付与し、JS で測定した展開後の高さを兄弟カードにも sync するか、min-height で揃える。 ※ 横サイズに触れないこと（grid/flex を新規追加しない）。 */ } .prt_cta_series.is-legacy-design:has(.template__cta_series__wrap.is-accordion-expanded) .template__cta_series__wrap { height: auto !important; max-height: none !important; min-height: 550px; } .prt_cta_series.is-legacy-design { /* zbatake のみ、赤字 3 行 + disclaimer 1 行で本来 4 行ぶんあるが、隣の soup カード（disclaimer 1 行のみ）と CTA ボタン位置を揃えるため通常時は注記の合計高さを 1 行ぶんに固定して強制 clip （master は .list の max-height + overflow:hidden、それを踏襲し .js-legacy-notice をまとめる擬似コンテナを作らずに first-line だけ表示）。「続きを見る」クリックで全行展開。 ⚠️ JS legacy.js の挿入順前提： 1. 赤字行 3 つを prepend（DOM 順は「赤字 → 赤字 → 赤字 → disclaimer」） 2. disclaimer 1 行を append よって :first-child は必ず赤字 1 行目になる。JS 側の挿入順を変更する場合は本セレクタも要見直し。 */ } .prt_cta_series.is-legacy-design .template__cta_series__wrap--SY0103 .description_box .js-legacy-notice { display: none; } .prt_cta_series.is-legacy-design .template__cta_series__wrap--SY0103 .description_box .js-legacy-notice:first-child { display: block; } .prt_cta_series.is-legacy-design .template__cta_series__wrap--SY0103.is-accordion-expanded .description_box .js-legacy-notice { display: block; } .prt_cta_series.is-legacy-design .template__cta_series__wrap .template_inner .sec .sec__cta_series__wrap_body .block__cta_series__wrap_01 .box__cta_series__wrap_02 .notice.accordion .list { overflow: hidden; transition: 0.3s; } .prt_cta_series.is-legacy-design .template__cta_series__wrap .template_inner .sec .sec__cta_series__wrap_body .block__cta_series__wrap_01 .box__cta_series__wrap_02 .notice.accordion .accordion_button { display: block; width: 100%; display: block; border: none; background: none; color: #432515; border-radius: 5px; text-decoration: underline; } .prt_cta_series.is-legacy-design .template__cta_series__wrap .template_inner .sec .sec__cta_series__wrap_body .block__cta_series__wrap_01 .box__cta_series__wrap_02 .notice.accordion.active .accordion_button { display: none; } .prt_cta_series.is-legacy-design .template__cta_series__wrap .template_inner .sec .sec__cta_series__wrap_body .block__cta_series__wrap_01 .box__cta_series__wrap_02 .notice .accordion_button { display: none; } .prt_cta_series.is-legacy-design { /* ------------------------------ PC ---------------------------------*/ } @media screen and (min-width: 639px) { .prt_cta_series.is-legacy-design .template__cta_series__wrap { max-width: 1080px; /* カード高は wrap.scss の既定 (550px) をそのまま使う。ここでは内部 flex 縦並びだけ確保して body が残スペースを吸収するようにする。旧デザインでもカードの上端・下端が全カードで揃うように。 */ display: flex !important; flex-direction: column !important; } .prt_cta_series.is-legacy-design .template__cta_series__wrap .template_inner { display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; min-height: 0 !important; } .prt_cta_series.is-legacy-design .template__cta_series__wrap .sec__cta_series__wrap_01 { display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; min-height: 0 !important; } .prt_cta_series.is-legacy-design .template__cta_series__wrap .sec__cta_series__wrap_01 .sec_inner { display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; min-height: 0 !important; } .prt_cta_series.is-legacy-design .template__cta_series__wrap .sec__cta_series__wrap_01 .sec__cta_series__wrap_sub_heading { display: flex; align-items: center; width: 100%; background: #432515 !important; } .prt_cta_series.is-legacy-design .template__cta_series__wrap .sec__cta_series__wrap_01 .sec__cta_series__wrap_sub_heading .heading_inner { width: 100%; padding: 10px 1em; text-align: center; } .prt_cta_series.is-legacy-design .template__cta_series__wrap .sec__cta_series__wrap_01 .sec__cta_series__wrap_sub_heading .title { text-align: center; color: #ffffff; max-height: none !important; overflow: visible !important; line-height: inherit !important; padding: 0 !important; } .prt_cta_series.is-legacy-design .template__cta_series__wrap .sec__cta_series__wrap_01 .sec__cta_series__wrap_body { background: #f5f4e8 !important; /* flex 縦並びの中で残りの高さを全部受け取る。これで行内の一番背の高い兄弟カードに合わせて body の見た目が伸びる。 */ display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; min-height: 0 !important; } .prt_cta_series.is-legacy-design .template__cta_series__wrap .sec__cta_series__wrap_01 .sec__cta_series__wrap_body .body_inner { padding: 15px 15px !important; /* flex 縦並びで body 内のコンテンツを縦に積み、後段で order ブロックに margin-top:auto を付けて下端に張り付ける。 */ display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; min-height: 0 !important; } .prt_cta_series.is-legacy-design .template__cta_series__wrap .sec__cta_series__wrap_01 .sec__cta_series__wrap_body .block__cta_series__wrap_01 { flex: 0 0 auto !important; } .prt_cta_series.is-legacy-design .template__cta_series__wrap .sec__cta_series__wrap_01 .sec__cta_series__wrap_body .block__cta_series__wrap_01 .block_inner { display: flex; justify-content: space-between; width: 100%; } .prt_cta_series.is-legacy-design .template__cta_series__wrap .sec__cta_series__wrap_01 .sec__cta_series__wrap_body .block__cta_series__wrap_01 .box__cta_series__wrap_01 { width: 35%; } .prt_cta_series.is-legacy-design .template__cta_series__wrap .sec__cta_series__wrap_01 .sec__cta_series__wrap_body .block__cta_series__wrap_01 .box__cta_series__wrap_01 .img img { width: 100%; max-height: 180px; } .prt_cta_series.is-legacy-design .template__cta_series__wrap .sec__cta_series__wrap_01 .sec__cta_series__wrap_body .block__cta_series__wrap_01 .box__cta_series__wrap_02 { width: 60%; } .prt_cta_series.is-legacy-design .template__cta_series__wrap .sec__cta_series__wrap_01 .sec__cta_series__wrap_body .block__cta_series__wrap_01 .box__cta_series__wrap_02 .box__cta_series__wrap_heading h4 { font-family: "ヒラギノ明朝 ProN W6", "Hiragino Mincho ProN", "HG明朝E", "MS Mincho", "MS 明朝", serif; font-size: 24px; } .prt_cta_series.is-legacy-design .template__cta_series__wrap .sec__cta_series__wrap_01 .sec__cta_series__wrap_body .block__cta_series__wrap_01 .box__cta_series__wrap_02 .box__cta_series__wrap_heading h4 a { color: #432515; } .prt_cta_series.is-legacy-design .template__cta_series__wrap .sec__cta_series__wrap_01 .sec__cta_series__wrap_body .block__cta_series__wrap_01 .box__cta_series__wrap_02 .box__cta_series__wrap_heading .txt { font-size: 14px; } .prt_cta_series.is-legacy-design .template__cta_series__wrap .sec__cta_series__wrap_01 .sec__cta_series__wrap_body .block__cta_series__wrap_01 .box__cta_series__wrap_02 .txt_review a { display: inline-block; border: solid 2px #cccccc; color: #432515; border-radius: 10px; padding: 10px 10px 10px 60px; text-align: left; background: url(/assets/img/common/rev_title.png) no-repeat 10px 50%; } .prt_cta_series.is-legacy-design .template__cta_series__wrap .sec__cta_series__wrap_01 .sec__cta_series__wrap_body { /* 旧 description_box（新デザインで導入された枠線・スクロール領域）を打ち消し */ } .prt_cta_series.is-legacy-design .template__cta_series__wrap .sec__cta_series__wrap_01 .sec__cta_series__wrap_body .description_box { flex: 0 1 auto !important; min-height: 0 !important; max-height: none !important; padding: 0 !important; margin: 10px 0 0 !important; background: transparent !important; border-top: none !important; border-bottom: none !important; font-size: inherit !important; line-height: inherit !important; display: block !important; overflow: visible !important; } .prt_cta_series.is-legacy-design .template__cta_series__wrap .sec__cta_series__wrap_01 .sec__cta_series__wrap_body .description_box__p { padding-left: 1em; text-indent: -1em; margin: 0; } .prt_cta_series.is-legacy-design .template__cta_series__wrap .sec__cta_series__wrap_01 .sec__cta_series__wrap_body .description_box__p + .prt_cta_series.is-legacy-design .template__cta_series__wrap .sec__cta_series__wrap_01 .sec__cta_series__wrap_body .description_box__p { margin-top: 0.4em; } .prt_cta_series.is-legacy-design .template__cta_series__wrap .sec__cta_series__wrap_01 .sec__cta_series__wrap_body .description_box__p--itemInfo { padding-left: 0; text-indent: 0; margin-bottom: 0.6em; } .prt_cta_series.is-legacy-design .template__cta_series__wrap .sec__cta_series__wrap_01 .sec__cta_series__wrap_body .layout__cta_series__wrap_01 { /* margin-top:auto で flex 縦並びの残り空間を全部食い、 order ブロックをカード下端に張り付ける。短いコンテンツのカードでも、長いコンテンツの兄弟カードと order 位置が揃う。 */ margin-top: auto !important; padding-top: 20px !important; flex: 0 0 auto !important; } .prt_cta_series.is-legacy-design .template__cta_series__wrap .sec__cta_series__wrap_01 .sec__cta_series__wrap_body { /* テスト商品 / kiseki 用の新 pricing レイアウトを打ち消し */ } .prt_cta_series.is-legacy-design .template__cta_series__wrap .sec__cta_series__wrap_01 .sec__cta_series__wrap_body .layout__cta_test_product__pricing { margin-top: auto !important; padding-top: 20px !important; } .prt_cta_series.is-legacy-design .template__cta_series__wrap .sec__cta_series__wrap_01 .sec__cta_series__wrap_body .block__cta_series__wrap_02 { flex: 0 0 auto !important; display: block !important; } .prt_cta_series.is-legacy-design .template__cta_series__wrap .sec__cta_series__wrap_01 .sec__cta_series__wrap_body .block__cta_series__wrap_02 .box__cta_series__wrap_01 .box_inner { min-height: 0 !important; display: block !important; justify-content: initial !important; margin-top: 0 !important; } .prt_cta_series.is-legacy-design .template__cta_series__wrap .sec__cta_series__wrap_01 .sec__cta_series__wrap_body .block__cta_series__wrap_02 .box__cta_series__wrap_01 .link { text-align: right; } .prt_cta_series.is-legacy-design .template__cta_series__wrap .sec__cta_series__wrap_01 .sec__cta_series__wrap_body .block__cta_series__wrap_02 .box__cta_series__wrap_01 .link a { display: flex; justify-content: flex-end; width: 100%; color: #432515; padding-right: calc(1em + 10px); position: relative; } .prt_cta_series.is-legacy-design .template__cta_series__wrap .sec__cta_series__wrap_01 .sec__cta_series__wrap_body .block__cta_series__wrap_02 .box__cta_series__wrap_01 .link a::after { content: " "; display: block; width: 1em; height: 1em; background: url(/assets/img/common/icon-arrow__green2__sm.png) no-repeat; background-size: 100%; position: absolute; transform: translate(0, 50%); bottom: 50%; right: 0; } .prt_cta_series.is-legacy-design .template__cta_series__wrap { /* 1 ボタンカードのオーダーブロック中央寄せ・min-height を打ち消し */ } .prt_cta_series.is-legacy-design .template__cta_series__wrap .template__cta_series__order .block__cta_series__order_01 > .block_inner { display: block !important; justify-content: initial !important; min-height: 0 !important; } } .prt_cta_series.is-legacy-design { /* ------------------------------ SP ---------------------------------*/ } @media screen and (max-width: 640px) { .prt_cta_series.is-legacy-design .template__cta_series__wrap { max-width: 1080px; /* SP もカード高は wrap.scss の既定 (550px) を維持して全カード同高にする。ここでは内部 flex 縦並びだけ確保。 */ display: flex !important; flex-direction: column !important; } .prt_cta_series.is-legacy-design .template__cta_series__wrap .template_inner { display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; min-height: 0 !important; } .prt_cta_series.is-legacy-design .template__cta_series__wrap .sec__cta_series__wrap_01 { display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; min-height: 0 !important; } .prt_cta_series.is-legacy-design .template__cta_series__wrap .sec__cta_series__wrap_01 .sec_inner { display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; min-height: 0 !important; } .prt_cta_series.is-legacy-design .template__cta_series__wrap .sec__cta_series__wrap_01 .sec__cta_series__wrap_sub_heading { background: #432515 !important; } .prt_cta_series.is-legacy-design .template__cta_series__wrap .sec__cta_series__wrap_01 .sec__cta_series__wrap_sub_heading .heading_inner { padding: 10px 1em; } .prt_cta_series.is-legacy-design .template__cta_series__wrap .sec__cta_series__wrap_01 .sec__cta_series__wrap_sub_heading .title { text-align: center; color: #ffffff; max-height: none !important; overflow: visible !important; line-height: inherit !important; padding: 0 !important; } .prt_cta_series.is-legacy-design .template__cta_series__wrap .sec__cta_series__wrap_01 .sec__cta_series__wrap_body { background: #f5f4e8 !important; /* flex 縦並びの中で残りの高さを全部受け取る。これで行内の一番背の高い兄弟カードに合わせて body の見た目が伸びる。 */ display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; min-height: 0 !important; } .prt_cta_series.is-legacy-design .template__cta_series__wrap .sec__cta_series__wrap_01 .sec__cta_series__wrap_body .body_inner { padding: 15px 15px !important; /* flex 縦並びで body 内のコンテンツを縦に積み、後段で order ブロックに margin-top:auto を付けて下端に張り付ける。 */ display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; min-height: 0 !important; } .prt_cta_series.is-legacy-design .template__cta_series__wrap .sec__cta_series__wrap_01 .sec__cta_series__wrap_body .block__cta_series__wrap_01 { flex: 0 0 auto !important; } .prt_cta_series.is-legacy-design .template__cta_series__wrap .sec__cta_series__wrap_01 .sec__cta_series__wrap_body .block__cta_series__wrap_01 .block_inner { display: flex; justify-content: space-between; width: 100%; } .prt_cta_series.is-legacy-design .template__cta_series__wrap .sec__cta_series__wrap_01 .sec__cta_series__wrap_body .block__cta_series__wrap_01 .box__cta_series__wrap_01 { width: 35%; } .prt_cta_series.is-legacy-design .template__cta_series__wrap .sec__cta_series__wrap_01 .sec__cta_series__wrap_body .block__cta_series__wrap_01 .box__cta_series__wrap_01 .img img { width: 100%; } .prt_cta_series.is-legacy-design .template__cta_series__wrap .sec__cta_series__wrap_01 .sec__cta_series__wrap_body .block__cta_series__wrap_01 .box__cta_series__wrap_02 { width: 60%; } .prt_cta_series.is-legacy-design .template__cta_series__wrap .sec__cta_series__wrap_01 .sec__cta_series__wrap_body .block__cta_series__wrap_01 .box__cta_series__wrap_02 .box__cta_series__wrap_heading h4 { font-family: "ヒラギノ明朝 ProN W6", "Hiragino Mincho ProN", "HG明朝E", "MS Mincho", "MS 明朝", serif; font-size: 24px; } .prt_cta_series.is-legacy-design .template__cta_series__wrap .sec__cta_series__wrap_01 .sec__cta_series__wrap_body .block__cta_series__wrap_01 .box__cta_series__wrap_02 .box__cta_series__wrap_heading h4 a { color: #432515; } .prt_cta_series.is-legacy-design .template__cta_series__wrap .sec__cta_series__wrap_01 .sec__cta_series__wrap_body .block__cta_series__wrap_01 .box__cta_series__wrap_02 .box__cta_series__wrap_heading .txt { font-size: 14px; } .prt_cta_series.is-legacy-design .template__cta_series__wrap .sec__cta_series__wrap_01 .sec__cta_series__wrap_body .block__cta_series__wrap_01 .box__cta_series__wrap_02 .txt_review a { display: inline-block; border-radius: 10px; border: solid 2px #cccccc; color: #432515; padding: 10px 10px 10px 40px; text-align: left; background: url(/assets/img/common/rev_title.png) no-repeat 4% 50%; background-size: 25px; font-size: 14px; } .prt_cta_series.is-legacy-design .template__cta_series__wrap .sec__cta_series__wrap_01 .sec__cta_series__wrap_body .block__cta_series__wrap_01 .box__cta_series__wrap_02 .notice .list.notes { display: block !important; background: #f5f4e8; border: none; } .prt_cta_series.is-legacy-design .template__cta_series__wrap .sec__cta_series__wrap_01 .sec__cta_series__wrap_body .block__cta_series__wrap_01 .box__cta_series__wrap_02 .notice .list.notes li { display: block; padding-block: 0; background: transparent; border: none; color: #000000; font-size: 14px; text-align: left; position: static; } .prt_cta_series.is-legacy-design .template__cta_series__wrap .sec__cta_series__wrap_01 .sec__cta_series__wrap_body .block__cta_series__wrap_01 .box__cta_series__wrap_02 .notice .list.notes a { display: inline; width: initial; height: initial; background: none; font-size: inherit; position: static; } .prt_cta_series.is-legacy-design .template__cta_series__wrap .sec__cta_series__wrap_01 .sec__cta_series__wrap_body .description_box { flex: 0 1 auto !important; min-height: 0 !important; max-height: none !important; padding: 0 !important; margin: 10px 0 0 !important; background: transparent !important; border-top: none !important; border-bottom: none !important; font-size: inherit !important; line-height: inherit !important; display: block !important; overflow: visible !important; } .prt_cta_series.is-legacy-design .template__cta_series__wrap .sec__cta_series__wrap_01 .sec__cta_series__wrap_body .description_box__p { padding-left: 1em; text-indent: -1em; margin: 0; } .prt_cta_series.is-legacy-design .template__cta_series__wrap .sec__cta_series__wrap_01 .sec__cta_series__wrap_body .description_box__p + .prt_cta_series.is-legacy-design .template__cta_series__wrap .sec__cta_series__wrap_01 .sec__cta_series__wrap_body .description_box__p { margin-top: 0.4em; } .prt_cta_series.is-legacy-design .template__cta_series__wrap .sec__cta_series__wrap_01 .sec__cta_series__wrap_body .description_box__p--itemInfo { padding-left: 0; text-indent: 0; margin-bottom: 0.6em; } .prt_cta_series.is-legacy-design .template__cta_series__wrap .sec__cta_series__wrap_01 .sec__cta_series__wrap_body .layout__cta_series__wrap_01 { margin-top: 20px !important; flex: 0 0 auto !important; } .prt_cta_series.is-legacy-design .template__cta_series__wrap .sec__cta_series__wrap_01 .sec__cta_series__wrap_body .layout__cta_test_product__pricing { margin-top: 20px !important; } .prt_cta_series.is-legacy-design .template__cta_series__wrap .sec__cta_series__wrap_01 .sec__cta_series__wrap_body .block__cta_series__wrap_02 { flex: 0 0 auto !important; display: block !important; } .prt_cta_series.is-legacy-design .template__cta_series__wrap .sec__cta_series__wrap_01 .sec__cta_series__wrap_body .block__cta_series__wrap_02 .box__cta_series__wrap_01 .box_inner { min-height: 0 !important; display: block !important; justify-content: initial !important; margin-top: 0 !important; } .prt_cta_series.is-legacy-design .template__cta_series__wrap .sec__cta_series__wrap_01 .sec__cta_series__wrap_body .block__cta_series__wrap_02 .box__cta_series__wrap_01 .link a { display: flex; justify-content: flex-end; width: 100%; color: #432515; padding-right: calc(1em + 10px); position: relative; } .prt_cta_series.is-legacy-design .template__cta_series__wrap .sec__cta_series__wrap_01 .sec__cta_series__wrap_body .block__cta_series__wrap_02 .box__cta_series__wrap_01 .link a::after { content: " "; display: block; width: 1em; height: 1em; background: url(/assets/img/common/icon-arrow__green2__sm.png) no-repeat; background-size: 100%; position: absolute; transform: translate(0, 50%); bottom: 50%; right: 0; } .prt_cta_series.is-legacy-design .template__cta_series__wrap .template__cta_series__order .block__cta_series__order_01 > .block_inner { display: block !important; justify-content: initial !important; min-height: 0 !important; } }