@charset "utf-8";

/*↓ディスプレイ580px以下用↓*/

@media screen and (max-width:580px) 

{
    
.base{
    width:auto;
}

.box{
    margin:0px;
}

.work{
    float:none;
    width:auto;
    margin:0px;
    padding:10px;
}

.text{
    float:none;
    width:auto;
    margin:0px;
    padding:2px;
}

.text2{
    float:none;
    width:auto;
    margin:0px;
    padding:2px;
}

.text3{
    float:none;
    width:auto;
    margin:0px;
    padding:2px;
}

.gallery{
    flex-direction:column;
    width:auto;
    margin:0px;
}

.colum{
    flex-direction:column;
    width:auto;
    margin:10px 0px;
}

.item2{
    width:95%;
}

.item3-1{
    width:95%;
    padding:6px;
}

.item3-2{
    width:95%;
}

h1{
    font-size:140%;
}



ul.main-nav .example{
    width:auto;
    margin:0px;
    padding:0px;
}

div.footer .hiragino{
    margin:0px;
    padding:10px 10px;

}

li{
    padding:10px 10px;
}

nav{
    padding:10px 10px;

}


}

/*↓ディスプレイ580px以下用↓*/

@media screen and (max-width:480px) 

{
    
.base{
    width:auto;
}

.box{
    margin:0px; 

}

.work{
    float:none;
    width:auto;
    margin:0px;
    padding:10px;
}

.text{
    float:none;
    width:auto;
    margin:0px;
    padding:2px;
    font-size:90%;
}

.text2{
    float:none;
    width:auto;
    margin:0px;
    padding:2px;
    font-size:70%;
}

.text3{
    float:none;
    width:auto;
    margin:0px;
    padding:2px;
    font-size:50%;
}

.gallery{
    flex-direction:column;
    width:auto;
    margin:0px;
}

.colum{
    flex-direction:column;
    width:auto;
    margin:10px 0px;
}

.item2{
    width:95%;
}

.item3-1{
    width:95%;
    padding:6px;
}

.item3-2{
    width:95%;
}

h1{
    width:auto;
}

h3{
    font-size:120%;
    width:auto;
    margin:10px 0px;
}



ul li.main-nav{
    font-size:10%;
    min-width:20%;
    width:auto;

}

div.footer .hiragino{
    margin:0px;
    padding:10px 10px;

}

nav{
    padding:10px 10px;
    font-size:70%;

}

}