app/template/default/about_tea.twig line 1

Open in your IDE?
  1. {% extends 'default_frame.twig' %}
  3. {% block main_id %}about{% endblock %}
  5. {% block main %}
  6. <section class="l-lower-mv product-mv">
  7.   <div class="inner l-lower-mv__inner">
  8.     <h1 class="l-lower-mv__title">About tea<span class="l-lower-mv__subtitle">こだわりの製茶工程</span></h1>
  9.   </div>
  10. </section>
  12. <section class="intro">
  13.     <div class="inner intro__inner">
  14.         <div class="l-breadcrumb">
  15.             <ul itemscope itemtype="https://schema.org/BreadcrumbList" class="l-breadcrumb__list">
  16.                 <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem" class="l-breadcrumb__item">
  17.                     <a itemprop="item" href="{{ url('homepage') }}" class="l-breadcrumb__link">
  18.                         <span class="freight-neo-pro" itemprop="name">TOP</span>
  19.                     </a>
  20.                     <meta itemprop="position" content="1" />
  21.                 </li>
  22.                 <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem" class="l-breadcrumb__item">
  23.                     <a itemprop="item" class="l-breadcrumb__link">
  24.                         <span class="freight-neo-pro" itemprop="name">こだわりの製茶工程</span>
  25.                     </a>
  26.                     <meta itemprop="position" content="2" />
  27.                 </li>
  28.             </ul>
  29.         </div>
  30.     <div class="intro__wrapper">
  31.       <h2 class="intro__title">
  32.         <span class="small">お茶ができるまで – 茗茶香のこだわりの製茶工程</span>
  33.         <span class="main">武夷山の自然と匠の技</span>
  34.       </h2>
  35.       <p class="intro__txt">中国・福建省の名山「武夷山（ぶいざん）」。<br>美しい渓谷と霧が広がるこの地で、茗茶香のお茶は育まれます。<br>現地の農家と職人たちの手によって、自然と調和した製法で丁寧に作られています。</p>
  36.       <div class="js-intro-swiper">
  37.         <div class="swiper-wrapper">
  38.           <div class="swiper-slide"><img src="{{ asset('assets/img/about_tea/img-intro01.jpg', 'user_data')}}" alt=""></div>
  39.           <div class="swiper-slide"><img src="{{ asset('assets/img/about_tea/img-intro02.jpg', 'user_data')}}" alt=""></div>
  40.           <div class="swiper-slide"><img src="{{ asset('assets/img/about_tea/img-intro03.jpg', 'user_data')}}" alt=""></div>
  41.           <div class="swiper-slide"><img src="{{ asset('assets/img/about_tea/img-intro04.jpg', 'user_data')}}" alt=""></div>
  42.         </div>
  43.         <div class="swiper-button-prev">
  44.           <svg class="icon">
  45.             <use xlink:href="/html/user_data/assets/img/symbol-defs.svg#icon-arrow_link"></use>
  46.           </svg>
  47.         </div>
  48.         <div class="swiper-button-next">
  49.           <svg class="icon">
  50.             <use xlink:href="/html/user_data/assets/img/symbol-defs.svg#icon-arrow_link"></use>
  51.           </svg>
  52.         </div>
  53.       </div>
  54.     </div>
  55.     </div>
  56. </section>
  58. <section class="process">
  59.   <div class="inner">
  60.     <h2 class="about__title"><span class="sub">Process</span>お茶づくりの6つの工程</h2>
  61.     <ul class="process__list">
  62.       <li class="process__item">
  63.         <p class="process__item_step">STEP<span class="num">01</span></p>
  64.         <div class="process__item_img"><img src="{{ asset('assets/img/about_tea/img-process01.jpg', 'user_data')}}" alt=""></div>
  65.         <h3 class="process__item_title">摘採（てきさい）</h3>
  66.         <p class="txt">春、新芽がやさしく手で摘み取られます。<br>厳選された葉のみを使用。</p>
  67.       </li>
  68.       <li class="process__item_arrow">
  69.         <svg class="icon">
  70.           <use xlink:href="/html/user_data/assets/img/symbol-defs.svg#icon-arrow_link"></use>
  71.         </svg>
  72.       </li>
  73.       <li class="process__item even">
  74.         <p class="process__item_step">STEP<span class="num">02</span></p>
  75.         <div class="process__item_img"><img src="{{ asset('assets/img/about_tea/img-process02.jpg', 'user_data')}}" alt=""></div>
  76.         <h3 class="process__item_title">萎凋（いちょう）</h3>
  77.         <p class="txt">摘んだ葉を風にさらし、水分をほどよく飛ばします。<br>香りと旨味を引き出す大切な工程です。</p>
  78.       </li>
  79.       <li class="process__item_arrow">
  80.         <svg class="icon">
  81.           <use xlink:href="/html/user_data/assets/img/symbol-defs.svg#icon-arrow_link"></use>
  82.         </svg>
  83.       </li>
  84.       <li class="process__item">
  85.         <p class="process__item_step">STEP<span class="num">03</span></p>
  86.         <div class="process__item_img"><img src="{{ asset('assets/img/about_tea/img-process03.jpg', 'user_data')}}" alt=""></div>
  87.         <h3 class="process__item_title">揉捻（じゅうねん）</h3>
  88.         <p class="txt">葉を優しく揉んで、茶葉の形を整えながら、<br>香り成分や茶の成分をしっかりと出します。</p>
  89.       </li>
  90.       <li class="process__item_arrow">
  91.         <svg class="icon">
  92.           <use xlink:href="/html/user_data/assets/img/symbol-defs.svg#icon-arrow_link"></use>
  93.         </svg>
  94.       </li>
  95.       <li class="process__item even">
  96.         <p class="process__item_step">STEP<span class="num">04</span></p>
  97.         <div class="process__item_img"><img src="{{ asset('assets/img/about_tea/img-process04.jpg', 'user_data')}}" alt=""></div>
  98.         <h3 class="process__item_title">発酵（はっこう）または殺青（さっせい）</h3>
  99.         <p class="txt">茶の種類に応じて、発酵または加熱で発酵を止め、<br>独自の風味を引き出します。</p>
  100.       </li>
  101.       <li class="process__item_arrow">
  102.         <svg class="icon">
  103.           <use xlink:href="/html/user_data/assets/img/symbol-defs.svg#icon-arrow_link"></use>
  104.         </svg>
  105.       </li>
  106.       <li class="process__item">
  107.         <p class="process__item_step">STEP<span class="num">05</span></p>
  108.         <div class="process__item_img"><img src="{{ asset('assets/img/about_tea/img-process05.jpg', 'user_data')}}" alt=""></div>
  109.         <h3 class="process__item_title">乾燥（かんそう）</h3>
  110.         <p class="txt">じっくりと茶葉を乾かし、風味を閉じ込めます。<br>時間をかけて丁寧に仕上げます。</p>
  111.       </li>
  112.       <li class="process__item_arrow">
  113.         <svg class="icon">
  114.           <use xlink:href="/html/user_data/assets/img/symbol-defs.svg#icon-arrow_link"></use>
  115.         </svg>
  116.       </li>
  117.       <li class="process__item even">
  118.         <p class="process__item_step">STEP<span class="num">06</span></p>
  119.         <div class="process__item_img"><img src="{{ asset('assets/img/about_tea/img-process06.jpg', 'user_data')}}" alt=""></div>
  120.         <h3 class="process__item_title">選別・仕上げ</h3>
  121.         <p class="txt">最後に、形や大きさを整え、茗茶香としての品質基準をクリアした茶葉だけを選び抜きます。</p>
  122.       </li>
  123.     </ul>
  124.   </div>
  125. </section>
  127. <section class="end">
  128.   <div class="inner">
  129.     <h2 class="about__title"><span class="sub">お茶ができるまで – 茗茶香のこだわりの製茶工程</span>職人の想いと誇り</h2>
  130.     <p class="end__txt">「一杯の茶に、<span class="ib">山の恵みと人の心を。」</span></p>
  131.   </div>
  132.   <ul class="end__img">
  133.     <li class="end__img_item"><img src="{{ asset('assets/img/about_tea/img-end01.jpg', 'user_data')}}" alt=""></li>
  134.     <li class="end__img_item"><img src="{{ asset('assets/img/about_tea/img-end02.jpg', 'user_data')}}" alt=""></li>
  135.     <li class="end__img_item"><img src="{{ asset('assets/img/about_tea/img-end03.jpg', 'user_data')}}" alt=""></li>
  136.     <li class="end__img_item"><img src="{{ asset('assets/img/about_tea/img-end04.jpg', 'user_data')}}" alt=""></li>
  137.   </ul>
  138. </section>
  139. {% endblock %}