/***********************/
/*** 携帯端末用の設定 ***/
/***********************/
@charset "utf-8";


/*pad-->最小幅768px以上の指定*/
@media screen and (max-width:768px){

    #globalnav {
        position: fixed;
        height: 100%;
        width: 100%;
        top: 0;
        background: rgba(0, 0, 0, 0.66);
    }

    #globalnav {
        /* display: none; */
    }

    nav ul {
        display: inline-block;
        width: calc(100% - 2rem);
        transform: translateY(15%);
    }

    nav li {
        margin: 2rem 1rem!important;
        width: inherit!important;
    }

    nav ul li:first-child{
        margin: none!important;
    }

    #hamburger {
        display: block;
        position: fixed;
        background: var(--color-alizarin);
        bottom: 10rem;
        right: 2rem;
        width: 6rem;
        height: 6rem;
        border-radius: 4rem;
        box-shadow: 1px 1px 4px var(--color-black);
        text-align: center;
        z-index: 9999;
        font-size: 4rem;
        color: white;
    }
    /* #hamburger::before {
        content: "≡";
        color: var(--color-white);
        font-size: 4rem;
        padding: 1rem;
    } */
    #hamburger_close {
        display: block;
        position: fixed;
        background: var(--color-alizarin);
        bottom: 10rem;
        right: 2rem;
        width: 6rem;
        height: 6rem;
        border-radius: 4rem;
        box-shadow: 1px 1px 4px var(--color-black);
        text-align: center;
        z-index: 9999;
        font-size: 4rem;
        color: white;
    }
    /* #hamburger_close::before {
        content: "☓";
        color: var(--color-white);
        font-size: 4rem;
        padding: 1rem;
    } */
}

/*mobilephone-->最大値480px以下の指定--start--*/
@media screen and (max-width:480px) {

    /***************/
    /*** ヘッダー ***/
    /***************/
    header {

    }

    .header_subpage {
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        color: var(--main-color-black);
        height: 16rem;
        text-align: center;
        background: var(--color-greensea);
        z-index: 9000;
        transition: 250ms;
        display: block;
    }

    .header_subpage .header_title {
        text-align: left;
        display: block;
        width: 100%;
        margin: 0 0 0 2rem;
    }

    .header_subpage .header_info {
        width: 100%;
        position: inherit;
        right: 0;
        bottom: 0;
        text-align: right;
    }

    .header .header_title {
        position: absolute;
        top: 0;
        text-align: left;
        width: 100%;
        margin: 1rem 0 0 1rem;
        filter: drop-shadow(1px 1px 2px black);
    }

    .header .header_info {
        position: absolute;
        top: 18rem;
        right: 0;
        width: 80%;
        margin: 0 1rem 0 0;
        text-align: right;
    }

    .header_subpage .header_info img {
        height: 6rem;
        margin: 0;
        padding: 0 2rem;
    }

    /***************/
    /*** フッター ***/
    /***************/
    footer {
        height: fit-content;
        bottom: 8rem;
        position: relative;
    }

    /*************/
    /*** index ***/
    /*************/
    
    /*** グローバルナビ ***/
    /* nav ul li {
        min-width: calc(50% - 2rem);
    }*/

    .banner_square_small {
        width: calc(50% - 1rem);
    } 

    /***ラッパー***/
    .wrapper {
        display: block;
    }

    /*** コンテナ ***/
    .container {
        display: block;
        width: 100%;
    }

    /*** メイン ***/
    main {
        width: calc(100% - 2rem);
    }

    /*** サイドバー ***/
    .sidebar {
        width: 100%
    }

    .footer_leftside {
        width: 100%;
    }

}