/* ハンバーガーメニュー */

.btn {
    position: fixed;
    /* position: absolute; */
    top: 4.5%;
    right: 7%;
    display: none;
    width: 40px;
    aspect-ratio: 1/1;
    background-color: transparent;
    border: none;
    
}


/* メニュータグの線を作る */
.line,
.line::before,
.line::after {
    display: block;
    width: 100%;
    height: 3px;
    background-color: #EDDDCC;
    position: relative;
    transition: rotate 0.5s 0.5s, all 0.5s 0s;
    /* バツが戻るときのアニメーション */
}

.line::before,
.line::after {
    content: "";
    position: absolute;
    left: 0;
    /* 線を真ん中に集合させる */
    z-index: 1200;
}

.line::before {
    top: -10px;
}

.line::after {
    top: 10px;
}


/* 真ん中の線を透明にする */
.is-show .line {
    background-color: #00000000;
}

.is-show .line::before {
    top: 0;
    transition: all 0.5s 0s, rotate 0.5s 0.5s;
    /* バツが始まるときのアニメーション */
    rotate: 45deg;
}

.is-show .line::after {
    top: 0;
    transition: all 0.5s 0s, rotate 0.5s 0.5s;
    /* バツが始まるときのアニメーション */
    rotate: -45deg;
}

.is-show .line::before,
.is-show .line::after {
    background-color: #fff;
    z-index: 1200;
}


/* 予約ボタンモバイル */
.mobile-reserve {
    display: none;
}


@media screen and (max-width:522px) {
    header {
        background-color: transparent;
    }



    .mainnav ul,
    .button-reserve {
        display: none;
    }

    h1 {
        top: 1vh;
    }

    nav.mainnav {
        position: absolute;
        left: 60%;
        /* background-color: rgba(255, 255, 255, 0.904); */
        width: 80%;
    }
    nav.mainnav ul {
        margin: 0 50%;
    }

    ul.head_nav {
        width: 100%;
    }


        /* ハンバーガーメニュー */
    .btn {
        display: block;
        z-index: 1000;
    }

    /* ハンバーガー中身 */
    /* .mainnav ul.head_nav{
        animation: 1s fadedown ease-in-out forwards;
    }

    @keyframes fadedown {
        0% {
          opacity: 1;
          transform: translateY(0px);
        }
      
        100% {
          opacity: 0;
          transform: translateY(-30px);
        }
      } */

    .mainnav.is-show ul.head_nav{
        display: block;
        right: 0vw;
        top: 0%;
        background-color: #d8b7a0bd;
        z-index: 1000;
        padding: 15% 22%;
        animation: 1s fadeup ease-in-out forwards;
    }

    @keyframes fadeup {
        0% {
          opacity: 0;
          transform: translateY(-30px);
        }
      
        100% {
          opacity: 1;
          transform: translateY(0);
        }
      }

    
    .mainnav.is-show ul.head_nav li {
        margin: 10%;
        text-align: center;
    }

    /* .mainnav.is-show ul.head_nav li a.radius_a,
    .mainnav.is-show ul.head_nav li a.radius_c {
        border-radius: 0;
    } */
    
    .mainnav.is-show ul.head_nav li a{
        padding: 30% 0%;
        box-shadow: none;
        text-align: left;
    }

    /* 予約ボタンモバイル */
    .mobile-reserve {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        position: fixed;
        bottom: 0;
        left: 0;
        border-top: 3px #fff solid;
    }

    .mobile-reserve p {
        font-size: clamp(30px, 2.5vw, 35px);
        color: #fff;
        background-color: #d8b7a0;
        padding: 10% 0%;
        padding-right: 40%;
        width: 220%;
        text-align: center;
    }
    .mobile-reserve .top-button {
        background: url(./img/hairsalon-img/mobile.btn.png) no-repeat center/cover;
        width: 82px;
        aspect-ratio: 1/1;
    }

    /* ロゴ */
    h1 a img{
        background: url(./img/hairsalon-img/logo-mobile.png) no-repeat center/cover;
        width: 20%;
    }

    /* infoのハンバーガーメニュー */
    .hamburger-info {
        width: 80%;
    }

    .center-info {
        padding-left: 12%;
    }

    /* salon */
    .giziyousoo::before {
        top: -2vh;
    }

    .bc-gizi-asiya::before{
        top: -2vh;
    }

    .gizi-asiya::before {
        top: -2vh;
    }

    /* styleの料金 */
    .style-menu .white-bc {
        width: 87%;
    }

    .price {
        padding-left: 2em;
      }


    /* contactここから */
    form label {
        text-align: left;
        width: 60%;
    }

    .naiyou {
        display: block;
      }

    .white-back {
        padding-left: 19%;
    }

    .contact-text {
        padding: 0;
    }

    input,
    textarea {
        width: 95%;
    }

    /* recruitここから */
    .occupation h3::before {
        top: -1.5vh;
    }

    .shop-info-recruit {
        display:block;
    }

    .shop-info-recruit h5 {
        margin-top: 0;
    }

    .shop-info-recruit p {
        margin-bottom: 7%;
    }

    .shop-info-recruit img {
        margin-left: 12%;
    }

    .img-shop-okamoto img {
        width: 77%;
    }

    /* footerここから */
    .hot-p{
        padding-right: 39%;
    }

    .js-pagetop,
    .scroll-top {
        display: none;
    }
}


@media screen and (max-width:389px) {
    .mobile-reserve p {
        text-align: left;
        padding-left: 10%;
    }
}

@media screen and (max-width:750px) {
    .map iframe{
        height: 90%;
    }

    .gizi-asiya::before {
        top: -4vh;
    }
}

@media screen and (max-width:650px) {
    .bc-gizi-asiya::before{
        top: -2vh;
    }
}