{% extends 'default_frame.twig' %}
{% block stylesheet %}
<link rel="stylesheet" href="{{ asset('assets/css/splide.min.css') }}">
<link rel="stylesheet" href="{{ asset('assets/css/slide.css') }}">
<link rel="stylesheet" href="{{ asset('assets/css/top.css') }}">
{# <link rel="stylesheet" href="{{ asset('assets/css/reset.css') }}"> #}
<link rel="stylesheet" href="{{ asset('assets/css/component.css') }}">
<link rel="stylesheet" href="{{ asset('assets/css/default.css') }}">
<link rel="stylesheet" href="{{ asset('assets/css/layout.css') }}">
<link rel="stylesheet" href="{{ asset('assets/css/utility.css') }}">
<link rel="stylesheet" href="{{ asset('assets/css/style_skin.css') }}">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap" rel="stylesheet">
{% endblock %}
{% block javascript %}
<script src="{{ asset('assets/js/parallax.js') }}"></script>
<script src="{{ asset('assets/js/vendor/splide.min.js') }}"></script>
<script src="{{ asset('assets/js/slide.js') }}"></script>
<script type="module" src="{{ asset('assets/js/index.js') }}"></script>
<script type="text/javascript">
$('.favorite_product').on('click', function(e) {
e.preventDefault();
$.ajax({
url: "{{ url('detail_change_favorite') }}",
method: "post",
dataType: 'json',
data: {
product_id: this.getAttribute("data-product"),
customer_id: this.getAttribute('data-customer')
},
}).done(function (res) {
if (res.success){
let isActive = e.target.classList.contains('active');
if (isActive) {
alert("お気に入りから削除しました。");
}
else {
alert("お気に入りに追加しました。");
}
e.target.classList.toggle('active');
} else {
alert("お気に入りの切り替えに失敗しました。");
}
}).fail(function (res) {
alert("お気に入りの切り替えに失敗しました。");
})
});
</script>
{% endblock %}
{% block main %}
<main class="main">
<section id="main-visual_splide" class="main-visual splide" aria-label="メインビジュアル">
<div class="main-visual_inner splide__track">
<ul class="main-visual_carousel splide__list">
{% for topSlidePanel in topSlidePanels %}
<li class="main-visual_carousel_item splide__slide">
<a href="{{ topSlidePanel.url }}">
<img class="pc-only" src="{{ asset(topSlidePanel.pc_image, 'save_image') }}" >
<img class="sp-only" src="{{ asset(topSlidePanel.sp_image, 'save_image') }}" >
</a>
</li>
{% endfor %}
</ul>
</div>
<ul class="main-visual_pagination splide__pagination"></ul>
</section>
{% if importantNews %}
<section class="inportant-infomation">
<div class="inportant-infomation_inner">
<h2 class="inportant-infomation_title">重要なお知らせ</h2>
<dl class="inportant-infomation_list">
{% for importantInformation in importantNews %}
<dt class="inportant-infomation_list_date">{{ importantInformation.release_date|date("Y.m.d") }}</dt>
<dd class="inportant-infomation_list_text">
{% if importantInformation.Type.id is same as constant('Customize\\Entity\\Master\\InfoType::NEW_WINDOW') %}
<a href="{{ url('information_detail', {"id": importantInformation.id}) }}" target="_blank" rel="noopener" class="icon-blank">{{ importantInformation.title }}</a>
{% elseif importantInformation.Type.id is same as constant('Customize\\Entity\\Master\\InfoType::PDF') %}
<a href="{{ url('information_detail', {"id": importantInformation.id}) }}" target="_blank" rel="noopener" class="icon-pdf">{{ importantInformation.title }}</a>
{% elseif importantInformation.Type.id is same as constant('Customize\\Entity\\Master\\InfoType::NO_BODY') %}
{{ importantInformation.title }}
{% else %}
<a href="{{ url('information_detail', {"id": importantInformation.id}) }}">{{ importantInformation.title }}</a>
{% endif %}
</dd>
{% endfor %}
</dl>
</div>
</section>
{% endif %}
<section class="content campain">
<div id="campain_splide" class="content_inner splide" style="max-width: 1296px;" aria-labelledby="campain-carousel-heading">
<header id="campain-carousel-heading" class="content_header">
<h2 class="content_header_title">
SPECIAL FEATURE/CAMPAIGN
<span>特集/キャンペーン</span>
<div class="splide__arrows splide__arrows--ltr">
<button class="splide__arrow splide__arrow--prev" type="button" aria-label="Previous slide" aria-controls="splide01-track">
<img src="{{ asset('assets/img/customize/icon_arrow.svg') }}" alt="prev" width="6" height="12"/>
</button>
<button class="splide__arrow splide__arrow--next " type="button" aria-label="Next slide" aria-controls="splide01-track">
<img src="{{ asset('assets/img/customize/icon_arrow.svg') }}" alt="next" width="6" height="12"/>
</button>
</div>
</h2>
</header>
<div class="content_body splide__track">
<ul class="campain_carousel splide__list">
{% for specialArticle in specialArticles %}
<li class="campain_carousel_item splide__slide">
{# urlが別タブ表示に設定されているならblank属性を追加 #}
<a href="{{ specialArticle.url }}" {% if specialArticle.link_method is same as (true) %} target="_blank" {% endif %}>
<p class="campain_carousel_item_image">
<img src="{{ asset(specialArticle.banner_image, 'save_image') }}" alt="{{ specialArticle.copy }}">
</p>
<p class="campain_carousel_item_text">{{ specialArticle.copy }}</p>
<p class="campain_carousel_item_link">VIEW MORE</p>
</a>
</li>
{% endfor %}
</ul>
{% include "/common/html/moreLink.twig" with {
href: specialRoute, name: '特集/キャンペーンをすべて見る', position: 'right'
} %}
</div>
</div>
</section>
<section class="content brand-concept">
<div class="content_inner">
<header class="content_header">
<h2 class="brand-concept_title">
一生ものの肌を、大切に育むために、<br>
</h2>
</header>
<div class="content_body">
<p class="brand-concept_text">肌への“やさしさを最優先”に考えて、35年<br>
さらにその先のあなた自身、そして、あなたの大切な人のため</p>
<div class="brand-concept_movie">
<div id="player"></div>
<span id="playButton" class="brand-concept_movie_button"></span>
</div>
</div>
</div>
</section>
<section class="content width-full features">
<div class="content_inner">
<header class="content_header">
<h2 class="content_header_title">
FEATURES
<span>特徴</span>
</h2>
</header>
<div class="content_body">
<div class="features_parallax">
<div class="features_parallax_wrapper">
<div class="features_parallax_item feature_01">
<div class="features_parallax_item_wrapper">
<div class="features_parallax_item_background_wrapper">
<div class="features_parallax_item_background">
<div class="features_parallax_item_image">
<img src="{{ asset('assets/img/customize/img_features_01.jpg') }}" alt="素肌本来の力を呼び覚ます水"/>
</div>
</div>
<div class="features_parallax_item_background_overlay"></div>
</div>
<div class="features_parallax_item_explanation_wrapper">
<div class="features_parallax_item_explanation">
<h3 class="features_parallax_item_explanation_title">
<span>FEATURE 01</span>
素肌本来の力を呼び覚ます水
</h3>
<p class="features_parallax_item_explanation_text">ミネラルを抱えた細密な粒子(ミセル)が角層奥まで浸透し、弱まったバリア機能を正常な働きに整えます。</p>
{% include "/common/html/moreLink.twig" with {
href: url('brandconcept_about'), name: 'Dr.ウィラード・ウォーターについて', position: 'left'
} %}
</div>
</div>
</div>
</div>
<div class="features_parallax_item feature_02">
<div class="features_parallax_item_wrapper">
<div class="features_parallax_item_background_wrapper">
<div class="features_parallax_item_background">
<div class="features_parallax_item_image">
<img src="{{ asset('assets/img/customize/img_features_02.jpg') }}" alt="何も使えない敏感肌でも使える"/>
</div>
</div>
<div class="features_parallax_item_background_overlay"></div>
</div>
<div class="features_parallax_item_explanation_wrapper">
<div class="features_parallax_item_explanation">
<h3 class="features_parallax_item_explanation_title">
<span>FEATURE 02</span>
赤ちゃんから敏感肌まで使える
</h3>
<p class="features_parallax_item_explanation_text">防腐剤・合成香料・着色料・アルコールなど敏感肌に刺激になりうる成分は、一切不使用。</p>
{% include "/common/html/moreLink.twig" with {
href: url('brandconcept_message'), name: '100年素肌へ', position: 'left'
} %}
</div>
</div>
</div>
</div>
<div class="features_parallax_item feature_03">
<div class="features_parallax_item_wrapper">
<div class="features_parallax_item_wrapper-last">
<div class="features_parallax_item_background_wrapper">
<div class="features_parallax_item_background">
<div class="features_parallax_item_image">
<img src="{{ asset('assets/img/customize/img_features_03.jpg') }}" alt="30年変わらないシンプル処方"/>
</div>
</div>
<div class="features_parallax_item_background_overlay"></div>
</div>
</div>
<div class="features_parallax_item_explanation_wrapper">
<div class="features_parallax_item_explanation">
<h3 class="features_parallax_item_explanation_title">
<span>FEATURE 03</span>
35年変わらないシンプル処方
</h3>
<p class="features_parallax_item_explanation_text">常に追求し続けるのは、安心安全品質。処方、衛生管理の徹底など刺激ゼロへのこだわりは、この先も変わりません。</p>
{% include "/common/html/moreLink.twig" with {
href: url('brandconcept_quality'), name: '品質・製造のこだわりについて', position: 'left'
} %}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="content recommend">
<div class="content_inner">
<header class="content_header">
<h2 class="content_header_title">
RECOMMEND ITEMS
<span>おすすめ商品</span>
</h2>
</header>
<div class="content_body">
<ul class="recommend_list">
<li class="recommend_list_item">
<a {% if WillardLotion is not null %}href="{{ url('product_detail', { 'id': WillardLotion.id }) }}"{% else %}tabindex="-1"{% endif %}>
<p class="recommend_list_item_image"><img src="{{ asset('assets/img/customize/img_dummy_recommend01.jpg') }}" width="470" height="431" alt="製品画像"></p>
<p class="recommend_list_item_category">Basic Skin Care / Water</p>
<p class="recommend_list_item_name">Dr.ウィラード・ウォーター化粧水</p>
<p class="recommend_list_item_text">豊富なミネラルと抗酸化作用で素肌本来の力を高め、加齢や外的刺激により引き起こされる様々な肌トラブルに対する抵抗力をつけていくスキンケア化粧水。</p>
<p class="recommend_list_item_link">VIEW MORE</p>
</a>
</li>
<li class="recommend_list_item">
<a {% if WillardGel is not null %}href="{{ url('product_detail', { 'id': WillardGel.id }) }}"{% else %}tabindex="-1"{% endif %}>
<p class="recommend_list_item_image"><img src="{{ asset('assets/img/customize/img_dummy_recommend02.jpg') }}" width="470" height="431" alt="製品画像"></p>
<p class="recommend_list_item_category">Basic Skin Care / Skin Gel</p>
<p class="recommend_list_item_name">Dr.ウィラード・ウォーター保湿ジェル</p>
<p class="recommend_list_item_text">ウォーターのすべてを肌奥(角質層まで)に留めるためのジェル。水分と脂質バランスを理想的なコンディションに整えてトラブルレスな肌に。</p>
<p class="recommend_list_item_link">VIEW MORE</p>
</a>
</li>
<li class="recommend_list_item">
<a {% if WillardCream is not null %}href="{{ url('product_detail', { 'id': WillardCream.id }) }}"{% else %}tabindex="-1"{% endif %}>
<p class="recommend_list_item_image"><img src="{{ asset('assets/img/customize/img_dummy_recommend03.jpg') }}" width="470" height="431" alt="製品画像"></p>
<p class="recommend_list_item_category">Basic Skin Care / Moisture Cream</p>
<p class="recommend_list_item_name">Dr.ウィラード・ウォーター保湿クリーム</p>
<p class="recommend_list_item_text">ウィラード・ウォーターの持つ高保水力と長年の敏感肌研究が辿り着いた、肌への優しさと長く潤う保湿力にこだわり抜いた保湿クリーム。</p>
<p class="recommend_list_item_link">VIEW MORE</p>
</a>
</li>
</ul>
</div>
</div>
</section>
{% include "/Block/recommend_product_block.twig" with {
recommend_product: false,
recently_viewd: true,
recently_viewd_title: false,
include_slide_js: false
} %}
<section class="content search">
<div class="content_inner">
<header class="content_header">
<h2 class="content_header_title">
PRODUCTS
<span>{{ 'front.for.product.search_for_products'|trans }}</span>
</h2>
</header>
<div class="content_body">
<div class="search_area">
<div class="search_content">
<h3 class="search_content_title">名前・キーワードで探す</h3>
<form name="keyword_search" id="keyword_search" action="{{url('product_list_search')}}" method="GET">
<div class="m-search">
<input class="m-search_input" name="keyword" type="text" placeholder="商品名・キーワードで検索">
<button class="m-search_button">
<img src="{{ asset('assets/img/customize/icon_search.svg') }}" alt="検索" width="18" height="18">
</button>
</div>
</form>
</div>
</div>
<section class="l-section">
<div class="l-container worriesSearch">
<div class="worriesSearch-container" style="background-color: #F1F5F8;">
<p class="c-text-14 worriesSearch_title">
お悩みで探す
</p>
<div>
<div class="worries_category">
<a href="{{ url('sensitiveskin') }}" class="worries_category-block-top">
<div class="worries_category-circle">
<img src="{{ asset('assets/img/customize/skincontents/sensitive-skin.svg') }}" alt="">
</div>
<p>敏感肌</p>
</a>
<a href="{{ url('supersensitiveskin') }}" class="worries_category-block-top">
<div class="worries_category-circle">
<img src="{{ asset('assets/img/customize/skincontents/super-sensitive-skin.svg') }}" alt="">
</div>
<p>超敏感肌</p>
</a>
<a href="{{ url('dryskin') }}" class="worries_category-block-top">
<div class="worries_category-circle">
<img src="{{ asset('assets/img/customize/skincontents/dry-skin.svg') }}" alt="">
</div>
<p>乾燥肌</p>
</a>
<a href="{{ url('skinlightening') }}" class="worries_category-block-top">
<div class="worries_category-circle">
<img src="{{ asset('assets/img/customize/skincontents/skin-lightening.svg') }}" alt="">
</div>
<p>美白</p>
</a>
</div>
<div class="worries_category">
<a href="{{ url('agingcare') }}" class="worries_category-block-bottom">
<div class="worries_category-circle">
<img src="{{ asset('assets/img/customize/skincontents/aging-care.svg') }}" alt="">
</div>
<p>エイジングケア</p>
</a>
<a href="{{ url('nikibiskin') }}" class="worries_category-block-bottom">
<div class="worries_category-circle">
<img src="{{ asset('assets/img/customize/skincontents/nikibi.svg') }}" alt="">
</div>
<p>思春期ニキビ</p>
</a>
<a href="{{ url('pimple') }}" class="worries_category-block-bottom">
<div class="worries_category-circle">
<img src="{{ asset('assets/img/customize/skincontents/pimple.svg') }}" alt="">
</div>
<p>吹き出物</p>
</a>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</section>
<section class="content beginner">
<div class="content_inner beginner_inner">
<header class="content_header">
<h2 class="content_header_title">
BEGINNER
<span>初めての方へ</span>
</h2>
</header>
<div class="content_body">
<p class="beginner_text">トライアルセットで、Dr.ウィラード・ウォーターを実感してみてください。<br>
送料無料。今だけ1980円(税込)からお試しできます。</p>
<p class="beginner_price"></p>
{% include "/common/html/moreLink.twig" with {
href: url('product_list', { 'category_id': 5 }), name: 'トライアルセット商品を見る', position: 'center'
} %}
</div>
</div>
</section>
<section class="content membership">
<div class="content_inner">
<header class="content_header">
<h2 class="content_header_title">
MEMBERSHIP PROGRAM
<span>お客様特典</span>
</h2>
</header>
<div class="content_body">
<ul class="membership_list">
<li class="membership_list_item">
<a href="{{ url('pointservice') }}" class="top-link-arrow">
<p class="membership_list_item_icon"><img src="{{ asset('assets/img/customize/icon_membership01.svg') }}" alt="" width="60" height="60"></p>
<div class="membership_list_item_explanation">
<p class="membership_list_item_explanation_headline">お得なポイントサービス</p>
<p class="membership_list_item_explanation_text">プラチナステージでは最大20%還元!</p>
</div>
</a>
</li>
<li class="membership_list_item">
<a href="{{ url('referral') }}" class="top-link-arrow">
<p class="membership_list_item_icon"><img src="{{ asset('assets/img/customize/icon_membership02.svg') }}" alt="" width="60" height="60"></p>
<div class="membership_list_item_explanation">
<p class="membership_list_item_explanation_headline">お友達紹介プログラム</p>
<p class="membership_list_item_explanation_text">ご紹介者とお友達お二人に1000円クーポンをプレゼント</p>
</div>
</a>
</li>
<li class="membership_list_item">
<a href="{{ url('subscription') }}" class="top-link-arrow">
<p class="membership_list_item_icon"><img src="{{ asset('assets/img/customize/icon_membership03.svg') }}" alt="" width="60" height="60"></p>
<div class="membership_list_item_explanation">
<p class="membership_list_item_explanation_headline">お得な定期購入</p>
<p class="membership_list_item_explanation_text">通常注文よりとてもおトクで便利にお買い物</p>
</div>
</a>
</li>
<li class="membership_list_item">
<a href="{{ url('shippingfee') }}" class="top-link-arrow">
<p class="membership_list_item_icon"><img src="{{ asset('assets/img/customize/icon_membership04.svg') }}" alt="" width="60" height="60"></p>
<div class="membership_list_item_explanation">
<p class="membership_list_item_explanation_headline">税込3,300円以上で送料無料<br class="pc-show"></p>
<p class="membership_list_item_explanation_text">まとめて購入すれば、送料分おトク</p>
</div>
</a>
</li>
</ul>
</div>
</div>
</section>
<section class="content latest-infomation">
<div class="content_inner latest-infomation_inner">
<header class="content_header latest-infomation_header">
<h2 class="content_header_title latest-infomation_header_title">
INFORMATION
<span>最新情報</span>
</h2>
</header>
<div class="content_body latest-infomation_body">
{% if informations %}
<ul class="latest-infomation_list">
{% set loop_count = 0 %}
{% for information in informations %}
{% if loop_count < 5 %}
<li class="latest-infomation_list_item">
<p class="latest-infomation_list_item_date">{{ information.release_date|date("Y.m.d") }}</p>
<p class="latest-infomation_list_item_text">
{% if information.Type.id is same as constant('Customize\\Entity\\Master\\InfoType::NEW_WINDOW') %}
<a href="{{ url('information_detail', {"id": information.id}) }}" target="_blank" rel="noopener" class="icon-blank">{{ information.title }}</a>
{% elseif information.Type.id is same as constant('Customize\\Entity\\Master\\InfoType::PDF') %}
<a href="{{ url('information_detail', {"id": information.id}) }}" target="_blank" rel="noopener" class="icon-pdf">{{ information.title }}</a>
{% elseif information.Type.id is same as constant('Customize\\Entity\\Master\\InfoType::NO_BODY') %}
{{ information.title }}
{% else %}
<a href="{{ url('information_detail', {"id": information.id}) }}">{{ information.title }}</a>
{% endif %}
</p>
</li>
{% set loop_count = loop_count + 1 %}
{% endif %}
{% endfor %}
</ul>
{% endif %}
{% include "/common/html/moreLink.twig" with {
href: informationRoute, name: '最新情報一覧', position:'right'
} %}
</div>
</div>
</section>
<section class="suggest">
<div class="suggest_inner">
<section class="suggest_item">
<a href="https://www.willard.co.jp/wblog/">
<p class="suggest_item_image"><img src="{{ asset('assets/img/customize/img_suggest01.jpg') }}" alt="" width="580" height="266"></p>
<p class="suggest_item_headline">
<span class="top-link-arrow inline">{{ 'front.for.wblog.title'|trans }}</span>
</p>
<p class="suggest_item_text">季節や環境の変化、ストレスによって傷つきやすく、お手入れが難しい敏感肌。そんな敏感肌の方が知っておきたい情報を敏感肌専門ブランドの視点で発信していきます。</p>
</a>
</section>
<section class="suggest_item">
<a href="{{ url('newsletter') }}">
<p class="suggest_item_image"><img src="{{ asset('assets/img/customize/w_tsu.jpg') }}" alt="" width="580" height="266"></p>
<p class="suggest_item_headline">
<span class="top-link-arrow inline">{{ 'front.for.newsletter.title'|trans }}</span>
</p>
<p class="suggest_item_text">ご希望の方に毎月お届けしているウィラード通信です。こちらからもご覧いただけます。</p>
</a>
</section>
</div>
</section>
<section class="content company">
<div class="content_inner">
<header class="content_header">
<h2 class="content_header_title">
COMPANY INFORMATION
<span>会社情報</span>
</h2>
</header>
<div class="content_body">
<ul class="company_link-list">
<li>
<a href="{{ url('company_message') }}" class="top-link-arrow">{{ 'front.for.company.message_title'|trans }}</a>
</li>
<li>
<a href="{{ url('company_encounter') }}" class="top-link-arrow">ウィラード博士との出会い</a>
</li>
<li>
<a href="{{ url('company_about') }}" class="top-link-arrow">{{ 'front.for.company.about_title'|trans }}</a>
</li>
<li>
<a href="{{ url('company_history') }}" class="top-link-arrow">{{ 'front.for.company.history_title'|trans }}</a>
</li>
</ul>
</div>
</div>
</section>
<section class="guide">
<div class="guide_inner">
<section class="guide_content">
<h2 class="guide_content_title">ご注文・お問い合わせ</h2>
<div class="guide_content_group">
<h3 class="guide_content_sub-title">お電話・FAX</h3>
<ul class="guide_content_inquiry-list">
<li>
<span>TEL</span>0120-559-220</li>
<li>
<span>FAX</span>0120-559-220</li>
</ul>
<p class="guide_content_inquiry-text">平日10:00~17:00 (土・日・祝日休)</p>
</div>
<div class="guide_content_group">
<h3 class="guide_content_sub-title">メール</h3>
<ul class="guide_content_list">
<li>
<a href="{{ url('contact') }}" class="top-link-arrow">{{ 'front.for.contact.request_catalog'|trans }}</a>
</li>
<li>
<a href="{{ url('contact_index') }}" class="top-link-arrow">{{ 'front.for.contact_index.title'|trans }}</a>
</li>
</ul>
</div>
</section>
<section class="guide_content">
<h2 class="guide_content_title">サポート</h2>
<div class="guide_content_group">
<ul class="guide_content_list">
<li>
<a href="{{ url('help_guide') }}" class="top-link-arrow">ご利用ガイドを見る</a>
</li>
<li>
<a href="{{ url('faq') }}" class="top-link-arrow">よくある質問を見る</a>
</li>
</ul>
</div>
</section>
</div>
</section>
{# 未ログイン時 お気に入りモーダル #}
<section id="favorite_login" class="m-modal_overlay">
<div class="m-modal_wrapper confirm">
<section class="m-modal">
<p class="m-modal_close">
<button class="m-modal_close_button" data-close-target="favorite_login">
<img src="{{ asset('assets/img/customize/icon_close.svg') }}" alt="閉じる" width="22" height="22">
</button>
</p>
<section class="m-modal_inner">
<p class="confirm_text">
お気に入り機能を利用するには、ログインする必要があります。<br>
お手数ですがログイン後にお気に入り登録をお願いします。
</p>
</section>
<ul class="m-modal_button-list">
<li>
<p class="m-button_wrapper">
<a href="{{ url('mypage_login') }}" class="m-button arrow">ログイン</a>
</p>
</li>
</ul>
</section>
</div>
</section>
</main>
{% endblock %}