<header_common>
    <div class="header">
        <nav>
            <!--ハンバーガーメニュー-->
            <input type="checkbox" id="menu-btn" name="header-btn" class="btn-hide">
            <div class="menu-wrapper">
                <div class="menu-wrapper__photo">
                    <img src="{base}/assets/img/common/menu_bg.jpg" alt="">
                </div>
                <div class="menu-wrapper__inner">
                    <div class="menu-wrapper__box">
                        <a href="{base}/" class="menu-wrapper__logo">
                            <img src="{base}/assets/img/common/logo_menu.png" alt="">
                        </a>
                        <ul class="menu-wrapper__links01">
                            <li>
                                <a href="{base}/about/" class="menu-wrapper__title-link pctb">クリニック</a>
                                <p class="menu-wrapper__title-link sp">クリニック</p>
                                <ul>
                                    <li>
                                        <a href="{base}/about/" class="menu-wrapper__basic-link sp">クリニックTOP</a>
                                    </li>
                                    <li>
                                        <a href="{base}/about/feature.html" class="menu-wrapper__basic-link">当院の特色</a>
                                    </li>
                                    <li>
                                        <a href="{base}/about/sorairo.html" class="menu-wrapper__basic-link">そらいろのひととき</a>
                                    </li>
                                    <li>
                                        <a href="{base}/about/gallery.html" class="menu-wrapper__basic-link">施設ギャラリー</a>
                                    </li>
                                    <li>
                                        <a href="{base}/about/family.html" class="menu-wrapper__basic-link">そらファミリー</a>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <a href="{base}/medical/" class="menu-wrapper__title-link pctb">診療のご案内</a>
                                <p class="menu-wrapper__title-link sp">診療のご案内</p>
                                <ul>
                                    <li>
                                        <a href="{base}/medical/" class="menu-wrapper__basic-link sp">診療のご案内TOP</a>
                                    </li>
                                    <li>
                                        <a href="{base}/medical/pregnant.html" class="menu-wrapper__basic-link">妊娠された方へ</a>
                                    </li>
                                    <li>
                                        <a href="{base}/medical/price.html" class="menu-wrapper__basic-link">分娩・費用</a>
                                    </li>
                                    <li>
                                        <a href="{base}/medical/painless.html" class="menu-wrapper__basic-link">無痛分娩</a>
                                    </li>
                                    <li>
                                        <a href="{base}/medical/programed.html" class="menu-wrapper__basic-link">計画分娩</a>
                                    </li>
                                    <li>
                                        <a href="{base}/medical/prenatal.html" class="menu-wrapper__basic-link">出生前診断</a>
                                    </li>
                                    <li>
                                        <a href="{base}/medical/postpartum.html" class="menu-wrapper__basic-link">産後の健診</a>
                                    </li>
                                    <li>
                                        <a href="{base}/medical/gynecology.html" class="menu-wrapper__basic-link">婦人科</a>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <a href="{base}/hospitalization/" class="menu-wrapper__title-link pctb">入院のご案内</a>
                                <p class="menu-wrapper__title-link sp">入院のご案内</p>
                                <ul>
                                    <li>
                                        <a href="{base}/hospitalization/" class="menu-wrapper__basic-link sp">入院のご案内TOP</a>
                                    </li>
                                    <li>
                                        <a href="{base}/hospitalization/room.html" class="menu-wrapper__basic-link">お部屋について</a>
                                    </li>
                                    <li>
                                        <a href="{base}/hospitalization/preparation.html" class="menu-wrapper__basic-link">入院準備・時期</a>
                                    </li>
                                    <li>
                                        <a href="{base}/hospitalization/schedule.html" class="menu-wrapper__basic-link">入院中のスケジュール</a>
                                    </li>
                                    <li>
                                        <a href="{base}/hospitalization/meal.html" class="menu-wrapper__basic-link">お食事</a>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <a href="{base}/support/" class="menu-wrapper__title-link pctb">ケア・サポート</a>
                                <p class="menu-wrapper__title-link sp">ケア・サポート</p>
                                <ul>
                                    <li>
                                        <a href="{base}/support/" class="menu-wrapper__basic-link sp">ケア・サポートTOP</a>
                                    </li>
                                    <li>
                                        <a href="{base}/support/midwife.html" class="menu-wrapper__basic-link">助産師外来</a>
                                    </li>
                                    <li>
                                        <a href="{base}/support/class.html" class="menu-wrapper__basic-link">マザークラス</a>
                                    </li>
                                    <!-- <li>
                                        <a href="{base}/support/counseling.html" class="menu-wrapper__basic-link">こころとからだの相談室</a>
                                    </li> -->
                                    <li>
                                        <a href="{base}/support/yoga.html" class="menu-wrapper__basic-link">ヨガ</a>
                                    </li>
                                    <li>
                                        <a href="{base}/support/felice.html" class="menu-wrapper__basic-link">ヒーリングルーム「Felice」</a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                        <ul class="menu-wrapper__links02">
                            <li>
                                <a href="{base}/faq/">よくある質問</a>
                            </li>
                            <li>
                                <a href="{base}/access/">交通アクセス</a>
                            </li>
                            <li>
                                <a href="{base}/blog/">ブログ</a>
                            </li>
                        </ul>
                        <ul class="menu-wrapper__links03">
                            <li>
                                <a href="{base}/recruit/" class="menu-wrapper__recruit-link">
                                    <span class="ph"><img src="{base}/assets/img/common/recruit-bnr.jpg" alt=""></span>
                                    <span class="text">採用情報</span>
                                </a>
                            </li>
                            <li>
                                <a href="{base}/inquiry/id/0" class="menu-wrapper__contact-link"><span>お問い合わせ</span></a>
                            </li>
                            <li>
                                <a href="https://yoyaku.atlink.jp/sora-lc/" target="_blank" class="menu-wrapper__contact-link reserve"><span>WEB予約</span></a>
                            </li>
                        </ul>
                        <ul class="menu-wrapper__links04">
                            <li>
                                <a href="{base}/privacy/">プライバシーポリシー</a>
                            </li>
                            <!-- <li class="doctorsfile-btn">
                                <a href="https://doctorsfile.jp/h/135016/df/1/" target="_blank"><img src="{base}/assets/img/common/text_doctors_file_white.png" alt="Doctors file"></a>
                            </li> -->
                        </ul>
                        <!-- <ul class="menu-wrapper__sns-list sp">
                            <li class="menu-wrapper__sns-list__item i-insta">
                                <a href="https://www.instagram.com/sora.ladies.clinic/" target="_blank" class="menu-wrapper__sns-list__link"><img src="{base}/assets/img/common/icon_insta_color.svg" alt="Instagram"></a>
                            </li>
                            <li class="menu-wrapper__sns-list__item i-youtube">
                                <a href="https://www.youtube.com/channel/UC2h5CrAKKnQdpgpOQ775VFQ" target="_blank" class="menu-wrapper__sns-list__link"><img src="{base}/assets/img/common/icon_youtube_color.svg" alt="Youtube"></a>
                            </li>
                            <li class="menu-wrapper__sns-list__item i-df">
                                <a href="https://doctorsfile.jp/h/135016/df/1/" target="_blank" class="menu-wrapper__sns-list__link"><img src="{base}/assets/img/common/icon_df_color.png" alt="ドクターズファイル"></a>
                            </li>
                        </ul> -->
                    </div>
                </div>
            </div>
            <!--/ハンバーガーメニュー-->
            <label for="menu-btn" class="menu-btn">
                <span></span>
            </label>
            <div class="header-wrapper__nav">
                <ul class="header-wrapper__nav__list">
                    <!-- <li class="header-wrapper__nav__list__item i-search">
                        <a id="js-show-search"></a>
                    </li> -->
                    <li class="header-wrapper__nav__list__item i-insta">
                        <a href="https://www.instagram.com/sora.ladies.clinic/" target="_blank"></a>
                    </li>
                    <li class="header-wrapper__nav__list__item i-youtube">
                        <a href="https://www.youtube.com/channel/UC2h5CrAKKnQdpgpOQ775VFQ" target="_blank"></a>
                    </li>
                    <li class="header-wrapper__nav__list__item i-df">
                        <a href="https://doctorsfile.jp/h/135016/df/1/" target="_blank"></a>
                    </li>
                </ul>
                <div class="language-box">
                    <p target="_blank" class="language-box__btn">Language</p>
                    <div class="language-box__list">
                        <ul class="link-list">
                            <li>
                                <a href="https://sora-lc.com/" class="notranslate" target="_top">日本語</a>
                            </li>
                            <li>
                                <a href="https://sora--lc-com.translate.goog/?_x_tr_sl=auto&_x_tr_tl=en&_x_tr_hl=ja&_x_tr_pto=wapp" class="notranslate">English</a>
                            </li>
                            <li>
                                <a href="https://sora--lc-com.translate.goog/?_x_tr_sl=ja&_x_tr_tl=zh-CN&_x_tr_hl=ja&_x_tr_pto=wapp" class="notranslate">中文</a>
                            </li>
                            <li>
                                <a href="https://sora--lc-com.translate.goog/?_x_tr_sl=ja&_x_tr_tl=ko&_x_tr_hl=ja&_x_tr_pto=wapp" class="notranslate">한국어</a>
                            </li>
                        </ul>
                    </div>
                </div>
                <a  href="https://yoyaku.atlink.jp/sora-lc/" target="_blank" class="rsv-btn">WEB<br>予約</a>
            </div>
        </nav>
        <p class="header-copy">&copy; SORA LADIES CLINIC</p>
    </div>

    <div class="floating-box">
        <!-- <virtual if={!level1('recruit')}>
            <a  href="https://yoyaku.atlink.jp/sora-lc/" target="_blank" class="floating-btn">
                WEB<br class="sp">予約
            </a>
        </virtual>-->
        <virtual if={level1('recruit')}>
            <a href="{base}/inquiry/id/1" class="floating-btn floating-btn--entry">
                エントリー<br>する
            </a>
        </virtual>
    </div>

    <!--
    <div class="search-modal">
        <div class="popup" id="js-search">
            <div class="popup-inner">
                <p class="search-ttl"><span class="en">Search</span>サイト内検索</p>
                <div class="search-box">
                    <form method="get" action="https://www.google.co.jp/search">
                        <input type="text" name="q" placeholder="検索キーワードを入力">
                        <input type="hidden" name="ie" value="utf-8">
                        <input type="hidden" name="oe" value="utf-8">
                        <input type="hidden" name="hl" value="ja">
                        <input type="hidden" name="domains" value="sora-lc.com">
                        <input type="hidden" name="sitesearch" value="sora-lc.com">
                        <input type="submit" value="検索">
                    </form>
                    <div class="close-btn" id="js-search-btn">×</div>
                </div>
            </div>
            <div class="black-background" id="js-search-bg"></div>
        </div>
    </div>
    -->

    <script>
        // カレント設定
        this.on('mount', function() {
            //TOPがindex.htmlの場合でも、カレント表示がつくようにする
            var current = location.pathname.replace(this.base, '').split('/')[1];
            if (current.length === 0 || current === 'index.html') {
                $('.header-nav li > a[href="' + this.base + '/"]').closest('a').addClass('active');
            } else {
                $('.header-nav li > a[href^="' + this.base + '/' + current + '/"]').closest('a').addClass('active');
            }
        });
        this.on('mount', function() {
            $('#nav-open').on('click', function(){
                $(this).next().slideToggle(300);
                $(this).toggleClass('active');
            });
        });
        this.on('mount', function() {
            $('.menu-btn').on('click', function(){
                $('.header').toggleClass('header-active');
                $('.menu-btn').toggleClass('menu-active');
                $('.menu-wrapper').fadeToggle(700);
            });
        });
        this.on('mount', function() {
            var windowWidth = $(window).width();
            var windowSm = 599;
            if (windowWidth <= windowSm) {
                $('.menu-wrapper__title-link').on('click', function(){
                    $(this).next().slideToggle(500);
                    $(this).toggleClass('active');
                });
            } else {
            }
        });
        this.on('mount', function() {
            function popupImage() {
                var popup = document.getElementById('js-search');
                if(!popup) return;

                var blackBg = document.getElementById('js-search-bg');
                var closeBtn = document.getElementById('js-search-btn');
                var showBtn = document.getElementById('js-show-search');

                closePopUp(blackBg);
                closePopUp(closeBtn);
                closePopUp(showBtn);
                function closePopUp(elem) {
                    if(!elem) return;
                    elem.addEventListener('click', function() {
                      popup.classList.toggle('is-show');
                    });
                }
            }
            popupImage();
        });

        //言語アコーディオン
        this.on('mount', function () {
            const btn = this.root.querySelector('.language-box__btn');
            const list = this.root.querySelector('.language-box__list');

            if (btn && list) {
                btn.addEventListener('click', function () {
                    list.classList.toggle('active');
                });
            }
        });


    </script>

</header_common>
