/* タブレット向けレイアウト */
@media screen and (max-width: 1250px) {
    /* header */
    header {
        display: flex;
    }       

    /* wrapper */
    .wrapper {
        padding-top: 60px;
    }

    .pc {
        display: none;
    }

    .sp {
        display: block;
    }

    /* SideBar */
    .side-bar {
        display: none;
    }

    /* Main */
    .main {
      padding-left: 0;
    }

    /* MESSAGE */
    .message-wrapper .container {
        width: 100%;
    }

    .description_area {
        flex-direction: column;
        padding-bottom: 150px;
    }

    .description_text{
        width: 80%;
        margin: 0 auto;
        padding-left: 0;
        padding-top: 60px;
    }

    .description_image {
        width: 80%;
        margin: 0 auto;
    }

    .greeting_area {
        display: none;
    }

    /* STAFF */
    .staff-introduction {
        display: block;
    }

    .staff-container {
        width: 50%;
    }

    /* MENU */
    .menu-table {
        width: 70%;
    }

    /* ACCESS */
    .access-wrapper .container {
        flex-direction: column-reverse;
    }

    .ggmap {
        height: 0;
        overflow: hidden;
        padding-bottom: 56.25%;
        width: 100%;
        position: relative;
    }

     .info {
        width: 100%;
        padding-bottom: 30px;
    }

    /* RESERVATION */
    .btn {
        width: 300px;
        height: 60px;
        line-height: 60px;
    }

    /* footer */
    footer {
        width: 100%;
    }
}

/* モバイル向けレイアウト */
@media screen and (max-width: 599px) {

    /* header */
    header {
        height: 60px;
    }

    .header-logo {
        width: 50px;
    }

    /* menu-btn */
    header .menu_btn{
        width: 60px;
        height: 60px;
    }

    /* header gnav */

    header .gnav {
        top: 60px;
    }

    header .gnav ul li {
        border-bottom: solid 1px #F2F2F2;
        text-align: center;
        padding: 15px;
    }

    /* MESSAGE */
    .heading {
        font-family: 'Modern Antiqua', 'Noto Sans JP',serif;
        font-size: 22px;
        padding: 50px 0 15px 0;
        margin-bottom: 40px;
        border-bottom: 2px solid black;
    }

    .description_text{
        padding-top: 40px;
        font-size: 12px;
    }

    .description_area {
        padding-bottom: 90px;
    }

    hr {
        border-top: 2px dashed rgb(156, 151, 151);;
        height: 1em;
        width: 90%;
        margin: 0 auto;
        overflow: visible;
    }

    hr::after {
        content: url("../img/scissors_16px.png");
        font-size: 16px;
    }

    /* HAIRATYLE */
    .fujita-instagram{
        font-size: 14px;
        padding: 7px 30px;
        margin: 50px 0 30px 0;
    }

    .akano-instagram{
        font-size: 14px;
        padding: 7px 30px;
        margin: 0 0 100px 0;
    }

    .hairstyle-image img {
      width: 50%;
    }

    /* GALLERY */
    .gallery_image_left, .gallery_image_right{
        width: 80%;
    }

    .btn-gallery {
        font-size: 14px;
        padding: 7px 30px;
        margin: 50px 0 100px 0;
        width: 120px;
    }

    /* STAFF */
    .staff-container,
    .flip_box1,
    .flip_box2,
    .front,
    .back {
        width: 100%;
    }

    .staff-introduction {
        width: 90%;
        margin: 0 auto;
    }

    .front {
        border: 2px solid #000;
    }
    
    .back {
        border: 2px solid #000;
    }

    .staff-heading h1 {
        font-size: 28px;
    }
    
    .staff-heading h3 {
        font-size: 20px;
    }
    
    .staff-heading h2 {
        font-size: 18px;
    }

    /* MENU */
    .menu-table {
        width: 100%;
    }

    .menu-table td,.menu-table th{
        font-size: 14px;
    }

    /* ACCESS */
    .access-wrapper .container {
        padding-bottom: 100px;
    }

    .access-table th {
        width: 65px;
    }

    .access-table td,.access-table th{
        font-size: 13px;
    }

    /* RESERVATION */
    .reservation-wrapper {
        padding-bottom: 40px;
    }

    .reservation-content p {
        display: none;
    }

    .reservation-content {
        display: block;
    }

    .btn {
        display: inline-block;
        width: 100%;
    }

    /* footer */
    footer {
        font-size: 12px;
    }

}

/* モバイル向けレイアウト(Galaxy S5) */
@media screen and (max-width: 360px) {
    .staff-heading h1 {
        font-size: 22px;
    }

    .staff-heading h2 {
        font-size: 18px;
    }
}

@media screen and (max-width: 330px) {
    .staff-heading h1 {
        font-size: 20px;
    }

    .staff-heading h2 {
        font-size: 16px;
    }
}

/* モバイル向けレイアウト(iPhone5/SE) */
@media screen and (max-width: 320px) {
    .staff-heading h1 {
        font-size: 30px;
    }

    .staff-heading h2 {
        font-size: 18px;
    }

    .r_wrap {
        right: 20px;
        bottom: 30px;
    }
}

/* モバイル向けレイアウト(Galaxy Fold等) */
@media screen and (max-width: 280px) {
    .staff-heading h1 {
        font-size: 26px;
    }

    .staff-heading h2 {
        font-size: 20px;
    }

    .r_wrap {
        right: 12px;
        bottom: 30px;
    }

    .staff-heading h2 {
        font-size: 18px;
    }

    .access-table td,.access-table th{
        font-size: 11px;
    }
}