{#
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' %}
{% block javascript %}
<script>
const slideInContents = {{ [
"oihai",
"butuguset",
"set",
"temoto_kuyou",
"products",
"support",
"about",
"showroom",
"special",
"news"
]|json_encode|raw }};
function toggleIcons(section) {
if ($(window).width() <= 768) {
$(section.details).hide();
$(section.addIcon).show();
$(section.removeIcon).hide();
} else {
$(section.details).show();
$(section.addIcon).hide();
$(section.removeIcon).hide();
}
}
if($(window).width() <= 768) {
$('.hover').removeClass('hover');
} else {
$('.hover').addClass('hover');
};
$(window).on('scroll', function () {
for (let i = 0; i < slideInContents.length; i++) {
var value = slideInContents[i];
var winH = $(window).height();
var objH = $ (`.${value}`).outerHeight();
var objTop = $ (`.${value}`).offset().top;
var scroll;
scroll = $(window).scrollTop();
if (scroll >= objTop - winH) {
$ (`.${value}`).addClass('animate-slideIn will-change-transform');
}
}
});
</script>
{% endblock javascript %}
{% block stylesheet %}
<style>
@media screen and (min-width: 2000px) {
.products{
width: 1650px;
margin: 0px auto;
}
.about,
.showroom,
.support,
.special,
.news {
width: 1650px;
margin: 172px auto 0px;
}
}
</style>
{% endblock %}
{% set product_lists = [
[
2,
{
'class': 'obutudan',
'image': 'assets/img/top/obutudan.webp',
'spimage':'assets/img/top/obutudan-sp.webp',
'title': 'お仏壇・ステージ',
'subtitle': 'あなたの想いを、置ける場所',
},
],
[
1,
{
'class': 'oihai',
'image': 'assets/img/top/ihai.webp',
'spimage':'assets/img/top/ihai-sp.webp',
'title': 'お位牌',
'subtitle': '想いそのものを、かたちに',
},
],
[
3,
{
'class': 'butuguset',
'image': 'assets/img/top/butuguset.webp',
'spimage':'assets/img/top/butuguset-sp.webp',
'title': '仏具・日用品',
'subtitle': 'あなたの想いに、らしさを加える',
},
],
[
4,
{
'class': 'set',
'image': 'assets/img/top/sonota.webp',
'spimage':'assets/img/top/sonota-sp.webp',
'title': '仏壇・仏具セット',
'subtitle': 'おすすめ、人気のコーディネート',
},
],
[
21,
{
'class': 'temoto_kuyou',
'image': 'assets/img/top/temotokuyou.webp',
'spimage':'assets/img/top/temotokuyou-sp.webp',
'title': '手元供養',
'subtitle': 'お仏壇のない、小さなご供養',
},
]
]
%}
{% block main %}
<div class="flex flex-col items-center justify-center w-full mv">
<img src="{{asset('assets/img/top/FV_img_PC.webp')}}" alt="" class="w-full h-auto md:hidden">
<img src="{{asset('assets/img/top/FV_img.webp')}}" alt="" class="w-full h-auto hidden md:block">
<div class=" mt-[188px] mb-[148px] md:mt-[64px] md:mb-[76px] flex items-center justify-center mx-auto">
<img src="{{asset('assets/img/top/pc-phrase.svg')}}" alt="想いと暮らす" class="md:hidden">
<img src="{{asset('assets/img/top/sp-phrase.svg')}}" alt="想いと暮らす" class="hidden md:block">
</div>
</div>
{# 商品 #}
<div class="products flex flex-col relative w-full justify-center lg:overflow-hidden opacity-0">
<div class="ml-[11.4vw] md:ml-2 flex gap-x-[30px] items-center mb-11 md:mb-6 md:gap-x-[10px]">
<hr class="w-[60px] h-[2px] border-black md:w-5">
<h3 class="text-[40px] whitespace-nowrap md:text-[22px] font-extralight tracking-[8px]">まなかの商品</h3>
</div>
<div class="flex pl-10 md:pl-2 w-full">
<p class="text-sm md:text-[8px] leading-5 md:leading-3 tracking-[3px] [writing-mode:vertical-rl]">PRODUCTS</p>
<div class="max-w-[1120px] w-[calc(100%-20px)] md:w-full mx-auto items-center flex flex-col justify-center gap-y-[128px] md:gap-y-16 md:mx-0">
{% for key,products in product_lists %}
{% set productsLength = Products[products[0]]|length %}
{{ include('product_list.twig',
{
'id' : products[0],
'class': products[1].class,
'image': products[1].image,
'spimage': products[1].spimage,
'subtitle': products[1].subtitle,
'title': products[1].title,
'count': productsLength,
'productImages': ProductImages,
})
}}
{% endfor %}
</div>
</div>
</div>
{# about #}
<div class="about flex relative w-full mt-[172px] md:mt-16 md:mt-[120px] pl-10 md:pl-2">
<p class="text-sm md:text-[8px] leading-5 tracking-[3px] [writing-mode:vertical-rl]">CONCEPT</p>
<div class="w-full flex justify-end md:justify-start max-w-[1514px] ml-auto">
<div class="flex justify-between w-full sm:justify-end">
<div class="flex lg:gap-y-5 gap-y-[132px] md:gap-y-[60px] pl-6 mr-20 md:mr-0">
<div class="flex lg:flex-col lg:gap-y-[28px] md:items-end h-fit">
<div class="flex flex-col relative h-fit">
<img src="{{ asset('assets/img/top/reef-about.webp') }}" alt="" class="w-[96px] h-[70px] top-[-30px] left-[52px] absolute lg:hidden">
<img src="{{ asset('assets/img/top/about.webp') }}" alt="" class="w-[max(22.9vw,440px)] max-w-[440px] h-auto lg:w-[max(50vw,188px)] md:hidden rounded">
<img src="{{ asset('assets/img/top/about_sp.webp') }}" alt="" class="w-[max(22.9vw,440px)] max-w-[440px] h-auto lg:w-[max(50vw,188px)] hidden md:block rounded">
<img src="{{ asset('assets/img/top/sp-lotus.svg') }}" alt="" class="absolute lg:left-[-12px] z-10 lg:top-[-16px] lg:w-[24vw] h-auto lg:block hidden">
<img src="{{ asset('assets/img/top/pc-lotus.svg') }}" alt="" class="w-[max(13.5vw,260px)] max-w-[260px] absolute -bottom-[max(2.2vw,44px)] left-[365px] lg:hidden">
</div>
<div class="hidden lg:flex items-start justify-center md:justify-end gap-x-[28px] lg:w-[50vw] font-extralight">
<div class="flex gap-x-3 ">
<p class="text-lg md:text-xs [writing-mode:vertical-rl] tracking-[3px]">
祈りの道具を提案します。</p>
<p class="text-lg md:text-xs [writing-mode:vertical-rl] tracking-[3px]">これからを生きるための</p>
<p class="text-lg md:text-xs [writing-mode:vertical-rl] tracking-[3px]">大切な人がいた、すべての人に。</p>
<p class="text-lg md:text-xs [writing-mode:vertical-rl] tracking-[3px]">誰かを想い、偲び続ける時間に。</p>
</div>
<div class="flex gap-x-w font-extralight relative mt-2">
<img src="{{ asset('assets/img/top/reef-about.webp') }}" alt="" class="w-[9.6vw] absolute -bottom-[8vw] -right-[12vw]">
<p class="[writing-mode:vertical-rl] md:text-lg text-[28px] tracking-widest">一緒に歩む</p>
<p class="[writing-mode:vertical-rl] md:text-lg text-[28px] tracking-widest">あなたの毎日を</p>
</div>
</div>
</div>
</div>
<div class="flex flex-col items-end">
<div class="flex gap-x-[max(4.16vw,77px)] xxl:gap-x-7 mt-5 md:mt-0">
<div class="flex gap-x-[1vw] lg:hidden">
<p class="text-lg [writing-mode:vertical-rl] tracking-[6px]">
祈りの道具を提案します。</p>
<p class="text-lg [writing-mode:vertical-rl] tracking-[6px]">これからを生きるための</p>
<p class="text-lg [writing-mode:vertical-rl] tracking-[6px]">大切な人がいた、すべての人に。</p>
<p class="text-lg [writing-mode:vertical-rl] tracking-[6px]">誰かを想い、偲び続ける時間に。</p>
</div>
<div class="flex gap-x-8 lg:hidden font-extralight">
<p class="text-[28px] [writing-mode:vertical-rl] tracking-[6px] font-extralight">一緒に歩む</p>
<p class="text-[28px] [writing-mode:vertical-rl] tracking-[6px] font-extralight">あなたの毎日を</p>
</div>
<h3 class="text-[36px] [writing-mode:vertical-rl] md:text-xl tracking-[8px] md:tracking-[4px] font-extralight mr-[max(8.8vw,52px)] md:ml-7">祈りの道具屋 まなかとは</h3>
</div>
<a href="{{url("help_about")}}" class="mr-[max(8.8vw,44px)] lg:hidden mt-12 w-[262px] h-16 bg-manakaBeige gap-x-5 flex items-center justify-center border-b-[1px] border-manakaBlack hover cursor-pointer">
<p class="text-[22px] md:text-sm">詳細</p>
<img src="{{ asset('assets/img/top/arrow_link.svg') }}" alt="矢印">
</a>
</div>
</div>
</div>
<a href="{{url("help_about")}}" class="hidden absolute bottom-0 mr-4 right-0 lg:flex w-[262px] md:w-[156px] h-16 md:h-[44px] mb-[-44px] bg-manakaBeige gap-x-5 md:gap-x-3 items-center justify-center border-b-[1px] border-manakaBlack hover cursor-pointer">
<p class="text-[22px] md:text-sm">詳細</p>
<img src="{{ asset('assets/img/top/arrow_link.svg') }}" alt="矢印">
</a>
</div>
{# ショールームのご案内 #}
<div class="showroom flex relative w-full mt-[172px] md:mt-[120px] pl-10 md:pl-2 justify-between">
<p class="text-sm md:text-[8px] leading-5 tracking-[3px] [writing-mode:vertical-rl]">SHOWROOM</p>
<div class="w-full">
<div class="w-full flex justify-end md:justify-start">
<div class="flex ml-auto justify-between w-full max-w-[1514px] pl-6 md:pl-3">
<div class="flex">
<div class="max-w-[780px] flex flex-col lg:w-[66.6vw]">
<img src="{{ asset('assets/img/top/showroom-info.webp') }}" alt="" class="w-full lg:w-[66.6vw] mb-11 md:mb-6">
<div class="flex flex-col gap-y-2 items-center ">
<h3 class="text-[30px] md:text-lg text-center tracking-widest font-extralight leading-relaxed mb-8 md:mb-4">
専門スタッフが
<br>
お位牌・お仏壇選びを
<br class="hidden md:block"/>
お手伝い</h3>
</div>
<p class="md:text-xs tracking-[2px] leading-7 md:leading-[18px] mb-8 md:mb-4">銀座・横浜元町ショールームでは、お仏壇・お位牌・仏具の全ラインナップに加え、希少素材を使った一点物も取りそろえ、手に取ってお選び頂けます。</p>
<p class="md:text-xs tracking-[2px] leading-7 md:leading-[18px]">柔らかい日が注ぐ空間で、まなかの世界観を感じて頂けますと幸いです。</p>
</div>
</div>
<h3 class="text-[36px] h-fit [writing-mode:vertical-rl] md:text-xl tracking-[8px] md:tracking-[4px] font-extralight pr-[max(8.8vw,44px)] mt-[72px] md:mt-0">
銀座・横浜ショールームのご案内
</h3>
</div>
</div>
<a href="{{url("user_data",{route:"showroom"})}}" class="mr-[max(8.8vw,44px)] -mt-16 flex ml-auto lg:mr-4 md:w-[156px] md:h-[44px] w-[262px] h-16 bg-[#EFEEE8] xl:mt-6 gap-x-5 md:gap-x-3 items-center justify-center border-b-[1px] border-manakaBlack bottom-0 hover cursor-pointer">
<p class="text-[22px] md:text-sm tracking-widest">詳細</p>
<img src="{{ asset('assets/img/top/arrow_link.svg') }}" alt="矢印">
</a>
</div>
</div>
{# サポートサービス #}
<div class="support relative xl:px-[8vw] xl:w-full xl:mx-0 flex items-center justify-center mt-[128px] md:mt-16 w-full">
<div class="gap-10 xl:gap-y-8 flex flex-col items-center justify-center xl:pt-8 xl:pb-16 p-20 bg-[#F7F6F2] xl:px-5 max-w-[1120px]">
<h3 class="text-center text-[36px] md:text-xl tracking-[14px] md:tracking-widest font-extralight">商品選びサポートサービス</h3>
<div class="text-center flex flex-col md:text-xs text-xl gap-y-3">
<p class="leading-relaxed">お客様と故人様の関係にふさわしい<br class="hidden md:block">祈りのかたちを見つけていただくために、<br>
いくつかのサポートサービスをご用意しました。</p>
</div>
<div class="gap-12 flex flex-wrap p-6 lg:p-0 w-full lg:gap-4 md:flex md:flex-col items-center justify-center">
<a href="{{url("user_data",{route:"catalog"})}}">
<img src="{{ asset('assets/img/top/catalog-service.webp') }}" alt="" class="w-[min(22.5vw,432px)] lg:w-[73.3vw] h-full hover cursor-pointer">
</a>
<a href="{{url("user_data",{route:"photo_services"})}}">
<img src="{{ asset('assets/img/top/coordinate-service.webp') }}" alt="" class="w-[min(22.5vw,432px)] lg:w-[73.3vw] h-full hover cursor-pointer">
</a>
<a href="{{url("user_data",{route:"pick_up_altar"})}}">
<img src="{{ asset('assets/img/top/takuover-service.webp') }}" alt="" class="w-[min(22.5vw,432px)] lg:w-[73.3vw] h-full hover cursor-pointer">
</a>
</div>
</div>
<a href="{{url("user_data",{route:"service"})}}" class="lg:bottom-[-5.33vw] md:w-[156px] md:h-[44px] w-[262px] h-16 bg-[#EFEEE8] gap-x-5 md:gap-x-3 flex items-center justify-center border-b-[1px] border-manakaBlack absolute bottom-[-27px] right-[8.85vw] lg:right-4 hover cursor-pointer">
<p class="text-[22px] md:text-sm hover tracking-widest">詳細</p>
<img src="{{ asset('assets/img/top/arrow_link.svg') }}" alt="矢印">
</a>
</div>
{# 関連特集 #}
<div class="special flex relative w-full justify-start mt-[128px] md:mt-[88px] pl-10 md:pl-2">
<p class="text-sm md:text-[8px] leading-5 tracking-[3px] [writing-mode:vertical-rl]">SPECIAL</p>
<div class="w-full">
<div class="w-full flex justify-end md:justify-start">
<div class="flex lg:gap-y-5 gap-y-[132px] ml-auto justify-between md:gap-y-[60px] w-full max-w-[1548px] pl-6 md:pl-2">
<ul
class="grid grid-cols-2 grid-rows-2 gap-10 lg:gap-[14px] h-[max(83.46vw,313pxpx)]">
{% for newPost in newPosts %}
<li class="w-[max(19vw,370px)] max-w-[370px] drop-shadow-[0_10px_10px_rgba(0,0,0,0.08)] shadow-black even:mt-[40px] md:even:mt-[16px] lg:w-[29.9vw] hover cursor-pointer">
<a href="{{ path('special_post', {id: newPost.ID}) }}">
<img src={{newPost.mainimage[0]}} alt="関連特集" class="w-full md:h-[68px] h-[max(12.5vw,240px)] object-cover">
<div class="h-[5.72vw] flex flex-col gap-y-2 bg-white justify-between items-end py-[max(0.93vw,10px)] px-[max(1.56vw,10px)] lg:h-[min(17vw,80px)]">
<p class="text-[0.94vw] w-full lg:text-[min(2.4vw,16px)] leading-relaxed lg:w-[calc(29.9vw - 10px)] truncate">{{newPost.post_title}}</p>
<img src="{{ asset('assets/img/top/arrow_link.svg') }}" alt="矢印" class="w-[1.14vw] xl:w-[2.93vw] ">
</div>
</a>
</li>
{% endfor %}
</ul>
<div class="flex-col flex xl:mt-[0px] mt-[72px] gap-y-[0.8vw] md:gap-y-5 items-center pr-[max(8.8vw,44px)]">
<h3 class="text-[36px] [writing-mode:vertical-rl] md:text-xl tracking-[8px] md:tracking-[4px] font-extralight">関連特集</h3>
<div class="flex gap-y-[10px] flex-col items-center">
<hr class="w-[1px] h-8 bg-manakaBlack border-none md:h-4">
<p class="text-[28px] [writing-mode:vertical-rl] md:text-sm tracking-[10px] md:tracking-[3px] font-extralight">祈りに親しむ</p>
<hr class="w-[1px] h-8 bg-manakaBlack border-none md:h-4">
</div>
</div>
</div>
<a href="{{url("special_posts")}}" class="lg:bottom-[-12vw] xl:hidden md:w-[156px] md:h-[44px] w-[262px] h-16 bg-[#EFEEE8] gap-x-5 md:gap-x-3 flex items-center justify-center border-b-[1px] border-manakaBlack absolute bottom-[-4vw] right-[8.85vw] lg:right-0 hover cursor-pointer">
<p class="text-[22px] tracking-widest">一覧</p>
<img src="{{ asset('assets/img/top/arrow_link.svg') }}" alt="矢印">
</a>
</div>
<a href="{{url("special_posts")}}" class="hidden xl:flex ml-auto lg:mr-4 md:w-[156px] md:h-[44px] w-[262px] h-16 bg-[#EFEEE8] xl:mt-6 gap-x-5 md:gap-x-3 items-center justify-center border-b-[1px] border-manakaBlack bottom-0 hover cursor-pointer">
<p class="text-[22px] md:text-sm tracking-widest">一覧</p>
<img src="{{ asset('assets/img/top/arrow_link.svg') }}" alt="矢印">
</a>
</div>
</div>
{# お知らせ #}
<div class="news flex relative w-full mt-[166px] md:mt-16 pl-10 lg:pr-0 md:pl-2">
<p class="text-sm md:text-[8px] leading-5 tracking-[3px] [writing-mode:vertical-rl]">NEWS</p>
<div class="w-full">
<div class="w-full flex max-w-[1538px] ml-auto h-[364px] md:h-[208px] lg:pr-[max(8.8vw,44px)]">
<div class="pl-6 md:pl-3 w-full flex lg:flex-col items-end justify-between gap-x-12">
<div class="flex flex-col w-full max-w-[766px] lg:pr-4 md:min-w-[248px] items-start h-full">
<div class="border-b border-[#EFEFEF]">
{% for index, postList in PostLists %}
{% if index < 3 %}
{{ include('top_news.twig', {'dataKey': postList.dataKey,'date': postList.publicDate, 'title': postList.title }) }}
{% endif %}
{% endfor %}
</div>
</div>
<a href="{{url("user_data",{route:"reading"})}}" class="lg:hidden -mr-[57px] lg:mr-4 lg:md:w-[156px] md:h-[44px] w-[262px] h-16 bg-[#EFEEE8] xl:mt-6 gap-x-5 flex items-center justify-center border-b-[1px] border-manakaBlack bottom-0 hover cursor-pointer">
<p class="text-[22px] md:text-base tracking-widest">一覧</p>
<img src="{{ asset('assets/img/top/arrow_link.svg') }}" alt="矢印">
</a>
</div>
<h3 class="text-[36px] h-fit [writing-mode:vertical-rl] md:text-xl tracking-[8px] md:tracking-[4px] font-extralight xl:mt-[0px] mt-[72px] pr-[8.8vw] xxl:pr-0">お知らせ</h3>
</div>
<a href="{{url("user_data",{route:"reading"})}}" class="hidden lg:flex -mr-[57px] lg:ml-auto lg:mr-4 md:w-[156px] md:h-[44px] w-[262px] h-16 bg-[#EFEEE8] xl:mt-6 gap-x-5 md:gap-x-3 items-center justify-center border-b-[1px] border-manakaBlack bottom-0 hover cursor-pointer">
<p class="text-[22px] md:text-sm tracking-widest">一覧</p>
<img src="{{ asset('assets/img/top/arrow_link.svg') }}" alt="矢印">
</a>
</div>
</div>
{% set breadcrumbs = [] %}
{{ include('Block/breadcrumbs.twig') }}
{% endblock %}