app/template/default/index.twig line 1

Open in your IDE?
  1. {% extends 'default_frame.twig' %}
  3. {% set body_class = 'front_page' %}
  5. {% block stylesheet %}
  6.     <style>
  7. /*いい古墳あります*/
  8.         .elementor-element-cde511d {
  9.             display: flex;
  10.             justify-content: center;
  11.             align-items: center;
  12.             margin: 50px 20px 0;
  13.             max-width: calc(100% - 40px);
  14.             width: auto;
  15.         }
  17.         /* 画像自体のスタイリング */
  18.         .elementor-element-cde511d img {
  19.             max-width: 100%;
  20.             height: auto;
  21.             width: auto;
  22.         }
  24. @media only screen and (max-width: 768px) {
  25.         .elementor-element-cde511d {
  26.             margin: 30px 15px 0;
  27.             max-width: calc(100% - 30px);
  28.         }
  29. }
  31. /*樹木葬の新形態「古墳墓」*/
  32.         .elementor-element-a2b7db4 h2 {
  33.             text-align: center;
  34.             color: var( --e-global-color-global_color_4 );
  35.             font-size: 38px;
  36.             font-weight: 600;
  37.         }
  38. @media only screen and (max-width: 768px) {
  39.         .elementor-element-a2b7db4 h2 {
  40.             font-size: 24px;
  41.         }
  42. }
  43. /*イントロ*/
  44.         .elementor-element-5da587c {
  45.             text-align: center;
  46.             font-size: 18px;
  47.             line-height: 2;
  48.         }
  49. @media only screen and (max-width: 768px) {
  50.         .elementor-element-5da587c {
  51.             font-size: 15px;
  52.             line-height: 1.5;
  53.             padding: 10px 20px 10px 20px;
  54. }
  55. }
  61. /*ボタン*/
  62. .elementor-element-27d69a7 {
  63.             display: flex;
  64.             flex-wrap: wrap;
  65.             margin: 30px auto;
  66.             justify-content: center;
  67. }
  68. .elementor-element-row {
  69.             width: 50%;
  70.             text-align: center;
  71.             flex-direction: row;
  72.             margin-bottom: 20px;
  73. }    
  74. @media (max-width: 768px) {
  75. .elementor-element-row {
  76.             width: 100%;
  77. }
  78. }        
  79. .elementor-element-row p {
  80.     margin-top: 10px;
  81.             text-align: center;
  82.             font-size: 14px;
  83.             line-height: 1.5;
  84. }
  85. .elementor-button span {
  86.             text-decoration: inherit;
  87.             display: inline-block;
  88.         }
  89. .elementor-button {
  90.             display: inline-block;
  91.             line-height: 1;
  92.             font-size: 20px;
  93.             font-weight: bold;
  94.             border-radius: 3px;
  95.             color: #fff;
  96.             fill: #fff;
  97.             text-align: center;
  98.             transition: all .3s;
  99.             background-color: #000000;
  100.             width:80%;
  101.             padding-top: 30px;
  102.             padding-bottom: 30px;
  103. }
  105. @media only screen and (max-width: 768px) {
  106.         .elementor-button {
  107.             font-size: 17px;
  108.             padding: 20px 30px 20px 30px;
  109. }
  110. }
  113.     </style>
  114. {% endblock %}
  123. {% block main %}
  124.     <div class="elementor-element-cde511d">
  125.         <img src="{{ asset('assets/img/top/iikofun.png') }}" alt="いい古墳あります！">
  126.     </div>
  127.     <div class="elementor-element-a2b7db4">
  128.         <h2>樹木葬の新形態「古墳墓」</h2>
  129.     </div>
  130.     <div class="elementor-element-5da587c">
  131.         <p>墓石を建てる時代は終わりました。<br>いまや新規に販売される墓の半数以上が「樹木葬」です。<br>樹木葬は西洋式が一般的ですが、日本には日本式の樹木葬があっても良いはず。<br>それが<strong>古墳墓</strong>です！</p>
  132.     </div>
  133.     <div class="elementor-element-27d69a7">
  134.         <div class="elementor-element-row">
  135.             <a class="elementor-button" href="{{ url('product_list') }}?category_id=1">
  136.                 <span>販売中の古墳はこちらから</span>
  137.             </a>
  138.             <p><strong>現在販売中の古墳墓をご希望の方は</strong><br><strong>こちらより購入申込みしていただけます。</strong></p>
  139.         </div>
  140.         {% if not is_granted('ROLE_USER') %}
  141.             <div class="elementor-element-row">
  142.                 <a class="elementor-button" href="{{ url('entry') }}">
  143.                     <span>お客様登録はこちらから</span>
  144.                 </a>
  145.                 <p><strong>古墳をお求めになりたい地域をご登録ください。</strong><br><strong>その地域に新しく古墳が完成した際にご連絡差し上げます。</strong></p>
  146.             </div>
  147.         {% endif %}
  148.     </div>
  149. {% endblock %}