{% extends 'default_frame.twig' %}
{% block javascript %}{% endblock %}
{% block main %}
<div class="w-[880px] md:w-full mx-auto font-extralight text-lg mt-20 md:mt-10">
<p class="text-center text-[40px] md:text-xl tracking-[7px]">まなかの商品選び<br class="hidden md:block">サポートサービス</p>
<div class="relative w-full h-[1px] my-20 md:my-10">
<hr class="absolute left-0 w-[100vw] -ml-[calc(50vw-50%)]">
</div>
<div class="flex flex-col items-center md:px-4">
<div class="flex justify-center items-center md:items-start mb-10 md:mb-8">
<div class="relative">
<p class="text-3xl md:text-xl tracking-[7px] text-center">
<img src="{{ asset('assets/img/service/leaf.svg') }}" class="h-[52px] w-[52px] mb-[-32px] ml-[-32px] md:ml-0 md:mr-[-40px]">
商品選びに
<br class="hidden md:block"/>お悩みではありませんか?
</p>
</div>
</div>
<p class="w-[708px] md:w-full text-center tracking-[0.33rem] leading-5 mb-14 md:mb-9 text-sm md:text-xs md:leading-7 sm:text-left">
お客様に納得のいく商品探しをしていただくために、まなかでは商品を選ぶためのサポートサービスを複数ご用意しております。
<br class"hidden md:block">下記より、お気軽にお申し付けください。
</p>
<div class="flex flex-col gap-10 md:gap-5 items-center">
<div class="flex justify-between gap-10 md:gap-[5%]">
<a href="{{url('user_data',{route:'catalog'})}}" class="flex flex-col w-[418px] md:w-[47.5%] shadow-[0px_0px_10px_0px_#8989891A] justify-center items-center px-10 md:px-4 pt-4 md:pt-5 md:pb-7 pb-8 hover">
<img src="{{ asset('assets/img/service/catalog.svg') }}" class="w-[178px] md:w-[102px] aspect-square">
<p class="text-base text-center tracking-widest md:text-sm md:mb-4 mb-8">カタログお届け<br class="hidden md:block">サービス</p>
<img src="{{ asset('assets/img/service/free.svg') }}" class="h-[30px] md:h-[24px] w-[52px] md:w-[44px] mb-6 md:mb-4">
<div class="flex-grow flex items-start">
<p class="text-sm md:text-xs tracking-widest">まなかの商品カタログを無料でお届けします。</p>
</div>
</a>
<a href="{{url('user_data',{route:'photo_services'})}}" class="flex flex-col w-[418px] md:w-[47.5%] shadow-[0px_0px_10px_0px_#8989891A] justify-center items-center px-10 md:px-[18px] pt-4 pb-8 md:pt-5 md:pb-7 hover">
<img src="{{ asset('assets/img/service/camera.svg') }}" class="w-[178px] md:w-[102px] aspect-square">
<p class="text-base text-center tracking-widest md:text-sm md:mb-4 mb-8">コーディネート<br class="hidden md:block">撮影サービス</p>
<img src="{{ asset('assets/img/service/free.svg') }}" class="h-[30px] md:h-[24px] w-[52px] md:w-[44px] mb-6 md:mb-4">
<div class="flex-grow flex items-start">
<p class="text-sm md:text-xs tracking-widest">ご希望の商品の組み合わせをまなかが撮影し、メールでお送りするサービスです。</p>
</div>
</a>
</div>
<a href="{{url('user_data',{route:'pick_up_altar'})}}" class="flex flex-col w-[418px] md:w-[47.5%] shadow-[0px_0px_10px_0px_#8989891A] justify-center items-center px-10 md:px-[18px] pt-4 pb-8 md:pt-5 md:pb-7 hover">
<img src="{{ asset('assets/img/service/altar.svg') }}" class="w-[178px] md:w-[102px] aspect-square">
<p class="text-base text-center tracking-widest md:text-sm md:mb-4 mb-8">お仏壇引き取り<br class="hidden md:block">サービス</p>
<img src="{{ asset('assets/img/service/paid.svg') }}" class="h-[30px] md:h-[24px] w-[52px] md:w-[44px] mb-6 md:mb-4">
<div class="flex-grow flex items-start">
<p class="text-sm md:text-xs tracking-widest">提携会社によるお仏壇引き取りサービス(有償)をご紹介します。</p>
</div>
</a>
</div>
</div>
</div>
{% set breadcrumbs = [{'name': 'まなかの商品選びサポートサービス'}] %}
{% include('Block/breadcrumbs.twig') %}
{% endblock %}