{% block stylesheet %}
    <style>
        .slick-slider {
            margin-bottom: 30px;
        }

        .slick-dots {
            position: absolute;
            bottom: -45px;
            display: block;
            width: 100%;
            padding: 0;
            list-style: none;
            text-align: center;
        }

        .slick-dots li {
            position: relative;
            display: inline-block;
            width: 20px;
            height: 20px;
            margin: 0 5px;
            padding: 0;

            cursor: pointer;
        }

        .slick-dots li button {
            font-size: 0;
            line-height: 0;
            display: block;
            width: 20px;
            height: 20px;
            padding: 5px;
            cursor: pointer;
            color: transparent;
            border: 0;
            outline: none;
            background: transparent;
        }

        .slick-dots li button:hover,
        .slick-dots li button:focus {
            outline: none;
        }

        .slick-dots li button:hover:before,
        .slick-dots li button:focus:before {
            opacity: 1;
        }

        .slick-dots li button:before {
            content: " ";
            line-height: 20px;
            position: absolute;
            top: 0;
            left: 0;
            width: 12px;
            height: 12px;
            text-align: center;
            opacity: .25;
            background-color: black;
            border-radius: 50%;

        }

        .slick-dots li.slick-active button:before {
            opacity: .75;
            background-color: black;
        }

        .slick-dots li button.thumbnail img {
            width: 0;
            height: 0;
        }
    </style>
{% endblock %}

{% block javascript %}
    <script>
        $(function() {
            $('.main_visual').slick({
                dots: true,
                arrows: false,
                autoplay: true,
                speed: 500,
                vertical: true
            });
        });
    </script>
{% endblock javascript %}


<div id="top_slider">
    <div class="ec-sliderRole">
        <div class="main_visual">
            <div class="item item1 slick-slide">
                <div class="flex_box">
                    <img src="{{ asset('assets/img/top/top_1.jpg') }}">
                    <div class="top_text">
                        <h2>腸からシアワセに。</h2>
                        <h3 class="text-right"><span>大豆発酵食品</span><br />
                        　マメビオ プラス<br />
                        　マメビオ フローラル</h3>
                    </div>
                </div>
            </div>
            <div class="item item2 slick-slide">
                <div class="flex_box reverse">
                    <div class="top_text">
                        <h2>始めてみませんか、<br />腸から健康生活。</h2>
                        <p>マメビオシリーズなら不足しがちな腸内細菌をまとめて補給できます。<br />
                        マメビオシリーズは皆様の元気を応援します。</p>
                    </div>
                    <img src="{{ asset('assets/img/top/top_2.jpg') }}">
                </div>
            </div>
            <div class="item item3 slick-slide">
                <div class="flex_box">
                    <img src="{{ asset('assets/img/top/top_3.jpg') }}">
                    <div class="top_text">
                        <h2>大切なのは<br />土壌菌でした。</h2>
                        <p>マメビオシリーズは安心の無添加食品です。小さなお子様から高齢者の方、大切なペットまで安心してお飲みいただけます。</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>