@charset "utf-8";
/* CSS Document */
/*タブレット縦以下*/
@media screen and (max-width: 1024px) {
        #main {
                display: block;
        }
        .box-left-flex {
                top: 0;
                width: 100%;
                height: 50px;
                display: flex;
                position: fixed;
                z-index: 99;
                vertical-align: middle;
                background-color: #000000;
        }
        .hamu {
                top: 0;
                opacity: 1;
                margin: auto;
                font-weight: bold;
                font-size: 16px;
                height: 50px;
        }
        .hamu p a {
            font-size: 0.6rem;
                font-family: '游明朝', 'Yu Mincho', YuMincho, 'Hiragino Mincho Pro', serif;
                line-height: 50px;
                color: #FFFFFF;
        }
        #box-left { /*nav*/
                width: 50px;
                height: 50px;
                position: fixed;
                display: block;
                line-height: 110%;
                background-color: #000000;
        }
        /*================================================================
================================================================*/
        /*.hamburger-box*/
        .hamburger-box {
                position: fixed;
                top: 0;
                right: 0;
                width: 50px;
                height: 50px;
                z-index: 9999; /*ボタンを最前面に*/
                cursor: pointer;
                background-color: #000000;
        }
        /*×に変化*/
        .hamburger-box span {
                display: inline-block;
                transition: all .5s;
                position: absolute; /*絶対値*/
                left: 14px;
                height: 3px;
                border-radius: 2px;
                background-color: #FFFFFF;
                width: 45%;
        }
        .hamburger-box span:nth-of-type(1) {
                top: 15px;
        }
        .hamburger-box span:nth-of-type(2) {
                top: 23px;
        }
        .hamburger-box span:nth-of-type(3) {
                top: 31px;
        }
        .hamburger-box.active span:nth-of-type(1) {
                top: 18px;
                left: 18px;
                width: 30%;
                transform: translateY(6px) rotate(-45deg);
        }
        .hamburger-box.active span:nth-of-type(2) {
                opacity: 0;
        }
        .hamburger-box.active span:nth-of-type(3) {
                top: 30px;
                left: 18px;
                width: 30%;
                transform: translateY(-6px) rotate(45deg);
        }
        /*active*/
        #hamburger-nav.panelactive {
                position: fixed;
                z-index: 777;
                top: 0;
                width: 100%;
                height: 100vh;
        }
        /*丸の拡大*/
        .hamburger_nav_circle {
                position: fixed;
                z-index: 7;
                /*丸の形*/
                width: 100px;
                height: 100px;
                border-radius: 50%; /*正円*/
                background-color: #000000;
                /*丸のスタート位置と形状*/
                transform: scale(0); /*scaleをはじめは0に*/
                right: -50px;
                top: -50px;
                transition: all .6s; /*0.6秒かけてアニメーション*/
        }
        .hamburger_nav_circle.circleactive {
                transform: scale(50); /*クラスが付与されたらscaleを拡大*/
        }
        /*ナビゲーションの縦スクロール*/
        #hamburger_nav_scroll {
                display: none; /*はじめは表示なし*/
                /*ナビの数が増えた場合縦スクロール*/
                position: fixed;
                z-index: 777;
                width: 100%;
                height: 100vh;
                overflow: auto;
                -webkit-overflow-scrolling: touch;
                align-items: center;
        }
        #hamburger-nav.panelactive #hamburger_nav_scroll {
                display: block; /*クラスが付与されたら出現*/
        }
        /*ナビゲーション*/
        #hamburger-nav ul {
                opacity: 0; /*はじめは透過0*/
                /*ナビゲーション天地中央揃え※レイアウトによって調整してください。不必要なら削除*/
                position: absolute; /*絶対値*/
                z-index: 777;
                line-height: normal;
                margin-bottom: 30px;
                width: 100%;
        }
        /*背景が出現後にナビゲーションを表示*/
        #hamburger-nav.panelactive ul {
                opacity: 1;
                align-items: center;
        }
        /* 背景が出現後にナビゲーション li を表示※レイアウトによって調整してください。不必要なら削除*/
        #hamburger-nav.panelactive ul li {
                animation-name: hamburgerAnimartion;
                animation-duration: 1s;
                animation-delay: .3s; /*0.2 秒遅らせて出現*/
                animation-fill-mode: forwards;
                opacity: 0;
        }
        @keyframes hamburgerAnimartion {
                0% {
                        opacity: 0;
                }
                100% {
                        opacity: 1;
                }
        }
        /*================================================================
================================================================*/
        /*リストのレイアウト設定*/
        #hamburger-nav li {
                text-align: left;
                list-style: none;
                color: #FFFFFF;
        }
        #hamburger-nav li a {
                text-decoration: none;
                display: block;
                color: #FFFFFF;
                padding-top: 5px;
                padding-bottom: 5px;
        }
        /**/
        .black-box {
                height: 12px;
                width: auto;
        }
        .nav-li {
                border-left: solid 1px #FFF;
                margin-left: 15px;
        }
        /*================================================================
================================================================*/
        .hr-dotted {
                width: 40%;
                margin-top: 30px;
        }
        .hr-dotted2 {
                width: 40%;
                margin-top: 12px;
        }
        /*================================================================
================================================================*/
}