@media screen and (max-width:600px){

header{
        display:grid;
        grid-template-columns: 10rem  auto 2rem;
        max-width:100%;
        padding:1rem;
        /* overflow:hidden; */
    }


    /* header gridレイアウトの順番を入れ替える */

#logo{order:1; }
#toggle_btn{order:3;}
nav {order:4;}

#btn_contact{
 order:2;
/* width:initial; */
padding:0.5rem;
font-size:80%;
justify-self: end;
margin-right:1rem;
}


section{
    justify-content:space-between;
    margin:auto 5%;
    padding:0 0;
    flex-direction: column;


}


.con01{
    flex-direction: column-reverse;
    padding-top:3rem;

}

/* ドロワーメニューの設定 */

#toggle_btn{
    padding:0;
    cursor:pointer;
    display:block;
   
     }


nav ul{
    list-style-type:none;
    position:absolute;
    top:1rem;
    left:0;
    display:flex;
    flex-direction:column;
    width:100%;
    background:rgba(0,0,0,0.5);
    
}

nav ul li{
/* max-inline-size:100%; */
padding:2rem;
border-bottom:1px solid #ddd;
text-align:center;
width:100%;

}


nav{
    margin-left:-1rem;
    z-index:999;
    transform:translateX(0);
    opacity:0;
    width:100vw;
 }
nav.open{
    transform:translateX(0);
    opacity:1;
    z-index:999;
    transition:0.5s ease-in;
  width:100vw;
    margin-left:-1rem;
}

#toggle_btn .bar1,
#toggle_btn .bar2,
#toggle_btn .bar3
{

height:0.3rem;
width:2rem;
background:#FFF;
margin:0.3rem 0;
display:block;
transition:0.1s;


}

.rotate1{
    transform:translateY(0.6rem) rotate(45deg);
    bottom:0;
}

.rotate2{
    opacity:0;
}

.rotate3{
    transform:translateY(-0.6rem) rotate(-45deg);
    top:0;
}


.con_text,.con_image{
    width:100%;
}

.con_text{
    padding:0;
    margin:2rem 0;
}

.con02{
    height:18rem; 
    padding:2rem;
    margin:4rem 0 2rem 0;
    background-position-y:10%;
}

.con02 .inner{

    margin-top:3rem;
}

.con03 img{
    margin-left:-10%;
}

.con04{
    margin:0;
    }


.gallery {
        display:grid;
        grid-template-columns: none;
        grid-template-rows: repeat(5, 1fr);
        margin-bottom:0;
        overflow: hidden;
        }
    
        .up {
            transform:translate(-10rem,0);
            opacity:0;
            }
            .up.show{
                transform:translate(0,0);
                opacity:1;
                transition:2s;
            }


}