@charset "utf-8";

#head_wrap {width: 288px;height: auto;max-height: calc(100vh - 60px);margin: 0 auto;line-height: 1;z-index: 999;text-decoration: none;box-sizing: border-box;padding: 40px 0;background: #FFF;position: absolute;left: calc(50% - 640px);top:50px;}  
#head_wrap .inner {width: 100%;height: auto;margin: 0 auto;padding: 0;position: relative;}
#head_wrap .inner .h_logo {width: 234px;height: auto;margin: 0 auto 24px;}

/** ▼▼▼▼▼▼▼▼▼▼ about ▼▼▼▼▼▼▼▼▼▼ **/
#head_wrap .inner ul.head_about {width: 90%;height: auto;margin: 0 auto;padding: 0;}
#head_wrap .inner ul.head_about li a.tel {display: flex;align-items: center;justify-content: center;font-family: "Roboto", sans-serif;font-size: 1.86em;font-optical-sizing: auto;font-weight: 700;font-style: normal;font-variation-settings: "wdth" 100;letter-spacing: 0.02em;line-height: 100%;color: #000000;}
#head_wrap .inner ul.head_about li a.tel:before {content: "";display: block;width: 25.6px;height: 25.6px;margin: 0 10px 0 0;border-radius: 50%;background: #D4AF37 url(../manmaru_images/ico_tel.png) no-repeat center center;}  
#head_wrap .inner ul.head_about li a.ask {display: flex;align-items: center;justify-content: center;width: 100%;height: 40px;border-radius: 20px;background: #e50012;font-weight: 700;color: #FFFFFF;transition: .3s;}
#head_wrap .inner ul.head_about a.ask:hover {background: #993322;color: #FFFFFF;}  
#head_wrap .inner ul.head_about li:nth-child(2) {padding: 0 0 16px 50px;font-size: 0.75em;line-height: 160%;}
/** ▲▲▲▲▲▲▲▲▲▲ about ▲▲▲▲▲▲▲▲▲▲ **/
  
@media (max-width: 750px) {
    #head_wrap {width: 100%;max-height: auto;margin: 0 auto;padding: 0;background: #FFF;position: relative;left:0;top:0;}
}
  
#head_wrap .logo {
    /**float: left;**/
    height: 143px;
}
  
#head_wrap .logo img {
    width: auto;
    height: 143px;
}

/** ▼▼▼▼▼▼▼▼▼▼ g_nav ▼▼▼▼▼▼▼▼▼▼ **/
#global-nav ul {position: relative;list-style: none;width: 100%;box-sizing: border-box;padding: 0 0% 20px 15%;}
#global-nav ul li {margin-bottom: 0.5em;}
#global-nav ul li a {display: block;transition: .3s;}
#global-nav ul li a svg {width: auto;height: 22px;transition: all 0.5s;}  
#global-nav ul li a:hover svg {fill: #42AFE3;}
  
@media (max-width: 750px) {
	#global-nav ul {display: block;margin-right: 0px;width: 100%;}
}
  
#global-nav ul li:last-child {
    border-right: none;
}
  
#global-nav ul li a {
    transition: all .3s ease 0s;
    box-sizing: border-box;
}
/** ▲▲▲▲▲▲▲▲▲▲ g_nav ▲▲▲▲▲▲▲▲▲▲ **/
  
#head_wrap.fixed #head_wrap .inner {
    height: 100px;
    transition: .3s;
}

/** ▼▼▼▼▼▼▼▼▼▼ Toggle Button ▼▼▼▼▼▼▼▼▼▼ **/
#nav-toggle {display: none;position: absolute;top: 10px;right: 10px;width: 50px;height: 50px;border-radius: 50%;background: #e50012;cursor: pointer;z-index: 101;}
  
#nav-toggle div {
    position: relative;
}
/** ▲▲▲▲▲▲▲▲▲▲ Toggle Button ▲▲▲▲▲▲▲▲▲▲ **/

/**#switching {
    display: none;
}**/
  
@media (max-width: 750px) {
    #head_wrap {
        top: 0;
        position: fixed;
        margin-top: 0;
        width: 100%;
        height: 80px;
        padding: 0;
        /* Fixed reset */
    }

    #head_wrap .inner {
        width: 100%;
        height: 80px;
        padding: 0;
    }

    #head_wrap.fixed {
        height: 80px;
        padding-top: 0;
        background: transparent;
    }
  
    #head_wrap.fixed .inner {
        height: 80px;
    }

    #mobile-head {
        background: #FFF;
        width: 100%;
        height: 80px;
        z-index: 999;
		position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #head_wrap.fixed .logo,
    #head_wrap .logo {
        /**position: absolute;
        left: 15px;
        top: 10px;**/
        height: 70%;
        margin: 0;
    }

    #head_wrap.fixed .logo img,
    #head_wrap .logo img {
        width: auto;
        height: 100%;
    }

    /** ▼▼▼▼▼▼▼▼▼▼ g_nav ▼▼▼▼▼▼▼▼▼▼ **/
    #global-nav {
        position: absolute;
        top: -800px;
        flex-wrap: wrap;
        background: #FFFFFF;
        width: 100%;
        height: calc(100vh - 80px);
		box-sizing: border-box;
        padding: 20px 0 45px 0;
        -webkit-transition: .5s ease-in-out;
        -moz-transition: .5s ease-in-out;
        transition: .5s ease-in-out;
    }
  
    #global-nav ul {
        position: static;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
        margin: 0;
		box-sizing: border-box;
		padding: 0 7% 0;
    }
  
    #global-nav ul li {
        width: 100%;
		box-sizing: border-box;
    }

    #global-nav ul li a {display: flex;align-items: center;justify-content: space-between;width: 100%;height: 32px;margin: 0 0 5px 0;padding: 0 0 0 4%;list-style: none;background: #e50012;position: relative;}
    #global-nav ul li a.gnav::before,#global-nav ul li a.gnav::after {position: absolute;top: 0;bottom: 0;margin: auto;content: "";vertical-align: middle;}
    #global-nav ul li a.gnav::before {right: 16px;width: 8px;height: 8px;border-top: 2px solid #FFF;border-right: 2px solid #FFF;-webkit-transform: rotate(135deg);transform: rotate(135deg);}
    #global-nav ul li a svg {max-width: initial;max-height: 16px;fill: #FFF;}

    /** ▼▼▼▼▼▼▼▼▼▼ about ▼▼▼▼▼▼▼▼▼▼ **/
    #head_wrap .inner #global-nav ul.head_about {
        display: block;
        width: 85%;
        /**height: 136px;**/
        height: 250px;
        margin: 16px auto 0 auto;
        padding: 0;
    }

    #head_wrap .inner #global-nav ul.head_about li a.tel {
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "Roboto", sans-serif;
        font-size: 10vw;
        font-optical-sizing: auto;
        font-weight: 700;
        font-style: normal;
        font-variation-settings: "wdth" 100;
        letter-spacing: 0.02em;
        line-height: 100%;
        color: #000000;
        height: initial;
        margin: 0;
        padding: 0;
        background: none;
    }
  
    #head_wrap .inner #global-nav ul.head_about li a.tel:before {
        content: "";
        display: block;
        width: 41px;
        height: 41px;
        margin: 0 10px 0 0;
        border-radius: 50%;
        background: #572e12 url("../manmaru_images/ico_tel_b.png") no-repeat center center;
    }

    #head_wrap .inner #global-nav ul.head_about li a.ask {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 40px;
        border-radius: 20px;
        background: #e50012;
        font-weight: 700;
        color: #FFFFFF;
        margin: 20px 0 0 0;
        padding: 0;
    }

    #head_wrap .inner #global-nav ul.head_about li:nth-child(2) {
        margin: 0;
        padding: 0 0 0 60px;
        font-size: 3.6vw;
        line-height: 160%;
    }

    #head_wrap .inner #global-nav ul.head_about li:nth-child(4) {
        font-size: 3.6vw;
        line-height: 200%;
        text-align: center;
        margin: 20px 0 0 0;
        padding: 0;
    }
    /** ▲▲▲▲▲▲▲▲▲▲ about ▲▲▲▲▲▲▲▲▲▲ **/


    /** ▼▼▼▼▼▼▼▼▼▼ Toggle Button ▼▼▼▼▼▼▼▼▼▼ **/
    #nav-toggle {
        display: block;
    }

    /* #nav-toggle 切り替えアニメーション */
    #nav-toggle span {
        display: block;
        position: absolute;
        height: 4px;
        width: 30px;
        background: #FFFFFF;
        left: 10px;
        -webkit-transition: .35s ease-in-out;
        -moz-transition: .35s ease-in-out;
        transition: .35s ease-in-out;
    }

    #nav-toggle span:nth-child(1) {
        top: 13px;
    }

    #nav-toggle span:nth-child(2) {
        top: 23px;
    }

    #nav-toggle span:nth-child(3) {
        top: 33px;
    }

    .open #nav-toggle span:nth-child(1) {
        top: 25px;
        -webkit-transform: rotate(315deg);
        -moz-transform: rotate(315deg);
        transform: rotate(315deg);
    }

    .open #nav-toggle span:nth-child(2) {
        width: 0;
        left: 50%;
    }

    .open #nav-toggle span:nth-child(3) {
        top: 25px;
        -webkit-transform: rotate(-315deg);
        -moz-transform: rotate(-315deg);
        transform: rotate(-315deg);
    }
    /** ▲▲▲▲▲▲▲▲▲▲ Toggle Button ▲▲▲▲▲▲▲▲▲▲ **/

    /* #global-nav スライドアニメーション */
    .open #global-nav {
    /* #global-nav top + #mobile-head height */
        -moz-transform: translateY(880px);
        -webkit-transform: translateY(10px);
        transform: translateY(880px);
    }
}