app/template/default/Page/about.twig line 1

Open in your IDE?
  1. {% extends 'fullwidth_frame.twig' %}
  3. {% block main %}
  4.     <main class="ec-layoutRole__main">
  6.         <div class="home_title__inner home_title__inner_no_line">
  7.             <h2 class="home_en_title "><span class="en">About</span><small>IKUSとは</small></h2>
  8.         </div><!--/.home_title__inner-->
  10.         <div class="about_slide_area">
  12.             <div class="about_slide_area__inner">
  13.                 <div class="main_visual_overlay">
  14.                     <div class="main_visual_overlay__left"></div>
  15.                     <div class="main_visual_overlay__line"></div>
  16.                     <div class="main_visual_overlay__center"></div>
  17.                     <div class="main_visual_overlay__line"></div>
  18.                     <div class="main_visual_overlay__right"></div>
  19.                 </div>
  21.                 <div class="swiper main_visual">
  22.                     <div class="swiper-wrapper">
  23.                         <div class="item swiper-slide">
  24.                             <div data-swiper-parallax-x="100%" data-swiper-parallax-scale="1" class="swiper_img">
  25.                                 <img src="{{ asset('assets/img/about/slide03.jpg') }}" width="2600" height="1485" alt="">
  26.                             </div>
  27.                         </div>
  28.                         <div class="item swiper-slide">
  29.                             <div data-swiper-parallax-x="100%" data-swiper-parallax-scale="1" class="swiper_img">
  30.                                 <img src="{{ asset('assets/img/about/slide01.jpg') }}" width="2600" height="1485" alt="">
  31.                             </div>
  32.                         </div>
  33.                         <div class="item swiper-slide">
  34.                             <div data-swiper-parallax-x="100%" data-swiper-parallax-scale="1" class="swiper_img">
  35.                                 <img src="{{ asset('assets/img/about/slide02.jpg') }}" width="2500" height="1428" alt="">
  36.                             </div>
  37.                         </div>
  38.                     </div><!--/.wrapper-->
  39.                 </div><!--/.main_visual-->
  41.                 <div class="swiper-pagination slider_pagination"></div>
  43.             </div><!--/.about_slide_area__inner-->
  46.             <div class="about_slide_area__text">
  47.                 <p class="about_slide_copy">
  48.                     自分の<br>
  49.                     好きなものと、<br>
  50.                     出会う
  51.                 </p>
  53.                 <p class="about_slide_en">
  54.                     Kind your likes
  55.                 </p>
  56.             </div>
  58.         </div><!--/.about_slide_area-->
  61.         <div class="about_section about_section--desc animation">
  62.             <div class="about_desc">
  63.                 <p>
  64.                     一生で好きなものに会える数は、きっと僅かだ。<br>
  65.                     だからこそ直感で「良い」と分かるものに出会える感動をこの場所から届けたい。<br>
  66.                     {# 北欧デザインの名作CARL HANSEN & SON、<br>
  67.                     100年後の人にも愛されるものづくりをするMASTERWALなど<br>#}
  68.                     有名な家具をはじめ、そのほかまだみなさんに知られていない<br>
  69.                     素敵な家具や雑貨も揃えてお待ちしています。
  70.                 </p>
  72.                 <p>
  73.                     あなたの「好き」が、もっと暮らしに深みを与える。<br>
  74.                     「好き」と出会うお手伝いを私たちにさせてください。
  75.                 </p>
  76.             </div>
  77.         </div>
  78.         <!-- /.about_section--desc -->
  81.         <section class="about_section about_section--lineup animation">
  82.             <div class="about_container">
  83.                 <div class="about_section__title_area">
  84.                     <h2 class="about_section__title">
  85.                         Line up
  86.                     </h2>
  88.                     <div class="about_section__desc_area">
  89.                         <p class="about_section__copy">
  90.                             多彩な家具・インテリアとデザインラインナップで<span class="br"></span>
  91.                             ライフスタイルを演出します。
  92.                         </p>
  94.                         <p class="about_section__desc">
  95.                             人の手によって受け継がれてきた高度な技と魂で、伝統を超えた更なるモノづくりに挑み続ける飛騨・高山の家具や優しく滑らかな手触りと、木の曲線、張地のカラーバリエーションの豊富さなど、想像するだけでワクワクするような木工家具、人気の北欧モダンの家具など幅広くお取扱いしております。合わせて、インテリアを更にブラッシュアップさせるラグやサイドファニチャーもございます。
  96.                         </p>
  98.                         <div class="about_section__btn about_section__btn_top">
  99.                             <a class="base_link_brn base_link_brn__white" href="{{ url('homepage') }}category">
  100.                                 <span>商品カテゴリーを見る</span>
  101.                                 <span>商品カテゴリーを見る</span>
  102.                             </a>
  103.                         </div>
  104.                     </div>
  105.                     <!-- /.about_section__desc_area -->
  106.                 </div>
  107.                 <!-- /.about_section__title_area -->
  109.                 <div class="about_category_grid">
  110.                     <div class="grid__item"><!--PC時余白調整用--></div>
  111.                     <div class="grid__item">
  112.                         <a href="{{ url('homepage') }}products/list?category_id=10" class="category__card">
  113.                             <figure class="category__card__img">
  114.                                 <img src="{{ asset('assets/img/about/lineup_01.jpg') }}" width="900" height="900" loading="lazy" alt="">
  115.                                 <figcaption>
  116.                                     ソファ
  117.                                 </figcaption>
  118.                             </figure>
  119.                         </a>
  120.                     </div>
  121.                     <div class="grid__item">
  122.                         <a href="{{ url('homepage') }}products/list?category_id=11" class="category__card">
  123.                             <figure class="category__card__img">
  124.                                 <img src="{{ asset('assets/img/about/lineup_02.jpg') }}" width="900" height="900" loading="lazy" alt="">
  125.                                 <figcaption>
  126.                                     チェア
  127.                                 </figcaption>
  128.                             </figure>
  129.                         </a>
  130.                     </div>
  131.                     <div class="grid__item">
  132.                         <a href="{{ url('homepage') }}products/list?category_id=12" class="category__card">
  133.                             <figure class="category__card__img">
  134.                                 <img src="{{ asset('assets/img/about/lineup_03.jpg') }}" width="900" height="900" loading="lazy" alt="">
  135.                                 <figcaption>
  136.                                     スツール
  137.                                 </figcaption>
  138.                             </figure>
  139.                         </a>
  140.                     </div>
  141.                     <div class="grid__item">
  142.                         <a href="{{ url('homepage') }}products/list?category_id=13" class="category__card">
  143.                             <figure class="category__card__img">
  144.                                 <img src="{{ asset('assets/img/about/lineup_04.jpg') }}" width="900" height="900" loading="lazy" alt="">
  145.                                 <figcaption>
  146.                                     ベンチ
  147.                                 </figcaption>
  148.                             </figure>
  149.                         </a>
  150.                     </div>
  151.                     <div class="grid__item">
  152.                         <a href="{{ url('homepage') }}products/list?category_id=15" class="category__card">
  153.                             <figure class="category__card__img">
  154.                                 <img src="{{ asset('assets/img/about/lineup_05.jpg') }}" width="900" height="900" loading="lazy" alt="">
  155.                                 <figcaption>
  156.                                     テーブル
  157.                                 </figcaption>
  158.                             </figure>
  159.                         </a>
  160.                     </div>
  161.                     <div class="grid__item">
  162.                         <a href="{{ url('homepage') }}products/list?category_id=16" class="category__card">
  163.                             <figure class="category__card__img">
  164.                                 <img src="{{ asset('assets/img/about/lineup_06.jpg') }}" width="900" height="900" loading="lazy" alt="">
  165.                                 <figcaption>
  166.                                     サイドテーブル
  167.                                 </figcaption>
  168.                             </figure>
  169.                         </a>
  170.                     </div>
  171.                     <div class="grid__item"><!--PC時余白調整用--></div>
  172.                     <div class="grid__item"><!--PC時余白調整用--></div>
  173.                     <div class="grid__item">
  174.                         <a href="{{ url('homepage') }}products/list?category_id=17" class="category__card">
  175.                             <figure class="category__card__img">
  176.                                 <img src="{{ asset('assets/img/about/lineup_07.jpg') }}" width="900" height="900" loading="lazy" alt="">
  177.                                 <figcaption>
  178.                                     ダイニング
  179.                                 </figcaption>
  180.                             </figure>
  181.                         </a>
  182.                     </div>
  183.                     <div class="grid__item">
  184.                         <a href="{{ url('homepage') }}products/list?category_id=18" class="category__card">
  185.                             <figure class="category__card__img">
  186.                                 <img src="{{ asset('assets/img/about/lineup_08.jpg') }}" width="900" height="900" loading="lazy" alt="">
  187.                                 <figcaption>
  188.                                     デスク
  189.                                 </figcaption>
  190.                             </figure>
  191.                         </a>
  192.                     </div>
  193.                     <div class="grid__item">
  194.                         <a href="{{ url('homepage') }}products/list?category_id=19" class="category__card">
  195.                             <figure class="category__card__img">
  196.                                 <img src="{{ asset('assets/img/about/lineup_09.jpg') }}" width="900" height="900" loading="lazy" alt="">
  197.                                 <figcaption>
  198.                                     テレビボード
  199.                                 </figcaption>
  200.                             </figure>
  201.                         </a>
  202.                     </div>
  203.                 </div>
  204.             </div>
  205.             <!-- /.about_container -->
  207.         </section>
  208.         <!-- /.about_section--lineup -->
  210.         <section class="about_section about_section--brand animation">
  211.             <div class="about_container">
  212.                 <div class="about_section__title_area">
  213.                     <h2 class="about_section__title">
  214.                         Brand
  215.                     </h2>
  217.                     <div class="about_section__desc_area">
  218.                         <p class="about_section__copy">
  219.                             ハイブランドからカジュアルブランドまで
  220.                         </p>
  222.                         <p class="about_section__desc">
  223.                             IKUS（イクス）ではカリモク ニュースタンダード、マスターウォールなどの家具をとりそろえております。
  224.                         </p>
  226.                         <div class="about_section__btn">
  227.                             <a class="base_link_brn" href="{{ url('homepage') }}brand">
  228.                                 <span>取り扱いブランドを見る</span>
  229.                                 <span>取り扱いブランドを見る</span>
  230.                             </a>
  231.                         </div>
  232.                     </div>
  233.                     <!-- /.about_section__desc_area -->
  234.                 </div>
  235.                 <!-- /.about_section__title_area -->
  237.                 <div class="swiper brand_slider">
  239.                     <div class="swiper-scrollbar"></div>
  241.                     {# MASTERWAL #}
  242.                     <div class="swiper-wrapper">
  243.                         <div class="swiper-slide">
  244.                             <a href="{{ url('homepage') }}products/list?category_id=35" class="brand_card">
  245.                                 <div class="brand_card__img">
  246.                                     <img src="{{ asset('assets/img/about/brand_01_img.jpg') }}" width="900" height="900" loading="lazy" alt="">
  247.                                 </div>
  248.                                 <div class="brand_card__logo">
  249.                                     <img src="{{ asset('assets/img/about/brand_01_logo.png') }}" width="145" height="40" loading="lazy" alt="">
  250.                                 </div>
  251.                             </a>
  252.                         </div>
  253.                         {# KarimokuNewStandard #}
  254.                         <div class="swiper-slide">
  255.                             <a href="{{ url('homepage') }}products/list?category_id=36" class="brand_card">
  256.                                 <div class="brand_card__img">
  257.                                     <img src="{{ asset('assets/img/about/brand_02_img.jpg') }}" width="900" height="900" loading="lazy" alt="">
  258.                                 </div>
  259.                                 <div class="brand_card__logo">
  260.                                     <img src="{{ asset('assets/img/about/brand_02_logo.png') }}" width="145" height="40" loading="lazy" alt="">
  261.                                 </div>
  262.                             </a>
  263.                         </div>
  264.                         {# 朝日木材加工 BRIDGE #}
  265.                         <div class="swiper-slide">
  266.                             <a href="{{ url('homepage') }}products/list?category_id=39" class="brand_card">
  267.                                 <div class="brand_card__img">
  268.                                     <img src="{{ asset('assets/img/about/brand_03_img.jpg') }}" width="900" height="900" loading="lazy" alt="">
  269.                                 </div>
  270.                                 <div class="brand_card__logo">
  271.                                     <img src="{{ asset('assets/img/about/brand_03_logo.png') }}" width="145" height="40" loading="lazy" alt="">
  272.                                 </div>
  273.                             </a>
  274.                         </div>
  275.                         {# 日本ベッド #}
  276.                         <div class="swiper-slide">
  277.                             <a href="{{ url('homepage') }}products/list?category_id=40" class="brand_card">
  278.                                 <div class="brand_card__img">
  279.                                     <img src="{{ asset('assets/img/about/brand_04_img.jpg') }}" width="900" height="900" loading="lazy" alt="">
  280.                                 </div>
  281.                                 <div class="brand_card__logo">
  282.                                     <img src="{{ asset('assets/img/about/brand_04_logo.png') }}" width="145" height="40" loading="lazy" alt="">
  283.                                 </div>
  284.                             </a>
  285.                         </div>
  286.                         {# HAY #}
  287.                         <div class="swiper-slide">
  288.                             <a href="{{ url('homepage') }}products/list?category_id=70" class="brand_card">
  289.                                 <div class="brand_card__img">
  290.                                     <img src="{{ asset('assets/img/about/brand_05_img.jpg') }}" width="900" height="900" loading="lazy" alt="">
  291.                                 </div>
  292.                                 <div class="brand_card__logo">
  293.                                     <img src="{{ asset('assets/img/about/brand_05_logo.png') }}" width="145" height="40" loading="lazy" alt="">
  294.                                 </div>
  295.                             </a>
  296.                         </div>
  297.                     </div><!-- /swiper-wrapper -->
  298.                 </div><!-- /swiper -->
  299.             </div>
  300.             <!-- /.about_container -->
  301.         </section>
  302.         <!-- /.about_section--brand -->
  304.         {#
  305.         <section class="about_section about_section--coordinate animation">
  306.             <div class="about_container">
  307.                 <div class="about_section__title_area">
  308.                     <h2 class="about_section__title">
  309.                         Coordinate
  310.                     </h2>
  312.                     <div class="about_section__desc_area">
  313.                         <p class="about_section__copy">
  314.                             お客様のニーズに合わせて、最適な空間をご提案
  315.                         </p>
  317.                         <div class="about_section__btn">
  318.                             <a class="base_link_brn" href="https://online.ikus.furniture/coordinate">
  319.                                 <span>コーディネートページへ</span>
  320.                                 <span>コーディネートページへ</span>
  321.                             </a>
  322.                         </div>
  323.                     </div>
  324.                     <!-- /.about_section__desc_area -->
  325.                 </div>
  326.                 <!-- /.about_section__title_area -->
  328.                 <section class="about_coordinate">
  329.                     <div class="about_coordinate__text_area">
  330.                         <h3 class="about_coordinate__title">オフィスデザインコーディネート</h3>
  331.                         <p class="about_coordinate__copy">
  332.                             多様なワークスタイルに対応する<br>
  333.                             オフィスコーディネート
  334.                         </p>
  335.                         <p class="about_coordinate__desc">
  336.                             社会の変化による多様な働き方やスタッフの働きやすい環境などご要望の聞き取り・現地採寸からご提案・スケジュール調整・組立設置まで一貫して行っております。<br>
  337.                             オフィス家具メーカーだけでなく、デザイン家具で新しいオフィス環境のご提案もさせていただきます。
  338.                         </p>
  339.                         <p class="about_coordinate__kome">
  340.                             ※オフィス家具の（株）オカムラ・（株）イトーキの代理店として商業施設や大規模なオフィス家具、事務用品などのご提案にも対応いたします。
  341.                         </p>
  342.                     </div>
  343.                     <!-- /.about_coordinate__text_area -->
  345.                     <div class="about_coordinate__img_area">
  346.                         <img src="{{ asset('assets/img/about/coordinate_01.jpg') }}" width="2427" height="1371" loading="lazy" alt="">
  347.                     </div>
  348.                     <!-- /.about_coordinate__img_area -->
  349.                 </section>
  350.                 <!-- /.about_coordinate -->
  352.                 <section class="about_coordinate">
  353.                     <div class="about_coordinate__text_area">
  354.                         <h3 class="about_coordinate__title">店舗デザインコーディネート</h3>
  355.                         <p class="about_coordinate__copy">
  356.                             個性を尊重してスタイルに合わせた<br>
  357.                             コーディネートをプロデュース
  358.                         </p>
  359.                         <p class="about_coordinate__desc">
  360.                             飲食店・アパレルショップ・ネイルサロンなど店舗のテーマやターゲット層、目指したい雰囲気など、オーナー様の個性を大切にご要望に合わせて内装や家具だけでなく什器や雑貨・照明器具などのご相談にも応じております。
  361.                         </p>
  362.                     </div>
  363.                     <!-- /.about_coordinate__text_area -->
  365.                     <div class="about_coordinate__img_area">
  366.                         <img src="{{ asset('assets/img/about/coordinate_02.jpg') }}" width="2427" height="1371" loading="lazy" alt="">
  367.                     </div>
  368.                     <!-- /.about_coordinate__img_area -->
  369.                 </section>
  370.                 <!-- /.about_coordinate -->
  371.             </div>
  372.             <!-- /.about_container -->
  374.         </section>
  375.         <!-- /.about_section--coordinate -->
  376.         #}
  378.         <section class="about_section about_section--store animation">
  379.             <div class="about_container">
  380.                 <div class="about_section__title_area">
  381.                     <h2 class="about_section__title">
  382.                         Store
  383.                     </h2>
  385.                     <div class="about_section__desc_area">
  386.                         <p class="about_section__copy">
  387.                             店舗で商品を実際に体験する
  388.                         </p>
  390.                         <p class="about_section__desc">
  391.                             IKUS（イクス）は広島県内に店舗を持っています。<br>
  392.                             ショールームもあり、カール・ハンセン&サン、カリモクニュースタンダード、マスターウォールなどの家具を実際に体感することができます。
  393.                         </p>
  395.                     </div>
  396.                     <!-- /.about_section__desc_area -->
  397.                 </div>
  398.                 <!-- /.about_section__title_area -->
  401.                 <div class="about_store">
  402.                     <div class="about_store__column">
  403.                         <div class="about_store__map">
  404.                             <img src="{{ asset('assets/img/about/map.jpg') }}" width="2798" height="2074" loading="lazy" alt="">
  405.                         </div>
  407.                         <section class="about_store__shop">
  408.                             <h3 class="about_store__shop__title">
  409.                                 HIROSHIMA<br>
  410.                                 SHOP
  411.                             </h3>
  412.                             <div class="about_store__shop__img">
  413.                                 <img src="{{ asset('assets/img/about/store_hiroshima.jpg') }}" width="800" height="554" loading="lazy" alt="">
  414.                             </div>
  415.                             <p class="about_store__shop__info">
  416.                                 731-0113 広島市安佐南区西原9-6-10 <a href="https://goo.gl/maps/2grPVn2oj5sAx8H36" target="_blank" class="map_link">地図を見る</a><br>
  417.                                 TEL 082-554-0382<br>
  418.                                 Open / 平日11:00~19:00・土日祝10:00~19:00<br>
  419.                                 Close / 火・水曜日
  420.                             </p>
  421.                         </section>
  422.                         <!-- /.about_store__shop -->
  424.                         <section class="about_store__shop">
  425.                             <h3 class="about_store__shop__title">
  426.                                 HIGASHI-HIROSHIMA<br>
  427.                                 SHOP
  428.                             </h3>
  429.                             <div class="about_store__shop__img">
  430.                                 <img src="{{ asset('assets/img/about/store_higashi_hiroshima.jpg') }}" width="800" height="554" loading="lazy" alt="">
  431.                             </div>
  432.                             <p class="about_store__shop__info">
  433.                                 739-0007 東広島市西条土与丸4-3-31 <a href="https://goo.gl/maps/AWJmLUj1KhC4SWih8" target="_blank" class="map_link">地図を見る</a><br>
  434.                                 TEL 082-422-7870<br>
  435.                                 Open / 10:00~19:00<br>
  436.                                 Close / 火・水曜日
  437.                             </p>
  438.                         </section>
  439.                         <!-- /.about_store__shop -->
  440.                     </div>
  441.                     <!-- /.about_store__column -->
  443.                     <ul class="about_store__list">
  444.                         <li>
  445.                             <p class="about_store__list__name">家具のセレクトショップ IKUS FURNI & COO</p>
  446.                             <a class="base_link_brn base_link_brn__white" target="_blank" href="https://ikus.furniture/">
  447.                                 <span>店舗ページを見る</span>
  448.                                 <span>店舗ページを見る</span>
  449.                             </a>
  450.                         </li>
  451.                     </ul>
  452.                     <!-- /.about_store__list -->
  453.                 </div>
  455.             </div>
  456.             <!-- /.about_container -->
  458.         </section>
  459.         <!-- /.about_section--store -->
  462.     </main>
  464.     <script>
  465.         $(function() {
  467.             /*メインスライダー*/
  469.             const swiper_main = new Swiper('.main_visual', {
  471.                 speed: 900,
  472.                 slidesPerView: 1,
  473.                 autoplay: {
  474.                     delay: 6000
  475.                 },
  476.                 loop: true,
  477.                 allowTouchMove: true,
  478.                 parallax: true,
  479.                 pagination: {
  480.                     el: ".slider_pagination",
  481.                     clickable: true,
  482.                 },
  483.             });
  486.             /*ブランドスライダー*/
  488.             const swiper_brand = new Swiper('.brand_slider', {
  489.                 slidesPerView: 'auto',
  490.                 spaceBetween: 16,
  491.                 grabCursor: true,
  492.                 breakpoints: {
  493.                     990: {
  494.                         spaceBetween: 32,
  495.                     }
  496.                 },
  497.                 scrollbar: {
  498.                     el: '.brand_slider .swiper-scrollbar',
  499.                 },
  500.             });
  502.         });
  504.         // 対象となる要素をすべて変数へ格納
  505.         const animeTargets = document.querySelectorAll(".animation");
  507.         // オプション
  508.         // root : nullの場合はブラウザのビューポート
  509.         // rootMargin : 0とすると↑で指定したルート要素と交差した瞬間（1pxでも）発火。今回のように-50%とすると対象要素がルート要素であるブラウザのビューポートの半分のところで交差したら発火となる。ルート要素を基準としたオプション。
  510.         // threshold : 閾値（しきいち）。どのくらい交差したら発火するかを指定する。0とすれば交差した瞬間に発火。対象要素を基準としたオプション。
  511.         // rootMarginとthresholdで交差してから（可視範囲に入ってから）どの程度で発火するかを調整できるということ。
  512.         const animeOption = {
  513.             root: null,
  514.             rootMargin: "-20% 0px",
  515.             threshold: 0
  516.         };
  518.         // 対象となるターゲットが可視範囲に入ったらis-animatedというクラスを付与する関数
  519.         const targets = (entries) => {
  520.             entries.forEach(entry => {
  521.                 if (entry.isIntersecting) {
  522.                     entry.target.classList.add("is-animated");
  523.                 }
  524.             });
  525.         };
  527.         // 可視範囲に入ったら実行する関数targetsとfadeOptionを引数にしてIntersectionObserverコンストラクターを呼び出し
  528.         const animeObserver = new IntersectionObserver(targets, animeOption);
  530.         // animeTargetsのすべての要素を監視印象に登録
  531.         animeTargets.forEach((target) => {
  532.             animeObserver.observe(target);
  533.         });
  535.     </script>
  537. {% endblock %}