app/template/user_data/about.twig line 1

Open in your IDE?
  1. {% extends 'default_frame.twig' %}
  2. {% block main %}
  3.     <div class="custom-page">
  4.         <!-- トップバナー -->
  5.         <div class="top-banner">
  6.             <img src="/html/user_data/assets/img/content/LINE_ALBUM_20250712_250714_18.jpg" alt="トップバナー">
  7.         </div>
  8.         <!-- セクション1: 国産小麦について -->
  9.         <div class="bakery-content-section">
  10.             <div class="bakery-section-text">
  11.                 <p>
  12.                     good bakery伊せ屋は<br>
  13.                     『パン王国』と呼ばれるほど、パン屋さんが多いことで有名な<br>
  14.                     愛知県江南市にある小さなパン屋です。                
  15.                 </p>
  16.             </div>
  17.         </div>
  19.         <!-- セクション1: 国産小麦について -->
  20.         <div class="bakery-content-section">
  21.         <div class="bakery-hero-image">
  22.             <img src="{{ asset('/html/user_data/assets/img/content/about-iseya1.jpg', 'user_data') }}" alt="メイン画像">
  23.         </div>
  24.             <div class="bakery-section-text">
  25.             <h2>
  26.             『毎日食べるパンだからこそ、安心・安全を。』
  27.             </h2>
  28.             <p>
  29.                 伊せ屋のパン生地は、北海道産小麦100%！<br>
  30.                 もっちりとした生地は噛めば噛むほど、小麦本来の味を引き出します。
  31.             </p>
  32.             </div>
  33.             <div class="bakery-section-text">
  34.                 <p>
  35.                 お店で毎日仕込むパン生地は、乳化剤などの添加物を一切使用しておらず、<br>安心してお召し上がりいただけるパン作りを心がけています。</p>
  36.             </div>
  37.         </div>
  39.         <div class="bakery-content-section">
  40.         <div class="bakery-hero-image">
  41.             <img src="{{ asset('/html/user_data/assets/img/content/about-iseya2.png', 'user_data') }}" alt="メイン画像">
  42.         </div>
  43.         <div class="bakery-section-text">
  44.         <p>
  45.             焼きたてパンが最も豊富に並ぶのは朝9時とランチタイムです。<br>
  46.             お昼にはピザなどのお惣菜パンがたくさん焼き上がります！<br>
  47.         </p>
  48.         </div>
  49.         <div class="bakery-section-text">
  50.         <p>
  51.             カレーパンは1度に揚げる個数を少なくし<br>
  52.             1日に何回も揚げたてが提供出来るようになっております。
  53.         </p>
  54.         </div>
  55.         </div>
  57.         <div class="bakery-content-section">
  58.         <div class="bakery-hero-image">
  59.             <img src="{{ asset('/html/user_data/assets/img/content/about-iseya3.png', 'user_data') }}" alt="メイン画像">
  60.         </div>
  61.         <div class="bakery-section-text">
  62.         <p>
  63.   キッズスペースあり。<br>
  64. ゆっくりパンをお選びいただけます。
  66.         </p>
  67.         </div>
  68.         </div>
  70.         
  71.         <div class="bakery-content-section">
  72.         <div class="bakery-hero-image">
  73.                 <img src="{{ asset('/html/user_data/assets/img/content/about-iseya4.jpg', 'user_data') }}" alt="お店の外観">
  74.         </div>
  75.         <div class="bakery-section-text">
  76.         <p>
  77.   イートインスペースあり。<br>購入されたパンをお店の中でお召し上がりいただけます。
  80.         </p>
  81.         </div>
  82.         </div>
  85.         <!-- セクション3: お店の情報 -->
  86.         <div class="bakery-content-section">
  87.             <div class="top-banner">
  88.                 <img src="{{ asset('/html/user_data/assets/img/content/LINE_ALBUM_20250712_250714_17.jpg', 'user_data') }}" alt="お店の外観">
  89.             </div>
  90.             <div class="bakery-section-text">
  91.                 <p class="bakery-shop-info" style="margin-bottom:0px;">
  92.                     江南市大間町新町147<br>
  93.                     TEL：0587-81-3061<br>
  94.                     営業時間 9:00～17:00<br>
  95.                     駐車場完備<br>
  96.                     イートインスペースあり
  97.                 </p>
  98.                 <div style="">
  99.                     <a href="https://www.instagram.com/iseyabread/"><img src="{{ asset('/html/user_data/ContentImg/instagram-logo.png', 'user_data') }}" alt="お店の外観" style="width:120px;"></a>
  100.                 </div>
  101.                 <div class="bakery-map-container">
  102.                     <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2268.566207440815!2d136.85999682354338!3d35.33325658047305!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60030a2a8130c621%3A0x94c9fedcb8bc0655!2z44CSNDgzLTgyNTEg5oSl55-l55yM5rGf5Y2X5biC5aSn6ZaT55S65paw55S677yR77yU77yX!5e0!3m2!1sja!2sjp!4v1749123061443!5m2!1sja!2sjp" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
  103.                 </div>
  104.                 <div class="bakery-hero-image">
  105.                     <img src="{{ asset('/html/user_data/assets/img/content/LINE_ALBUM_20250712_250714_21.jpg', 'user_data') }}" alt="お店の外観">
  106.                 </div>
  107.             </div>
  108.         </div>
  109.     </div>
  110. {% endblock %}
  112. {% block stylesheet %}
  113.     <style>
  114.         .custom-page {
  115.             max-width: 1200px;
  116.             margin: 0 auto;
  117.             padding: 0 20px;
  118.         }
  120.         /* トップバナー */
  121.         .top-banner {
  122.             text-align: center;
  123.             margin-bottom: 20px;
  124.         }
  126.         .top-banner img {
  127.             width: 100%;
  128.             height: auto;
  129.             max-height: 400px;
  130.             object-fit: cover;
  131.         }
  133.         /* メイン画像 */
  134.         .bakery-hero-image {
  135.             text-align: center;
  136.             margin-bottom: 30px;
  137.         }
  139.         .bakery-hero-image img {
  140.             width: 100%;
  141.             height: auto;
  142.             max-height: 500px;
  143.             object-fit: cover;
  144.             border-radius:8px;
  145.         }
  147.         /* セクション */
  148.         .bakery-content-section {
  149.             margin-bottom: 30px;
  150.             text-align: center;
  151.         }
  153.         .bakery-section-image {
  154.             margin-bottom: 30px;
  155.         }
  157.         .bakery-section-image img {
  158.             width: 100%;
  159.             height: auto;
  160.             max-height: 400px;
  161.             object-fit: cover;
  162.         }
  164.         .bakery-section-text {
  165.             padding: 0 16px;
  166.         }
  168.         .bakery-section-text h2 {
  169.             font-size: 24px;
  170.             margin-bottom: 30px;
  171.             color: #333;
  172.             font-weight: bold;
  173.         }
  175.         .bakery-section-text p {
  176.             font-size: 14px;
  177.             line-height: 1.8;
  178.             color: #666;
  179.             margin-bottom: 30px;
  180.             text-align: center;
  181.         }
  183.         /* お店情報 */
  184.         .bakery-shop-info {
  185.             text-align: center !important;
  186.             font-size: 18px;
  187.             margin-bottom: 30px;
  188.         }
  190.         .bakery-map-container {
  191.             text-align: center;
  192.         }
  194.         .bakery-map-container iframe {
  195.             width: 100%;
  196.             max-width: 400px;
  197.             height: 250px;
  198.             border: 0;
  199.         }
  201.         /* タブレット対応 */
  202.         @media (min-width: 768px) {
  203.             .custom-page {
  204.                 padding: 0 40px;
  205.             }
  207.             .bakery-hero-image img {
  208.                 max-height: 600px;
  209.             }
  211.             .bakery-section-image img {
  212.                 max-height: 500px;
  213.             }
  215.             .bakery-section-text h2 {
  216.                 font-size: 28px;
  217.             }
  219.             .bakery-section-text p {
  220.                 font-size: 18px;
  221.                 max-width: 800px;
  222.                 margin-left: auto;
  223.                 margin-right: auto;
  224.             }
  226.             .bakery-shop-info {
  227.                 font-size: 20px;
  228.             }
  230.             .bakery-map-container iframe {
  231.                 width: 500px;
  232.                 height: 350px;
  233.             }
  234.         }
  236.         /* PC対応 */
  237.         @media (min-width: 1024px) {
  238.             .bakery-content-section {
  239.                 margin-bottom: 80px;
  240.             }
  242.             .bakery-section-text {
  243.                 padding: 0 60px;
  244.             }
  246.             .bakery-section-text h2 {
  247.                 font-size: 32px;
  248.                 margin-bottom: 30px;
  249.             }
  251.             .bakery-section-text p {
  252.                 font-size: 20px;
  253.                 line-height: 2;
  254.             }
  256.             .bakery-map-container iframe {
  257.                 width: 600px;
  258.                 height: 400px;
  259.             }
  260.         }
  261.     </style>
  262. {% endblock %}