app/template/user_data/showroom.twig line 1

Open in your IDE?
  1. {% extends 'default_frame.twig' %}
  3. {% block main %}
  5. <div class="kasowarap">
  6.     
  7. <div class="kaso_h1title">
  8.       <p>Executive Lounge</p>
  9.       <h1>日本最大 会員制エグゼクティブラウンジ</h1>
  10.     </div>
  11.             
  12.   <link rel="stylesheet" href="/test/swiper-bundle.min.css" />
  13.   <script src="/test/swiper-bundle.min.js"></script>
  14.     <div class="main-image02">
  15.       <div class="swiper-container main-image02__body">
  16.         <ul class="swiper-wrapper main-image02__list">
  17.           <li class="swiper-slide main-image02__item"><iframe width="100%" height="680"
  18.               src="https://www.youtube.com/embed/ZjcdobP0x2c" title="YouTube video player" frameborder="0"
  19.               allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  20.               allowfullscreen></iframe></li>
  21.             
  22.           <li class="swiper-slide main-image02__item"><img src="/img/showroom11.jpg" alt=""></li>
  23.           <li class="swiper-slide main-image02__item"><img src="/img/showroom12.jpg" alt=""></li>
  24.           <li class="swiper-slide main-image02__item"><img src="/img/showroom13.jpg" alt=""></li>
  25.             
  26.           <li class="swiper-slide main-image02__item"><img src="/img/showroom02.jpg" alt=""></li>
  27.           <li class="swiper-slide main-image02__item"><img src="/img/showroom03.jpg" alt=""></li>
  28.           <li class="swiper-slide main-image02__item"><img src="/img/showroom04.jpg" alt=""></li>
  29.           <li class="swiper-slide main-image02__item"><img src="/img/showroom05.jpg" alt=""></li>
  30.           <li class="swiper-slide main-image02__item"><img src="/img/showroom06.jpg" alt=""></li>
  31.           <li class="swiper-slide main-image02__item"><img src="/img/showroom07.jpg" alt=""></li>
  32.           <li class="swiper-slide main-image02__item"><img src="/img/showroom08.jpg" alt=""></li>
  33.           <li class="swiper-slide main-image02__item"><img src="/img/showroom09.jpg" alt=""></li>
  34.           <li class="swiper-slide main-image02__item"><img src="/img/showroom10.jpg" alt=""></li>
  35.         </ul>
  36.         <div class="swiper-button-next"></div>
  37.         <div class="swiper-button-prev"></div>
  38.       </div>
  39.       <div class="swiper-container main-image02-thumbs">
  40.         <ul class="swiper-wrapper main-image-thumbs__list">
  41.           <li class="swiper-slide main-image02-thumbs__item"><img src="/img/showroom01.jpg" alt=""></li>
  42.             
  43.           <li class="swiper-slide main-image02-thumbs__item"><img src="/img/showroom11.jpg" alt=""></li>
  44.           <li class="swiper-slide main-image02-thumbs__item"><img src="/img/showroom12.jpg" alt=""></li>
  45.           <li class="swiper-slide main-image02-thumbs__item"><img src="/img/showroom13.jpg" alt=""></li>
  46.             
  47.           <li class="swiper-slide main-image02-thumbs__item"><img src="/img/showroom02.jpg" alt=""></li>
  48.           <li class="swiper-slide main-image02-thumbs__item"><img src="/img/showroom03.jpg" alt=""></li>
  49.           <li class="swiper-slide main-image02-thumbs__item"><img src="/img/showroom04.jpg" alt=""></li>
  50.           <li class="swiper-slide main-image02-thumbs__item"><img src="/img/showroom05.jpg" alt=""></li>
  51.           <li class="swiper-slide main-image02-thumbs__item"><img src="/img/showroom06.jpg" alt=""></li>
  52.           <li class="swiper-slide main-image02-thumbs__item"><img src="/img/showroom07.jpg" alt=""></li>
  53.           <li class="swiper-slide main-image02-thumbs__item"><img src="/img/showroom08.jpg" alt=""></li>
  54.           <li class="swiper-slide main-image02-thumbs__item"><img src="/img/showroom09.jpg" alt=""></li>
  55.           <li class="swiper-slide main-image02-thumbs__item"><img src="/img/showroom10.jpg" alt=""></li>
  56.         </ul>
  57.       </div>
  58.     </div>
  59.     <script>
  60.       var galleryTop = new Swiper('.main-image02__body', {
  61.         loop: true, // 繰り返し指定
  62.         navigation: {
  63.           nextEl: '.swiper-button-next',
  64.           prevEl: '.swiper-button-prev',
  65.         },
  66.         thumbs: {
  67.           swiper: {
  68.             el: '.main-image02-thumbs',
  69.             slidesPerView: 13,
  70.             spaceBetween: 5,
  72.             breakpoints: {
  73.               // 画面幅が 400px 以上の場合（window width >= 400px）
  74.               400: { slidesPerView: 10 },
  75.               // 画面幅が 980px 以上の場合（window width >= 980px）
  76.               980: { slidesPerView: 10 }
  77.             },
  78.           }
  80.         }
  82.       });
  83.     </script>
  86.     <div class="kaso_cen_wrap">
  87.       <h2>格調高いアンティークコインの最高峰<br>イギリスコインの専門店<br>コインパレス</h2>
  89.       <p>
  90.         <span class="red">※プライバシー保護の観点から、予約制としております。</span><br>
  91.         大変お手数ですが、事前にメールかお電話でご来店日時のご希望をお聞かせ下さい。
  92.       </p>
  94.       <p class="btn_showroom"><a href="/reservation/"><i class="fas fa-calendar-day"></i> ショールームの来場予約はこちら</a></p>
  96.     </div><!-- kaso_cen_wrap -->
  98.               
  99.               
  100.               
  101.   <div class="baseimage100"><img src="/img/tenbo.jpg" alt="image" /></div>
  103.   <div class="contents_wrap">
  105.     <h2 class="line_bl_title">【SHOWROOM SPACE】</h2>
  107.     <div id="showroom_tokulist">
  110.       <dl>
  111.         <dt><img src="/img/space01.jpg" alt="image" /></dt>
  112.         <dd>
  113.           <h3>扉を開けば<br>そこは癒しのショールーム</h3>
  115.           <p>神戸の海を遥か水平線まで見渡せる地上30階にラウンジをご用意しました。<br>
  116.             神戸の絶景が180°目の前に広がります。<br>神戸港の光り輝く碧、六甲山の鮮やかな緑、色とりどりの街並みを見渡せるパノラマはまるで宝石箱を覗いているよう。忙しい毎日からほんのひと時お客様をアンティークコインの美と芸術の癒しの空間へとお連れいたします。
  117.           </p>
  118.         </dd>
  119.       </dl>
  121.       <dl>
  122.         <dt><img src="/img/space02.jpg" alt="image" /></dt>
  123.         <dd>
  124.           <h3>誰にも邪魔されない<br>会員様だけのプライベート美術館</h3>
  126.           <p>
  127.             コインパレスは異国情緒溢れる港町神戸にある日本最大級のショールームでお客様をお迎えします。<br>会員制エグゼクティブラウンジでおくつろぎ頂き、完全会員制の安心感でお客様お一人お一人のご要望をコインコンシェルジュがお伺いいたします。
  128.           </p>
  129.         </dd>
  130.       </dl>
  132.       <dl>
  133.         <dt><img src="/img/space03.jpg" alt="image" /></dt>
  134.         <dd>
  135.           <h3>格調高きアンティークコインの最高峰<br>イギリスコイン専門店</h3>
  137.           <p>コインパレスは業界屈指のネットワークによる、イギリスコイン取扱店No.1を目指しております。<br>
  138.             鑑定グレードの高いコインを揃えております。一度是非おみ足をお運び頂きたくご来店を心よりお待ち申し上げます。
  139.           </p>
  140.         </dd>
  141.       </dl>
  144.     </div><!-- showroom_tokulist -->
  148.     <h2 class="line_bl_title">【ショールームへの道順】</h2>
  150.     <div id="mapflow">
  151.       <ol>
  152.         <li class="img"><span>1</span>
  153.           <img src="/img/ac1.jpg" alt="image" />
  154.           <p>この『神戸芸術センター』の中にコインパレスがあります。</p>
  155.         </li>
  157.         <li class="next"><i class="fas fa-arrow-right"></i></li>
  159.         <li class="img"><span>2</span>
  160.           <img src="/img/ac2.jpg" alt="image" />
  161.           <p>階段かスロープをお上がりください。
  162.             キャリーケースをお持ちの方は、右のスロープをご利用ください。</p>
  163.         </li>
  165.         <li class="next"><i class="fas fa-arrow-right"></i></li>
  167.         <li class="img"><span>3</span>
  168.           <img src="/img/ac3.jpg" alt="image" />
  169.           <p>まっすぐ進み、すぐ左の入り口へお向かいください。<br><b class="red">※奥の入り口へ進まれますと、別棟へ入ってしまいますのでご注意ください。</b></p>
  170.         </li>
  172.         <li class="next"><i class="fas fa-arrow-right"></i></li>
  174.         <li class="img"><span>4</span>
  175.           <img src="/img/ac4.jpg" alt="image" />
  176.           <p>入口の自動ドアの右側壁面のテンキーより、『３００３』を押し、『呼出』ボタンを押してください。</p>
  177.         </li>
  179.       </ol>
  181.       <p id="nextyajirusi"><img src="/img/ac_next.jpg" alt="image" /></p>
  183.       <ol>
  186.         <li class="img clear"><span>5</span>
  187.           <img src="/img/ac5.jpg" alt="image" />
  188.           <p>お名前をご確認後、ロックを解除いたしますのでレセプション（受付）を通り、エレベーターホールへお入りください。</p>
  189.         </li>
  191.         <li class="next"><i class="fas fa-arrow-right"></i></li>
  193.         <li class="img"><span>6</span>
  194.           <img src="/img/ac6.jpg" alt="image" />
  195.           <p>左右にエレベーターがございますが、左側のエレベーターを使用し30階までお上がりください。<br><b class="red">※右側は30階に到着しないのでご注意ください。</b></p>
  196.         </li>
  198.         <li class="next"><i class="fas fa-arrow-right"></i></li>
  200.         <li class="img"><span>7</span>
  201.           <img src="/img/ac7.jpg" alt="image" />
  202.           <p>弊社ロゴが目印の扉までお進みください。スタッフ一同、笑顔でお迎えさせて頂きます。</p>
  203.         </li>
  205.       </ol>
  206.     </div><!-- mapflow -->
  209.     <div id="acc_reserve">
  210.       <h3>来店のご予約</h3>
  211.       <p>お電話・メール、または来店予約ページからご予約いただけます。<br>ご希望の日時、ご来店人数、お探しのコインなど<br>あらかじめご希望をお聞かせください。</p>
  212.       <p id="acc_rebtn"><a href="/reservation/">ご来店予約はこちらから</a></p>
  213.     </div>
  215.     <div id="acc_re_message">
  216.       <ol>
  217.         <dl>予約優先制へのご理解とお願い</dl>
  218.         <dt>コインパレスでは、お客様のプライバシー・セキュリティ保護または、お客様おひとりおひとりのご相談の時間を大切にしたいという観点から、ご予約優先制となっております。<br>
  219.           そのため、ご予約なしのお客様にはお待ちいただくか、状況により当日のご来店をお断りさせていただく場合がございますので、ご理解ご協力のほど、よろしくお願い申し上げます。</dt>
  220.       </ol>
  221.     </div>
  223.     
  224.     
  226. </div><!--//kasowarap-->
  227. {% endblock %}