app/template/default/Block/top_payment_info.twig line 1

Open in your IDE?
  1. <style>
  2. /*全てに適用*/    
  3. /*ウィンドウ幅が767px以上の場合に適用*/
  4. @media screen and (min-width: 767px) { 
  5.     
  6.     .img_right2{
  7.         width: 58%;
  8.         float: right; 
  9.     }
  10.     .d_main2{
  11.         margin-right: auto;
  12.         margin-left: auto;
  13.         width: 100%;
  14.         max-width: 1150px;
  15.     }
  16.     .d_contents2{
  17.         padding: 50px 0;
  18.         width: 75%;
  19.         margin-left: 25%;
  20.     }
  21.     .img_right3{
  22.         display: none;
  23.     }
  24.     .img_width2{
  25.         width: 80%;
  26.         float: right;
  27.     }
  28.     
  29.     .l_item_btn3{
  30.     display: block;
  31.     width: 40%;
  32.     text-align: center;
  33.     margin: 10px 0 0 0; 
  34.     padding: 5px 0;
  35.     -webkit-border-radius: 20px;
  36.     -moz-border-radius: 20px;
  37.     border-radius: 20px;
  38.     border: 1px solid #000;
  39.     position: relative;
  40.     top: 36px;
  41.     }
  42.     }
  43. /*ウィンドウ幅が最大767pxまでの場合に適用*/
  44. @media screen and (max-width: 767px) { 
  45.     .img_right2{
  46.         width: 100%;
  47.         float: none; 
  48.         margin-right: 0px;
  49.         padding: 0 10px;
  50.         display: none;
  51.     }
  52.     .img_width2{
  53.         width: 100%
  54.     }
  55.     
  56.     .l_item_btn3{
  57.     display: block;
  58.     text-align: center;
  59.     margin: 10px 20px 50px;
  60.     padding: 10px 0;
  61.     -webkit-border-radius: 20px;
  62.     -moz-border-radius: 20px;
  63.     border-radius: 20px;
  64.     border: 1px solid #000;
  65.     position: relative;
  66.     top: 36px;
  67.     }    
  68.     
  69.     }
  70.     
  72. </style>
  76. <div class="d_main2 clearfix">
  77. <section class="d_contents2">
  78.     <h2 class="d_item_title" style="
  79.     float: left;
  80.     width: 50%;
  81.     align-content: center;
  82.     text-align: right;
  83.     border-bottom: none;
  84.     margin-bottom: 0px;
  85. ">分割払い</h2>
  86.     <p style="float: left;">（</p><p style="
  87.     color:#2e6faf;float: left;
  88. ">金利手数料無料</p><p>）</p>
  89.     <div class="t_flexBox" style="float: left;width:100%;">
  90.       <div class="l_items_default" style="width: 100%;">
  91.         <div class="txt t_flexBox" style="padding-top: 30px;width:100%;border-top: 1px solid #000;">
  92.           <div class="img_width">
  93.             <p class="content-text">
  94. 金利手数料は弊社負担にて月々の分割払いでご購入いただけます。<br>
  95. このほか、お支払い方法にはクレジット、銀行振込、代引きがございます。<br>
  96.             </p>
  97.           </div>
  98.         </div>
  99.       <br style="clear: both;">
  100.       </div>
  101.   </div>
  102. </section>
  104.     </div>