app/template/default/Block/content_right_img2.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.       
  79.       
  80.       
  81.     <h2 class="d_item_title">レンタル</h2>
  82.     <div class="t_flexBox">
  83.         
  84.         
  85.       <div class="l_items_default" style="width: 100%;">
  86.         <div class="img_right2">
  87.           <img src="/html/user_data/img/img4.jpg" alt="" class="img_width2">
  88.         </div>
  89.         <h2 class="d_item_name2">手軽に始めたいお客様へ</h2>
  90.         <div class="txt t_flexBox">
  91.           <div class="img_width">
  92.             <p class="content-text">手軽に始められるレンタルで安心の水がある生活を。<br />ご家庭から飲食店まで幅広くご利用いただいています。</p>
  93.             <a href = "{{ eccube_config.multipure_lp_rental }}" class="l_item_btn3">詳しくはこちら</a>
  94.           </div>
  95.         </div>
  96.           
  97.         <div class="img_right3">
  98.           <img src="/html/user_data/img/img4.jpg" alt="" class="img_width2">
  99.         </div>
  101.           <br style="clear: both;">
  102.       </div>
  104.         
  105.         
  106.       </div>
  107.     </section>
  108.     </div>