@extends('layouts.top', ['price' => true])

@section('content')
    <div class="page-price">
        <div class="container-top">
            <h1 class="price__heading">
                <div class="heading__sub">料金プラン</div>
                <div class="heading__main">無料ではじめて、<br class="sp" />必要に応じてプラン<br class="sp" />を追加しよう。</div>
            </h1>
            <div class="price__buy price__block">
                <div class="price__buy__content">
                    <div class="price__group">
                        <div class="title">Free</div>
                        <div class="info">
                            <div class="unit">￥</div>
                            <div class="number">0</div>
                        </div>
                    </div>
                    <div class="price__desc buy__desc01">
                        フリーテンプレートのみ
                        <br />基本ページの作成/編集
                        <br />MIRAYバナー付公開
                    </div>
                    <div class="price__desc buy__desc02">
                        サブドメインでの公開
                        <br />画像設定(10件まで)
                        <br />プラン作成(5件まで)
                    </div>
                </div>
                <a href="/register" class="price__buy__btn">
                    無料ではじめる
                    <svg xmlns="http://www.w3.org/2000/svg" width="11.603" height="17.401" viewBox="0 0 11.603 17.401">
                        <path id="Path_6721" data-name="Path 6721" d="M-4363.792-9877.6l10.4,8.55-10.4,7.45"
                            transform="translate(4364.496 9878.301)" fill="none" stroke="#fff" stroke-linecap="round"
                            stroke-linejoin="round" stroke-width="1" />
                    </svg>
                </a>
            </div>
            <div class="price__cate price__block">
                <div class="cate__block pc">
                    <div class="cate__title">1施設のみの宿泊施設に最適</div>
                    <div class="price__group">
                        <div class="title">Free</div>
                        <div class="info">
                            <div class="unit">￥</div>
                            <div class="number">0</div>
                        </div>
                        <div class="desc">公開するまで永久無料</div>
                    </div>
                    <div class="price__desc">
                        サイトの限定公開
                        <br />デフォルトテンプレート
                        <br />基本ページの作成/編集
                        <br />サブドメインでの接続
                    </div>
                </div>
                <div class="cate__block">
                    <div class="cate__title">複数施設を運営する宿泊施設に最適</div>
                    <div class="price__group">
                        <div class="title">Business</div>
                        <div class="info">
                            <div class="unit">￥</div>
                            <div class="number">39,800</div>
                            <div class="unit">/ 月</div>
                        </div>
                        <div class="desc">月払いで¥44,800/月</div>
                    </div>
                    <div class="price__desc">
                        サイトの一般公開
                        <br />オリジナルテンプレート(別途料金)
                        <br />基本ページの作成/編集
                        <br />独自ドメインでの接続
                        <br />追加ページの作成が可能(別途料金)
                    </div>
                </div>
                <div class="cate__block">
                    <div class="cate__title">グループホテルに最適</div>
                    <div class="price__group">
                        <div class="title">Enterprise</div>
                        <div class="info">
                            <div class="text">ご相談</div>
                        </div>
                        <div class="desc">グループホテルなど施設数が多い場合</div>
                    </div>
                    <div class="price__desc">
                        Businessプランの全機能
                        <br />自社予約システム連携
                        <br />管理画面制御
                    </div>
                    <div class="cate__note">
                        *特殊なページの作成や、レギュレー
                        <br />ション等でシステムの連携、修正が
                        <br />必要な会社様はお問い合わせください。
                    </div>
                </div>
            </div>
            <div class="price__cate-note price__desc">
                *Businessプランの39,800円/月は、年間契約(1年分一括決済)の場合の実質月額料になります。
                <br />*価格はすべて税抜です。
            </div>
            <div onscroll="myFunction()" class="price__table-wrap js-scrollable">
                <div class="price__table price__block">
                    <div class="price__table-tr">
                        <div class="price__table-th">機能一覧</div>
                        <div class="price__table-th">Free</div>
                        <div class="price__table-th">Business</div>
                        <div class="price__table-th">Enterprise</div>
                    </div>
                    <div class="price__table-tr">
                        <div class="price__table-td">サイトの公開</div>
                        <div class="price__table-td">限定公開</div>
                        <div class="price__table-td">一般公開</div>
                        <div class="price__table-td">一般公開</div>
                    </div>
                    <div class="price__table-tr">
                        <div class="price__table-td">テンプレート</div>
                        <div class="price__table-td">デフォルト</div>
                        <div class="price__table-td">
                                オリジナル可
                                <div class="note">*別途料金</div>
                        </div>
                        <div class="price__table-td">
                                オリジナル可
                                <div class="note">*別途料金</div>
                        </div>
                    </div>
                    <div class="price__table-tr">
                        <div class="price__table-td">基本ページの作成/編集</div>
                        <div class="price__table-td">-</div>
                        <div class="price__table-td">○</div>
                        <div class="price__table-td">○</div>
                    </div>
                    <div class="price__table-tr">
                        <div class="price__table-td">追加ページの作成</div>
                        <div class="price__table-td">-</div>
                        <div class="price__table-td">○</div>
                        <div class="price__table-td">○</div>
                    </div>
                    <div class="price__table-tr">
                        <div class="price__table-td">独自ドメインとの接続</div>
                        <div class="price__table-td">-</div>
                        <div class="price__table-td">○</div>
                        <div class="price__table-td">○</div>
                    </div>
                    <div class="price__table-tr">
                        <div class="price__table-td">独自アニメーション/機能<span class="pc_inline">のご相談受付<span></div>
                        <div class="price__table-td">-</div>
                        <div class="price__table-td">○</div>
                        <div class="price__table-td">○</div>
                    </div>
                    <div class="price__table-tr">
                        <div class="price__table-td">画像登録数</div>
                        <div class="price__table-td">10件</div>
                        <div class="price__table-td">50件</div>
                        <div class="price__table-td">無制限</div>
                    </div>
                    <div class="price__table-tr">
                        <div class="price__table-td">プラン登録数</div>
                        <div class="price__table-td">5件</div>
                        <div class="price__table-td">10件</div>
                        <div class="price__table-td">無制限</div>
                    </div>
                    <div class="price__table-tr">
                        <div class="price__table-td">月間PV数上限</div>
                        <div class="price__table-td">10,000PV</div>
                        <div class="price__table-td">300,000PV</div>
                        <div class="price__table-td">無制限</div>
                    </div>
                    <div class="price__table-tr">
                        <div class="price__table-td"></div>
                        <div class="price__table-td"></div>
                        <div class="price__table-td"></div>
                        <div class="price__table-td"></div>
                    </div>
                </div>

            </div>
            <contact-section :title-exam="true"></contact-section>
        </div>
    </div>
@endsection

@push('css')
    <link rel="stylesheet" href="https://unpkg.com/scroll-hint@1.1.10/css/scroll-hint.css">
@endpush

@push('javascript')
    <script src="https://unpkg.com/scroll-hint@1.1.10/js/scroll-hint.js"></script>
    <script>
        new ScrollHint('.js-scrollable', {
            i18n: {
                scrollable: 'スクロールできます'
            }
        });
        let flgScrollHint = false;
        addClassActiveScrollHint();

        window.onscroll = function() {
            addClassActiveScrollHint();
        }

        function addClassActiveScrollHint() {
            let scrollHintIconWrap = document.querySelector('.scroll-hint-icon-wrap');
            let yJsScrollable = document.querySelector('.scroll-hint-icon-wrap .scroll-hint-icon').getBoundingClientRect().y;
            let heightJsScrollable = document.querySelector('.js-scrollable').getBoundingClientRect().height;

            if(yJsScrollable - heightJsScrollable <= 0) {
                if (!scrollHintIconWrap.matches('.is-active') && !flgScrollHint) {
                    flgScrollHint = true;
                    scrollHintIconWrap.classList.add('is-active');
                }
            }
        }

        function myFunction() {
            document.querySelector('.scroll-hint-icon-wrap').classList.remove('is-active');
        }
    </script>
@endpush