app/template/user_data/PR/index.twig line 1

Open in your IDE?
  1. {% extends 'default_frame.twig' %}
  3. {% block stylesheet %}
  4. <style>
  5. .pr-page {
  6.     width: 100%;
  7.     max-width: 1200px;
  8.     margin: 0 auto;
  9.     padding: 20px;
  10. }
  13. .pr-main-content {
  14.     margin-bottom: 40px;
  15. }
  19. .pr-visual-collage {
  20.     width: 90%;
  21.     max-width: 1000px;
  22.     margin: 0 auto 40px;
  23.     position: relative;
  24.     overflow: hidden;
  25.     border-radius: 10px;
  26. }
  28. .pr-visual-collage img {
  29.     width: 100%;
  30.     height: auto;
  31.     display: block;
  32. }
  34. .pr-description {
  35.     max-width: 800px;
  36.     margin: 0 auto 40px;
  37.     padding: 20px;
  38.     line-height: 1.8;
  39.     color: #333;
  40.     font-size: 1.5vw;
  41.     font-weight: bold;
  42.     text-align: center;
  43. }
  45. .pr-cta-banner {
  46.     width: 90%;
  47.     margin: auto;
  48.     background: linear-gradient(135deg, #fff0f5 0%, #ffe4e1 100%);
  49.     border-radius: 10px;
  50.     margin-bottom: 50px;
  51.     display: flex;
  52.     align-items: center;
  53.     justify-content: space-between;
  54.     gap: 20px;
  55.     cursor: pointer;
  56.     transition: transform 0.3s ease;
  57. }
  59. .pr-cta-banner:hover {
  60.     transform: translateY(-2px);
  61.     box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  62. }
  64. .pr-features-section {
  65.     background: #fff5f5;
  66.     padding: 40px 20px;
  67.     border-radius: 10px;
  68. }
  70. .pr-features-header {
  71.     background: #c71585;
  72.     color: white;
  73.     padding: 20px;
  74.     text-align: center;
  75.     border-radius: 8px;
  76.     margin-bottom: 30px;
  77.     font-size: 22px;
  78.     font-weight: bold;
  79. }
  82. .pr-features {
  83.     display: grid;
  84.     grid-template-columns: repeat(3, 1fr);
  85.     gap: 30px;
  86.     margin-top: 50px;
  87. }
  89. .pr-feature-box {
  90.     background: #FB7CB4;
  91.     border: 5px solid black;
  92.     border-radius: 10px;
  93.     padding: 30px 20px;
  94.     text-align: center;
  95.     transition: transform 0.3s ease, box-shadow 0.3s ease;
  96. }
  98. .pr-feature-box:hover {
  99.     transform: translateY(-5px);
  100.     box-shadow: 0 8px 20px rgba(255, 105, 180, 0.3);
  101. }
  103. .pr-feature-title {
  104.     font-size: 20px;
  105.     font-weight: bold;
  106.     color: #fff;
  107.     margin-bottom: 15px;
  108. }
  110. .pr-feature-description {
  111.     font-size: 14px;
  112.     font-weight: bold;
  113.     color: black;
  114.     line-height: 1.6;
  115. }
  117. .pr-feature-box img {
  118.     width: 100%;
  119.     max-width: 300px;
  120.     height: auto;
  121.     display: block;
  122.     margin: 0 auto 15px;
  123.     object-fit: contain;
  124. }
  126. /* ポイント制度ブロック */
  127. .pr-points-section {
  128.     margin-top: 60px;
  129.     background: #fff5f5;
  130.     padding: 40px 20px;
  131.     border-radius: 10px;
  132. }
  134. .pr-points-header {
  135.     background: #c71585;
  136.     color: white;
  137.     padding: 20px;
  138.     text-align: center;
  139.     border-radius: 8px;
  140.     margin-bottom: 30px;
  141.     font-size: 22px;
  142.     font-weight: bold;
  143. }
  145. .pr-points-content {
  146.     text-align: center;
  147.     margin-bottom: 30px;
  148. }
  150. .pr-points-line {
  151.     font-size: 24px;
  152.     font-weight: bold;
  153.     color: #333;
  154.     margin-bottom: 15px;
  155.     line-height: 1.6;
  156. }
  158. .pr-points-line .highlight {
  159.     color: #c71585;
  160.     font-size: 28px;
  161. }
  163. .pr-points-explanation {
  164.     background: #ff69b4;
  165.     color: white;
  166.     padding: 40px 30px;
  167.     border-radius: 8px;
  168.     margin-bottom: 30px;
  169.     display: flex;
  170.     align-items: center;
  171.     justify-content: center;
  172.     gap: 40px;
  173.     flex-wrap: wrap;
  174. }
  176. .pr-points-text {
  177.     flex: 1;
  178.     min-width: 300px;
  179.     text-align: left;
  180. }
  182. .pr-points-text-line {
  183.     font-size: 32px;
  184.     font-weight: bold;
  185.     line-height: 1.5;
  186.     margin-bottom: 8px;
  187.     white-space: nowrap;
  188. }
  190. .pr-points-coins {
  191.     display: flex;
  192.     align-items: center;
  193.     justify-content: center;
  194.     flex-shrink: 0;
  195. }
  197. .pr-points-coins img {
  198.     width: auto;
  199.     height: 120px;
  200.     max-width: 100%;
  201.     object-fit: contain;
  202. }
  204. .pr-points-button {
  205.     background: #f5f5f5;
  206.     border: 2px solid #999;
  207.     border-radius: 8px;
  208.     padding: 15px 30px;
  209.     text-align: center;
  210.     display: inline-flex;
  211.     align-items: center;
  212.     justify-content: center;
  213.     gap: 10px;
  214.     cursor: pointer;
  215.     transition: all 0.3s ease;
  216.     margin: 0 auto;
  217.     font-size: 16px;
  218.     color: #333;
  219.     font-weight: bold;
  220. }
  222. .pr-points-button:hover {
  223.     background: #e0e0e0;
  224.     border-color: #666;
  225.     transform: translateY(-2px);
  226.     box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  227. }
  229. .pr-points-button-icon {
  230.     width: 0;
  231.     height: 0;
  232.     border-left: 8px solid #333;
  233.     border-top: 6px solid transparent;
  234.     border-bottom: 6px solid transparent;
  235. }
  237. /* 割引・送料情報ブロック */
  238. .pr-discount-section {
  239.     margin-top: 60px;
  240.     background: #fff5f5;
  241.     padding: 40px 20px;
  242.     border-radius: 10px;
  243. }
  245. .pr-discount-header {
  246.     background: #c71585;
  247.     color: white;
  248.     padding: 20px;
  249.     text-align: center;
  250.     border-radius: 8px;
  251.     margin-bottom: 30px;
  252.     font-size: 22px;
  253.     font-weight: bold;
  254. }
  256. .pr-discount-intro {
  257.     text-align: center;
  258.     margin-bottom: 30px;
  259.     color: #333;
  260.     font-size: 16px;
  261.     line-height: 1.8;
  262. }
  264. .pr-discount-table {
  265.     width: 100%;
  266.     max-width: 800px;
  267.     margin: 0 auto 30px;
  268.     background: white;
  269.     border-collapse: collapse;
  270.     border-radius: 8px;
  271.     overflow: hidden;
  272.     box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  273. }
  275. .pr-discount-table th {
  276.     background: #f8f8f8;
  277.     padding: 15px;
  278.     text-align: center;
  279.     font-weight: bold;
  280.     color: #333;
  281.     border: 1px solid #e0e0e0;
  282.     font-size: 16px;
  283. }
  285. .pr-discount-table td {
  286.     padding: 15px;
  287.     text-align: center;
  288.     border: 1px solid #e0e0e0;
  289.     color: #333;
  290.     font-size: 15px;
  291. }
  293. .pr-discount-table tr:nth-child(even) {
  294.     background: #fafafa;
  295. }
  297. .pr-discount-table tr:hover {
  298.     background: #fff5f5;
  299. }
  301. .pr-discount-info {
  302.     text-align: center;
  303.     margin-bottom: 30px;
  304.     color: #333;
  305.     font-size: 14px;
  306.     line-height: 2;
  307. }
  309. .pr-discount-button {
  310.     background: #f5f5f5;
  311.     border: 2px solid #999;
  312.     border-radius: 8px;
  313.     padding: 15px 30px;
  314.     text-align: center;
  315.     display: inline-flex;
  316.     align-items: center;
  317.     justify-content: center;
  318.     gap: 10px;
  319.     cursor: pointer;
  320.     transition: all 0.3s ease;
  321.     margin: 0 auto;
  322.     font-size: 16px;
  323.     color: #333;
  324.     font-weight: bold;
  325. }
  327. .pr-discount-button:hover {
  328.     background: #e0e0e0;
  329.     border-color: #666;
  330.     transform: translateY(-2px);
  331.     box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  332. }
  334. .pr-discount-button-icon {
  335.     width: 0;
  336.     height: 0;
  337.     border-left: 8px solid #333;
  338.     border-top: 6px solid transparent;
  339.     border-bottom: 6px solid transparent;
  340. }
  342. /* レスポンシブデザイン */
  343. @media (max-width: 768px) {
  344.     .pr-page {
  345.         padding: 10px;
  346.     }
  347.     
  348.     .pr-cta-banner {
  349.         flex-direction: column;
  350.         text-align: center;
  351.     }
  353.     .pr-features-section {
  354.         padding: 30px 15px;
  355.         margin-top: 40px;
  356.     }
  358.     .pr-features-header {
  359.         font-size: 18px;
  360.         padding: 15px;
  361.     }
  363.     .pr-features {
  364.         grid-template-columns: 1fr;
  365.         gap: 20px;
  366.     }
  368.     .pr-feature-box {
  369.         padding: 20px 15px;
  370.     }
  372.     .pr-feature-box img {
  373.         max-width: 250px;
  374.         margin-bottom: 10px;
  375.     }
  377.     .pr-points-section {
  378.         padding: 30px 15px;
  379.         margin-top: 40px;
  380.     }
  382.     .pr-points-header {
  383.         font-size: 18px;
  384.         padding: 15px;
  385.     }
  387.     .pr-points-line {
  388.         font-size: 18px;
  389.     }
  391.     .pr-points-line .highlight {
  392.         font-size: 22px;
  393.     }
  395.     .pr-points-explanation {
  396.         flex-direction: column;
  397.         gap: 20px;
  398.         padding: 30px 20px;
  399.     }
  401.     .pr-points-text {
  402.         text-align: center;
  403.         min-width: auto;
  404.     }
  406.     .pr-points-text-line {
  407.         font-size: 24px;
  408.         white-space: normal;
  409.     }
  411.     .pr-points-coins img {
  412.         height: 100px;
  413.     }
  415.     .pr-discount-section {
  416.         padding: 30px 15px;
  417.         margin-top: 40px;
  418.     }
  420.     .pr-discount-header {
  421.         font-size: 18px;
  422.         padding: 15px;
  423.     }
  425.     .pr-discount-intro {
  426.         font-size: 14px;
  427.     }
  429.     .pr-discount-table {
  430.         font-size: 14px;
  431.     }
  433.     .pr-discount-table th,
  434.     .pr-discount-table td {
  435.         padding: 12px 8px;
  436.         font-size: 13px;
  437.     }
  439.     .pr-discount-info {
  440.         font-size: 13px;
  441.     }
  442. }
  444. @media (max-width: 480px) {
  445.     .pr-description {
  446.         font-size: 14px;
  447.         padding: 15px;
  448.     }
  450.     .pr-points-line {
  451.         font-size: 16px;
  452.     }
  454.     .pr-points-line .highlight {
  455.         font-size: 20px;
  456.     }
  458.     .pr-points-text-line {
  459.         font-size: 20px;
  460.         white-space: normal;
  461.     }
  463.     .pr-points-coins img {
  464.         height: 80px;
  465.     }
  467.     .pr-points-button {
  468.         padding: 12px 20px;
  469.         font-size: 14px;
  470.     }
  472.     .pr-feature-box {
  473.         padding: 15px 10px;
  474.     }
  476.     .pr-feature-title {
  477.         font-size: 18px;
  478.         margin-bottom: 10px;
  479.     }
  481.     .pr-feature-description {
  482.         font-size: 14px;
  483.         line-height: 1.5;
  484.     }
  486.     .pr-feature-box img {
  487.         max-width: 120px;
  488.         margin-bottom: 8px;
  489.     }
  491.     .pr-discount-header {
  492.         font-size: 16px;
  493.         padding: 12px;
  494.     }
  496.     .pr-discount-intro {
  497.         font-size: 13px;
  498.     }
  500.     .pr-discount-table th,
  501.     .pr-discount-table td {
  502.         padding: 10px 5px;
  503.         font-size: 12px;
  504.     }
  506.     .pr-discount-info {
  507.         font-size: 12px;
  508.     }
  510.     .pr-discount-button {
  511.         padding: 12px 20px;
  512.         font-size: 14px;
  513.     }
  514. }
  515. </style>
  516. {% endblock %}
  518. {% block javascript %}
  519. <script>
  520. $(function() {
  521.     // CTAバナーのクリックイベント
  522.     $('.pr-cta-banner').on('click', function() {
  523.         // 初めての方ページへのリンク（必要に応じて変更）
  524.         window.location.href = '/entry';
  525.     });
  527.     // スムーズスクロール
  528.     $('a[href^="#"]').on('click', function(e) {
  529.         var target = $(this.getAttribute('href'));
  530.         if (target.length) {
  531.             e.preventDefault();
  532.             $('html, body').stop().animate({
  533.                 scrollTop: target.offset().top - 100
  534.             }, 1000);
  535.         }
  536.     });
  538.     // 画像の遅延読み込み（必要に応じて）
  539.     if ('IntersectionObserver' in window) {
  540.         const imageObserver = new IntersectionObserver((entries, observer) => {
  541.             entries.forEach(entry => {
  542.                 if (entry.isIntersecting) {
  543.                     const img = entry.target;
  544.                     if (img.dataset.src) {
  545.                         img.src = img.dataset.src;
  546.                         img.removeAttribute('data-src');
  547.                         observer.unobserve(img);
  548.                     }
  549.                 }
  550.             });
  551.         });
  553.         document.querySelectorAll('img[data-src]').forEach(img => {
  554.             imageObserver.observe(img);
  555.         });
  556.     }
  558.     // ポイント残高確認ボタンのクリックイベント
  559.     $('.pr-points-button').on('click', function() {
  560.         window.location.href = '/mypage';
  561.     });
  563.     // 価格表確認ボタンのクリックイベント
  564.     $('.pr-discount-button').on('click', function() {
  565.         window.location.href = '/price';
  566.     });
  567. });
  568. </script>
  569. {% endblock %}
  571. {% block main %}
  572. <div class="ec-role">
  573.     <div class="pr-page">
  574.         <!-- トップヘッダー -->
  575.         
  577.         <!-- メインコンテンツ -->
  578.         <div class="pr-main-content">
  580.             <div class="pr-features-section">
  581.                     <div class="ec-topicRole">
  582.                         <p>
  583.                             <strong>🛍 BlackCherryが選ばれる理由</strong><br>
  584.                             BlackCherryは、お客様に安心してご利用いただける通販サイトとして、「早くて・多くて・安くて・丁寧」なサービスを追求しています。<br>
  585.                             <strong>📦 発送は最短3営業日！</strong><br>
  586.                             「すぐに観たい」に応えるスピード対応。ご注文からお届けまで、迅速かつ丁寧に手配いたします。<br>
  587.                             <strong>🎥 業界最大級の商品数！</strong><br>
  588.                             レアな名作から最新作まで、あらゆるニーズに応えるラインナップ。探していた“あの1本”が、きっと見つかります。<br>
  589.                             <strong>💁‍♀️ 安心・丁寧な対応</strong><br>
  590.                             お客様の声を何より大切に。ご不明点やトラブルにも、スタッフが迅速・丁寧に対応いたします。<br>
  591.                             <strong>💸 圧倒的なコストパフォーマンス</strong><br>
  592.                             激安セール・まとめ買い割引など、毎日がちょっと嬉しくなる価格で。お得なセットや期間限定企画も多数展開中。<br>
  593.                             <strong>🎁 お得が続く！ポイント制度あり</strong><br>
  594.                             会員登録（無料）で、100円ごとに10ポイント還元。1,000円で100ポイント＝100円分が貯まる高還元設計です。<br>
  595.                             次回のお買い物からすぐに使えるので、使うほどお得！<br>
  596.                             <strong>🎉 今だけ！新規会員登録で250ポイントプレゼント中！</strong><br>
  597.                             BlackCherryは「選びやすく、届きやすく、続けやすい」を大切に、<br>
  598.                             皆さまの“大人の自由時間”を、もっと楽しく豊かにするサービスをこれからもお届けしてまいります。
  599.                         </p>
  600.                 </div>
  602.                 <!-- 説明文 -->
  603.                 <div class="pr-description">
  604.                     BlackCherryは、大人の自由時間をもっと楽しく、豊かにするために、<br>安心・お得・迅速な通販サービスを追求しています。
  605.                 </div>
  607.                 <!-- 初めての方へ（CTA） -->
  608.                 <div class="pr-cta-banner">
  609.                     <a href="{{ url('help_guide') }}">
  610.                         <img src="{{ asset('assets/img/pr/pr_cta_beginner.jpg') }}" alt="初めての方はこちら" />
  611.                     </a>
  612.                 </div>
  614.                 <!-- 特徴ボックス -->
  615.                 <div class="pr-features">
  616.                     <!-- 特徴1: 最短3営業日発送 -->
  617.                     <div class="pr-feature-box">
  618.                         <div class="pr-feature-title">最短3営業日発送</div>
  619.                         <img src="{{ asset('assets/img/pr/pr_cta_1.png') }}" alt="最短3営業日発送" />
  620.                         <div class="pr-feature-description">
  621.                             「すぐに観たい」に応える<br>スピード対応。
  622.                         </div>
  623.                     </div>
  625.                     <!-- 特徴2: 業界最大級の商品数 -->
  626.                     <div class="pr-feature-box">
  627.                         <div class="pr-feature-title">業界最大級の商品数</div>
  628.                         <img src="{{ asset('assets/img/pr/pr_cta_2.png') }}" alt="業界最大級の商品数" />
  629.                         <div class="pr-feature-description">
  630.                             レアな名作から<br>人気の定番まで
  631.                         </div>
  632.                     </div>
  634.                     <!-- 特徴3: 安心&丁寧な対応 -->
  635.                     <div class="pr-feature-box">
  636.                         <div class="pr-feature-title">安心&丁寧な対応</div>
  637.                         <img src="{{ asset('assets/img/pr/pr_cta_3.png') }}" alt="安心&丁寧な対応" />
  638.                         <div class="pr-feature-description">
  639.                             365日営業・発送でお客様に<br>寄り添うサポート体制
  640.                         </div>
  641.                     </div>
  642.                 </div>
  643.             </div>
  645.             <!-- ポイント制度ブロック -->
  646.             <div class="pr-points-section">
  647.                 <!-- ヘッダー -->
  648.                 <div class="pr-points-header">
  649.                     充実した会員制度
  650.                 </div>
  652.                 <!-- ポイント付与内容 -->
  653.                 <div class="pr-points-content">
  654.                     <div class="pr-points-line">
  655.                         新規会員登録で<span class="highlight">250Pt</span>付与
  656.                     </div>
  657.                     <div class="pr-points-line">
  658.                         会員の方には <span class="highlight">100円ごとに10Pt</span>付与
  659.                     </div>
  660.                 </div>
  662.                 <!-- ポイント説明 -->
  663.                 <div class="pr-points-explanation">
  664.                     <div class="pr-points-text">
  665.                         <div class="pr-points-text-line">1Pt (ポイント) は</div>
  666.                         <div class="pr-points-text-line">1円として使用できます。</div>
  667.                     </div>
  668.                     <div class="pr-points-coins">
  669.                         <img src="{{ asset('assets/img/pr/pr_point.png') }}" alt="ポイント" />
  670.                     </div>
  671.                 </div>
  673.                 <!-- ポイント残高確認ボタン -->
  674.                 <div style="text-align: center;">
  675.                     <a href="{{ url('mypage') }}">
  676.                     <div class="pr-points-button">
  677.                         ポイント残高の確認 (マイページ)
  678.                         <div class="pr-points-button-icon"></div>
  679.                     </div>
  680.                     </a>
  681.                 </div>
  682.             </div>
  684.             <!-- 割引・送料情報ブロック -->
  685.             <div class="pr-discount-section">
  686.                 <!-- ヘッダー -->
  687.                 <div class="pr-discount-header">
  688.                     買えば買うほどお得に!
  689.                 </div>
  691.                 <!-- 説明文 -->
  692.                 <div class="pr-discount-intro">
  693.                     1度に沢山の買い物をすればするほど、<br>
  694.                     お得にDVDを楽しんでいただくことができます!
  695.                 </div>
  697.                 <!-- 割引・送料テーブル -->
  698.                 <table class="pr-discount-table">
  699.                     <thead>
  700.                         <tr>
  701.                             <th>ご注文金額(税込)</th>
  702.                             <th>割引内容</th>
  703.                             <th>送料</th>
  704.                         </tr>
  705.                     </thead>
  706.                     <tbody>
  707.                         <tr>
  708.                             <td>5,000円以上</td>
  709.                             <td>500円割引</td>
  710.                             <td>あり</td>
  711.                         </tr>
  712.                         <tr>
  713.                             <td>9,000円以上</td>
  714.                             <td>1000円割引</td>
  715.                             <td>あり</td>
  716.                         </tr>
  717.                         <tr>
  718.                             <td>15,000円以上</td>
  719.                             <td>1000円割引</td>
  720.                             <td>無料</td>
  721.                         </tr>
  722.                         <tr>
  723.                             <td>25,000円以上</td>
  724.                             <td>3,000円割引</td>
  725.                             <td>無料</td>
  726.                         </tr>
  727.                     </tbody>
  728.                 </table>
  730.                 <!-- 追加情報 -->
  731.                 <div class="pr-discount-info">
  732.                     割引はカート内で自動適用されます。<br>
  733.                     15,000円以上で送料無料となります。
  734.                 </div>
  736.                 <!-- 価格表確認ボタン -->
  737.                 <div style="text-align: center;">
  738.                     <a href="{{ url('price') }}">
  739.                     <div class="pr-discount-button">
  740.                         価格表を確認する
  741.                         <div class="pr-discount-button-icon"></div>
  742.                     </div>
  743.                     </a>
  744.                 </div>
  745.             </div>
  746.         </div>
  747.     </div>
  748. </div>
  749. {% endblock %}