{% extends 'default_frame.twig' %}
{% set body_class = 'front_page' %}
{% block javascript %}
{% endblock javascript %}
{% block main %}
<main>
<section class="top_inner">
<div id="main-contents" class="colnum1"><!-- ▼メインビジュアル -->
<section id="top_insta">
<div class="wrap">
<div class="ttl_box">
<div class="icon"><img src="/html/user_data/assets/img/common/icon_insta.png" alt=""></div>
<h2 class="ttl f_tsunagi"><span class="color">インスタグラムでギャラリー公開中!</span><br>サンプル商品をインスタグラムで確認!</h2>
</div>
<div class="ttl_comment">大阪難波・心斎橋・北新地の花屋biotop(ビオトープ)では<br>インスタグラムで豊富なお花たちをご紹介中!他では見れないビオトープのお花たちをぜひご覧ください!</div>
<div class="list_box">
<ul>
<li><a href="https://www.instagram.com/biotop.gallery/?hl=ja" class="link" target="_blank">
<div class="img"><img src="/html/user_data/assets/img/common/top_insta_img01.jpg" alt="">
<p class="ab_theme">オーダーメイド 商品ギャラリー</p>
<p class="ab_account f_cent">@biotop.gallery</p>
</div>
<div class="text_box_sp sp">
<p class="theme">オーダーメイド 商品ギャラリー</p>
<p class="account f_cent">@biotop.gallery</p>
<p class="btn">インスタグラムを見る ></p>
</div>
</a></li>
<li><a href="https://www.instagram.com/biotop.orchid/" class="link" target="_blank">
<div class="img"><img src="/html/user_data/assets/img/common/top_insta_img02.jpg" alt="">
<p class="ab_theme">ビオトープ 胡蝶蘭</p>
<p class="ab_account f_cent">@biotop.orchld</p>
</div>
<div class="text_box_sp sp">
<p class="theme">ビオトープ 胡蝶蘭</p>
<p class="account f_cent">@biotop.orchld</p>
<p class="btn">インスタグラムを見る ></p>
</div>
</a></li>
<li><a href="https://www.instagram.com/biotop.towercollection/" class="link" target="_blank">
<div class="img"><img src="/html/user_data/assets/img/common/top_insta_img03.jpg" alt="">
<p class="ab_theme">ビオトープ タワーコレクション</p>
<p class="ab_account f_cent">@biotop.flowercollection</p>
</div>
<div class="text_box_sp sp">
<p class="theme">ビオトープ タワーコレクション</p>
<p class="account f_cent">@biotop.flowercollection</p>
<p class="btn">インスタグラムを見る ></p>
</div>
</a></li>
<li><a href="https://www.instagram.com/biotop.plants/" class="link" target="_blank">
<div class="img"><img src="/html/user_data/assets/img/common/top_insta_img04.jpg" alt="">
<p class="ab_theme">ビオトープ プランツ</p>
<p class="ab_account f_cent">@biotop.plants</p>
</div>
<div class="text_box_sp sp">
<p class="theme">ビオトープ プランツ</p>
<p class="account f_cent">@biotop.plants</p>
<p class="btn">インスタグラムを見る ></p>
</div>
</a></li>
</ul>
</div>
</div>
</section>
<section id="top_service_slider">
<div class="slider_box">
<div class="pc">
<div class="box js_slider_service">
<ul>
<li>
<a href="https://line.me/R/ti/p/@596gdfco?oat_content=url&ts=05011726" class="link">
<img src="/html/user_data/assets/img/common/banner_phone.png" alt="スマホから簡単注文">
</a>
</li>
<li>
<a href="/user_data/original3" class="link">
<img src="/html/user_data/assets/img/common/banner_logo.png" alt="企業のロゴ入りの立て札作成可能です!">
</a>
</li>
<li>
<img src="/html/user_data/assets/img/common/banner_service.png" alt="画像配信サービス">
</li>
<li>
<img src="/html/user_data/assets/img/common/banner_free.png" alt="枯れた胡蝶蘭、観葉植物、無料で回収します">
</li>
<li>
<a href="/user_data/surprise" class="link">
<img src="/html/user_data/assets/img/common/banner_gallary.png" alt="サプライズ装飾ギャラリー">
</a>
</li>
<li>
<a href="https://www.tiktok.com/@biotop.ne.jp?lang=ja-JP&is_from_webapp=1&sender_device=mobile&sender_web_id=7336091762291279368" class="link" target="_blank">
<img src="/html/user_data/assets/img/common/banner_tiktok.png" alt="TikTok">
</a>
</li>
</ul>
</div>
</div>
<div class="box js_slider_service sp">
<ul>
<li>
<a href="https://line.me/R/ti/p/@596gdfco?oat_content=url&ts=05011726" class="link">
<img src="/html/user_data/assets/img/common/banner_phone_sp.png" alt="スマホから簡単注文">
</a>
</li>
<li>
<a href="/user_data/original3" class="link">
<img src="/html/user_data/assets/img/common/banner_logo_sp.png" alt="企業のロゴ入りの立て札作成可能です!">
</a>
</li>
<li>
<img src="/html/user_data/assets/img/common/banner_service_sp.png" alt="画像配信サービス">
</li>
<li>
<img src="/html/user_data/assets/img/common/banner_free_sp.png" alt="枯れた胡蝶蘭、観葉植物、無料で回収します">
</li>
<li>
<a href="/user_data/surprise" class="link">
<img src="/html/user_data/assets/img/common/banner_gallary_sp.png" alt="サプライズ装飾ギャラリー">
</a>
</li>
<li>
<a href="https://www.tiktok.com/@biotop.ne.jp?lang=ja-JP&is_from_webapp=1&sender_device=mobile&sender_web_id=7336091762291279368" class="link" target="_blank">
<img src="/html/user_data/assets/img/common/banner_tiktok_sp.png" alt="TikTok">
</a>
</li>
</ul>
</div>
<div class="wrap pc">
<div class="thumbnail_box js_thumbnail_box">
<ul>
<li>
<img src="/html/user_data/assets/img/common/banner_phone.png" alt="スマホから簡単注文">
</li>
<li>
<img src="/html/user_data/assets/img/common/banner_logo.png" alt="企業のロゴ入りの立て札作成可能です!">
</li>
<li>
<img src="/html/user_data/assets/img/common/banner_service.png" alt="画像配信サービス">
</li>
<li>
<img src="/html/user_data/assets/img/common/banner_free.png" alt="枯れた胡蝶蘭、観葉植物、無料で回収します">
</li>
<li>
<img src="/html/user_data/assets/img/common/banner_gallary.png" alt="サプライズ装飾ギャラリー">
</li>
<li>
<img src="/html/user_data/assets/img/common/banner_tiktok.png" alt="TikTok">
</li>
</ul>
</div>
</div>
</div>
</section>
</div>
</section>
<script>
$(document).ready(function() {
var today = new Date();
var formattedToday = ('0' + (today.getMonth() + 1)).slice(-2) + ('0' + today.getDate()).slice(-2);
$('.view_timer').each(function() {
var startDate = $(this).data('start-date');
var endDate = $(this).data('end-date');
if (formattedToday >= startDate && formattedToday <= endDate) {
$(this).addClass('active');
}
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
var activeElements = $(".view_timer.active");
if (activeElements.length >= 2) {
var randomIndex = Math.floor(Math.random() * activeElements.length);
activeElements.each(function(index) {
if (index !== randomIndex) {
$(this).removeClass("active");
}
});
}
});
</script>
<script>
$(function() {
if ($(window).width() > 750) {
$('.js_slider_tab ul').slick({
autoplay: true,
autoplaySpeed: 3000,
speed: 800,
arrows: true,
slidesToShow: 2,
slidesToScroll: 1,
centerMode: true,
});
$('.js_slider_service ul').slick({
speed: 1500,
slidesToShow: 1,
slidesToScroll: 1,
centerMode: true,
centerPadding: "30%",
asNavFor: '.js_thumbnail_box ul',
swipeToSlide: false
});
$('.js_thumbnail_box ul').slick({
slidesToShow: 5,
slidesToScroll: 1,
asNavFor: '.js_slider_service ul',
focusOnSelect: true,
});
} else {
$('.js_sp_slider ul').slick({
autoplay: true,
autoplaySpeed: 3000,
speed: 800,
arrows: false,
slidesToShow: 1,
slidesToScroll: 1,
centerMode: true,
dots: true,
variableWidth: true,
});
}
});
</script>
<script>
$(function() {
$('.js_tab_box ul li').click(function() {
console.log('test');
$('.js_slider_tab ul').slick('setPosition');
});
var item = document.querySelectorAll(".cont");
var select = document.querySelector('[name="cont"]');
select.addEventListener("change", function() {
item.forEach(function(element) {
element.classList.remove("selected");
});
var selected = select.value;
document.querySelector("." + selected).classList.add("selected");
});
$(".js_more_view").on("click", function() {
$(this).toggleClass("on_click");
$(".text_hide").slideToggle(1000);
});
var btn = $('.fixed_sp_ft');
btn.hide();
$(window).scroll(function() {
if ($(this).scrollTop() > 100) {
btn.fadeIn();
} else {
btn.fadeOut();
}
});
});
</script>
<script>
$(document).ready(function() {
var today = new Date();
var formattedToday = ('0' + (today.getMonth() + 1)).slice(-2) + ('0' + today.getDate()).slice(-2);
$('.view_timer').each(function() {
var startDate = $(this).data('start-date');
var endDate = $(this).data('end-date');
if (formattedToday >= startDate && formattedToday <= endDate) {
$(this).addClass('active');
}
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
var activeElements = $(".view_timer.active");
if (activeElements.length >= 2) {
var randomIndex = Math.floor(Math.random() * activeElements.length);
activeElements.each(function(index) {
if (index !== randomIndex) {
$(this).removeClass("active");
}
});
}
});
</script>
<script>
$(function() {
if ($(window).width() > 750) {
$('.js_slider_tab ul').slick({
autoplay: true,
autoplaySpeed: 3000,
speed: 800,
arrows: true,
slidesToShow: 2,
slidesToScroll: 1,
centerMode: true,
});
$('.js_slider_service ul').slick({
speed: 1500,
slidesToShow: 1,
slidesToScroll: 1,
centerMode: true,
centerPadding: "30%",
asNavFor: '.js_thumbnail_box ul',
swipeToSlide: false
});
$('.js_thumbnail_box ul').slick({
slidesToShow: 5,
slidesToScroll: 1,
asNavFor: '.js_slider_service ul',
focusOnSelect: true,
});
} else {
$('.js_sp_slider ul').slick({
autoplay: true,
autoplaySpeed: 3000,
speed: 800,
arrows: false,
slidesToShow: 1,
slidesToScroll: 1,
centerMode: true,
dots: true,
variableWidth: true,
});
}
});
</script>
</main>
{% endblock %}