@charset "utf-8";

/* ヘッダーメニューSP用 */
.header_menu {
    display: none;
}

/* メニューリスト非表示 */
.menu_sp {
    display: none;
}

@media screen and (max-width: 720px) {
    .header_menu {
        display: block;
        width: 100%;
        max-width: 720px;
        height: 50px;
        max-height: 60px;
        top: 0;
        position: fixed;
        display: flex;
        z-index: 100;
        background-color: #FFE9F5;
    }

    /* ヘッダー内ロゴ */
    .header_logo_img_area {
        width: 100%;
        height: 100%;
        margin: 0 auto;
        text-align: center;
        align-items: center;
        position: absolute;
    }

    .header_logo {
        width: 125px;
        height: 55px;
    }

    /* ヘッダー内メニューボタン */
    .menuBtn {
        width: 20%;
        position: absolute;
        top: 39%;
        transform: translate(0, -50%);
        left: 80%;
    }

    #menuHideBtn {
        width: 30px;
        height: 30px;
        position: absolute;
        top: 55%;
        transform: translate(0, -50%);
        left: 85%;
        text-align: center;
    }

    .close_icon {
        position: relative;
        display: inline-block;
        width: 20px;
        height: 1.5px;
        background: #5A5A5A;
        transform: rotate(45deg);
        vertical-align: middle;
    }

    .close_icon::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #5A5A5A;
        transform: rotate(90deg);
    }

    .menuBtn p {
        display: block;
        position: relative;
        width: 10px;
        height: 10px;
    }

    /* ヘッダーチェックボックス非表示に */
    .header_menu input[type=checkbox] {
        display: none;
    }

    /* クローズボタン非表示に不要 */
    #menuHideBtn.menuBtn.disabled {
        display: none;
    }

    /* メニューボタン押下時メニュー項目非表示に */
    #menuShowBtn.menuBtn.disabled {
        display: none;
    }

    /* ヘッダーメニュー押下時　画面スクロール禁止 */
    #bodyDisabled {
        pointer-events: none;
        overflow: hidden;
    }

    /* メニューリスト表示時 */
    .menu_sp.active {
        display: block;
        z-index: 11;
        position: fixed;
        top: 0;
        height: 50px;
    }

    .menu_sp_background.active {
        position: fixed;
        width: 100%;
        height: 100%;
        background: rgba(90,90,90,.6);
        top: 0;
        left: 0;
        z-index: 10;
    }

    #menuShowBtn {
        pointer-events: all;
    }

    #menuHideBtn {
        pointer-events: all;
    }

    .menu_sp img {
        pointer-events: all;
        width: 75vw;
        height: 75vw;
    }

    .startguide_btn_sp {
        position: fixed;
        top: 10%;
        left: -5%;
        z-index: 12;
        animation-name: startguideBtnSp;
        animation-duration: 0.5s;
        animation-iteration-count: 1;
    }

    @keyframes startguideBtnSp {
        0% {
            transform: rotateZ(380deg);
            left: 1000px;
            top: 1000px;
        }

        100% {
            top: 10%;
            left: -5%;
        }
    }

    .operation_btn_sp {
        position: fixed;
        top: 35%;
        left: 30%;
        z-index: 14;
        animation-name: operationBtnSp;
        animation-duration: 1s;
        animation-iteration-count: 1;
    }

    @keyframes operationBtnSp {
        0% {
            transform: rotateZ(380deg);
            left: 1000px;
            top: 1000px;
        }

        100% {
            left: 30%;
            top: 35%;
        }
    }

    .info_btn_sp {
        position: fixed;
        top: 60%;
        left: -5%;
        z-index: 15;
        animation-name: infoBtnSp;
        animation-duration: 1.5s;
        animation-iteration-count: 1;
    }

    @keyframes infoBtnSp {
        0% {
            transform: rotateZ(380deg);
            left: 1000px;
            top: 1000px;
        }

        100% {
            top: 60%;
            left: -5%;
        }
    }
}