{#
This file is part of EC-CUBE
Copyright(c) EC-CUBE CO.,LTD. All Rights Reserved.
http://www.ec-cube.co.jp/
For the full copyright and license information, please view the LICENSE
file that was distributed with this source code.
#}
{% extends 'default_frame.twig' %}
{% set body_class = 'front_page' %}
{% set guide_details = [
{
'name':'1. ご注文手順',
'href':'/user_data/guide_detail#sec01'
},
{
'name':'2. 送料・配送方法',
'href':'/user_data/guide_detail#sec02'
},
{
'name':'3. お支払い方法',
'href':'/user_data/guide_detail#sec03'
},
{
'name':'4. 会員登録について',
'href':'/user_data/guide_detail#sec04'
},
{
'name':'5. お仏壇の引き取りについて',
'href':'/user_data/guide_detail#sec05'
},
{
'name':'6. お位牌への名入れサービス',
'href':'/user_data/guide_detail#sec06'
},
{
'name':'7. 返品・交換・キャンセル・追加',
'href':'/user_data/guide_detail#sec07'
},
{
'name':'8. 領収書の発行',
'href':'/user_data/guide_detail#sec08'
},
{
'name':'9. 運営会社について',
'href':'/user_data/guide_detail#sec09'
},
] %}
{% block main %}
<div class="w-full max-w-[720px] lg:max-w-none lg:mx-0 flex flex-col tems-center justify-center mx-auto">
<div class="w-full lg:px-4 flex gap-x-[70px] justify-center animate-slideIn">
<div class="w-full max-w-[720px] xl:w-full flex flex-col mt-10 md:mt-6 font-extralight">
<div class="flex flex-col mb-8 md:mb-4">
<h2 class="text-[26px] md:text-lg mb-7 md:mb-5 font-extralight">ご利用ガイド・サービス</h2>
<p class="text-[#666666] md:text-sm font-extralight">「祈りの道具屋まなか」をご利用いただくのに便利な情報をまとめました。</p>
</div>
<div class="px-6 py-5 bg-manakaBeige md:px-5 md:py-4 hover:bg-[#EEEEE9]">
<a href="{{url('user_data',{route:'guide_detail'})}}" class="flex justify-between items-start mb-5">
<div class="flex flex-col gap-y-4 w-full ">
<div class="flex justify-between items-center">
<div class="flex gap-x-[10px]">
<img src="{{ asset('assets/img/guide/icn-guide.svg') }}" alt="ご利用ガイド" class="w-[38px] md:w-[26px]">
<h3 class="text-2xl md:text-lg font-bold">ご利用ガイド</h3>
</div>
<img src="{{ asset('assets/icon/ChevronDownOutline.svg') }}" alt="ご利用ガイド詳細へ" class="w-6 md:w-6 h-auto -rotate-90">
</div>
<p class="text-[#666666] md:text-sm">ご注文方法・商品がお手元に届くまでの手順などをご紹介します。</p>
</div>
</a>
<ul class="px-3 grid grid-rows-5 grid-flow-col gap-x-4 gap-y-0 lg:grid-rows-9 md:px-1">
{% for guide_detail in guide_details %}
<a href="{{guide_detail.href}} ">
<li class="flex justify-between items-center w-full pr-4 border-[#CCCCCC] border-y-[2px] mb-[-2px] py-4 text-[#666666] md:text-sm">
<p>{{guide_detail.name}}</p>
<img src="{{ asset('assets/icon/ChevronDownOutline.svg') }}" alt="" class="w-4 h-4 -rotate-90">
</li>
</a>
{% endfor %}
</ul>
</div>
<div class="px-6 py-8 bg-manakaBeige md:px-5 md:py-4 hover:bg-[#EEEEE9] mt-7">
<a href="{{ url('user_data', {'route': 'qa' }) }}" class="flex justify-between items-start">
<div class="flex flex-col gap-y-4 w-full">
<div class="flex justify-between items-center">
<div class="flex gap-x-[10px]">
<img src="{{ asset('assets/img/guide/icn-qa.svg') }}" alt="ご利用ガイド" class="w-[38px] md:w-[26px]">
<h3 class="text-2xl md:text-lg font-bold">よくあるご質問</h3>
</div>
<img src="{{ asset('assets/icon/ChevronDownOutline.svg') }}" alt="ご利用ガイド詳細へ" class="w-6 md:w-6 h-auto -rotate-90">
</div>
<p class="text-[#666666]">よく頂く質問へのご回答をまとめました。</p>
</div>
</a>
</div>
<div class="px-6 py-8 bg-manakaBeige md:px-5 md:py-4 hover:bg-[#EEEEE9] mt-7">
<a href="{{ url('user_data', {'route': 'catalog' }) }}" class="flex justify-between items-start ">
<div class=" flex flex-col gap-y-4 w-full">
<div class="flex justify-between items-center">
<div class="flex gap-x-[10px] items-center">
<img src="{{ asset('assets/img/guide/icn-catalog.svg') }}" alt="ご利用ガイド" class="w-[38px] md:w-[26px]">
<h3 class="text-2xl md:text-lg font-bold">カタログ請求</h3>
<p class="px-3 py-[1px] bg-[#A7A79B] text-white rounded-full text-center items-center flex md:text-[10px] text-sm">無料</p>
</div>
<img src="{{ asset('assets/icon/ChevronDownOutline.svg') }}" alt="ご利用ガイド詳細へ" class="w-6 md:w-6 h-auto -rotate-90">
</div>
<p class="text-[#666666]">まなかの商品カタログを無料でお届けします。</p>
</div>
</a>
</div>
<div class="px-6 py-8 bg-manakaBeige md:px-5 md:py-4 hover:bg-[#EEEEE9] mt-7">
<a href="{{ url('user_data', {'route': 'photo_services' }) }}" class="flex justify-between items-start">
<div class="flex flex-col gap-y-4 w-full">
<div class="items-center flex justify-between">
<div class="flex gap-x-[10px] items-center lg:flex-col lg:items-start lg:justify-start lg:gap-y-[6px]">
<div class="gap-x-2 flex">
<img src="{{ asset('assets/img/guide/icn-photo.svg') }}" alt="ご利用ガイド" class="w-[38px] md:w-[26px]">
<h3 class="text-2xl md:text-lg font-bold whitespace-nowrap">コーディネート撮影サービス</h3>
</div>
<p class="px-3 py-[1px] bg-[#A7A79B] text-white rounded-full text-center items-center flex md:text-[10px] text-sm md:ml-9">無料</p>
</div>
<img src="{{ asset('assets/icon/ChevronDownOutline.svg') }}" alt="ご利用ガイド詳細へ" class="w-6 md:w-6 h-auto -rotate-90">
</div>
<div class="flex flex-col gap-y-1">
<p class="text-[#666666] md:text-sm">ご希望の商品の組み合わせをまなかが撮影し、メールでお送りするサービスです。</p>
<p class="text-[#666666] md:text-sm">遠方の方など、ショールームに足を運べないお客様にご好評頂いております。</p>
</div>
</div>
</a>
</div>
<div class="px-6 py-8 bg-manakaBeige md:px-5 md:py-4 hover:bg-[#EEEEE9] mt-7">
<a href="{{ url('user_data', {'route': 'naire' }) }}" class="flex justify-between items-start">
<div class="w-full flex flex-col gap-y-4">
<div class="flex items-center justify-between">
<div class="flex gap-x-[10px] items-center">
<img src="{{ asset('assets/img/guide/icn-jihori.svg') }}" alt="ご利用ガイド" class="w-[38px] md:w-[26px]">
<h3 class="text-2xl md:text-lg font-bold">お位牌への名入れについて</h3>
</div>
<img src="{{ asset('assets/icon/ChevronDownOutline.svg') }}" alt="ご利用ガイド詳細へ" class="w-6 md:w-6 h-auto -rotate-90">
</div>
<p class="text-[#666666] md:text-sm ">お位牌ごとの仕様や、注意事項をまとめました。</p>
</div>
</a>
</div>
</div>
</div>
{% set breadcrumbs = [
{
'name':'ご利用ガイド',
}
] %}
{{ include("Block/breadcrumbs.twig") }}
</div>
{% endblock %}