layout: blank


<script>

function mousePosition(ev) {
    ev = ev || window.event;
    if (ev.pageX || ev.pageY) {
        return { x: ev.pageX, y: ev.pageY };
    }
    return {
        x: ev.clientX + document.body.scrollLeft - document.body.clientLeft,
        y: ev.clientY + document.body.scrollTop - document.body.clientTop
    };
}
$(document).ready(function () {
    $(function () {
        //鼠标在未被遮挡的位置:
        $(".v-section").mousemove(function (e) {
            //获取鼠标位置函数
            var mousePos = mousePosition(e);
            var xOffset = 0;
            var yOffset = 25;
            $(".v-section-cover").css("width", ((mousePos.x + xOffset) / $(".v-section").width()) * 100 + "%");
        });
        //鼠标离开未被遮挡位置
        $(".v-section").mouseout(function () {
            // $("#tooltip").empty();
            // $("#tooltip").css("display","none");
        });
        //////////////////////////////////////////////////////////////
        //鼠标在被遮挡的位置:
        $(".v-section-cover").mousemove(function (e) {
            var mousePos = mousePosition(e);
            var xOffset = 0;
            var yOffset = 25;
            $(".v-section-cover").css("width", ((mousePos.x + xOffset) / $(".v-section").width()) * 100 + "%");
            // console.log((mousePos.x) / $(".v-section").width());
        });
        //鼠标离开被遮挡位置
        $(".v-section-cover").mouseout(function () {
            // $("#tooltip").empty();
            // $("#tooltip").css("display","none");
        });
    });
});

</script>

<body class=“home blog lang-ja footer_mt”>

<section class="v-section" style="background-image: url({{ page.cover_before}})"> </section>
<section class="v-section-cover" style="background-image: url({{ page.cover_after}})"></section>
<p class="down-arrow">↓↓↓</p>
{% if page.title != false %}
<section class="home-message js-fadein" style="padding:0;">
    <div>
        <div class="home-message__ttl" style="margin-top:10px">
            <h2>{{ page.title }}</h2>
        </div><!-- .home-message__ttl -->
        <div class="container">
            <div class="row">
                {% for paragraph in page.description %}
                <div class="col-sm">
                    <p class="u-txt__label">
                        {{ paragraph }}
                    </p>
                </div>
                {% endfor %}
            </div>
        </div>
        <div class="home-message__ttl">
            <h2></h2>
        </div><!-- .home-message__ttl -->
        <div class="home-message__ttl" id="whiteline">
            <h2 id="white"></h2>
        </div><!-- .home-message__ttl -->
        <section style="height: 20vh;display: flex;align-items: center;justify-content: center;">
            <button type="button" class="btn btn-light btn-lg" data-toggle="button" aria-pressed="false"
                autocomplete="off"
                onclick="window.location.href='{{page.download_url}}'">
                Download
            </button>
        </section>
    </div>
</section>
{% endif %}
<!--<section class="f-section" id="sec2">  </section>-->
{% if page.derivation != false %}
<section class="v-section-70" style="background-image: url(.{{ page.derivation_img}})">
    <section class="home-message js-fadein">
        <div>
            <div class="home-message__ttl" id="whiteline">
                <h2 style="color: white !important;">DERIVATION</h2>
            </div><!-- .home-message__ttl -->
            <div class="container">
                <div class="row">
                    {% for paragraph in page.derivation %}
                    <div class="col-sm">
                        <p class="u-txt__label" >
                            {{ paragraph }}
                        </p>
                    </div>
                    {% endfor %}
                </div>
            </div>
            <div class="home-message__ttl" id="whiteline">
                <h2></h2>
            </div><!-- .home-message__ttl -->
        </div>
    </section>
</section>
{% endif %}
{% for sample in page.samples %}
<section class="home-message js-fadein">
    <div class="album">
        <h2 class="u-ttl__02 u-ttl__dot">{{ sample.title }}</h2>
        <p class="u-txt__label">{{sample.subtitle}}</p>
    </div>
    <img class="album" src="{{sample.img_url}}">
    <p class="u-txt__label" style="text-align: right;">{{sample.img_text}}</p>
</section>
{% endfor %}
<section style="text-align: center;">
    <button type="button" class="btn btn-outline-light btn-lg" data-toggle="button" aria-pressed="false"
        autocomplete="off" onclick="window.location.href='{{page.download_url}}'">
        Download
    </button>
</section>

</body>