@charset "UTF-8";
/* AUTHOR:t-styles */

/* ------------------------------------ */
/* ▼スマホ用＆共通デザイン */
/* ------------------------------------ */

.side_me{
	width:22%;
    position: fixed;
    left: 4%;
    top: 5%;
    z-index: 1;	
}
.side_aa{
	width:50%;
}
.side_aa img{
	transition: transform .6s ease;
	opacity: 0.3;
}
.side_aa:hover img{
	transform: scale(1.1);
	opacity: 0.6;	
}
.side_co{
	width:35%;
}
.side_co img{
	transition: transform .6s ease;
	opacity: 0.3;
}
.side_co:hover img{
	transform: scale(1.1);
	opacity: 0.6;	
}
.side_logo{
	width:30%;
    position: fixed;
    right: 3%;
	bottom: 1%;
    z-index: 1;
}


/* ------------------------------------ */
/* ▼タブレット （768〜1280px）*/
/* ------------------------------------ */

@media screen and (min-width: 768px) {
.side_me{
	width:8%;
    left: 2%;
}
.side_aa{
	width:10%;
	padding-left: 10%;
}
.side_co{
	width:15%;
	padding-left: 10%;
}
.side_logo{
	width:20%;
}
}


/* ------------------------------------ */
/* ▼パソコン （1280px〜）*/
/* ------------------------------------ */

@media screen and (min-width: 1280px) {
.side_me{
	width:10%;
}
.side_aa{
	width:25%;
	transform: rotateZ( 90deg );
    position: fixed;
    left: -7%;
    top: 50%;
    z-index: 1;
}
.side_co{
	width:20%;
	transform: rotateZ( 90deg );
    position: fixed;
    right: -3%;
    top: 50%;
    z-index: 1;	
}
.side_logo{
	width:20%;
	bottom: 3%;
}
}







.works_button{
	display: flex;
    flex-wrap: wrap;/*スマホ表示折り返し用なのでPCのみなら不要*/
	justify-content: space-around;
    list-style: none;
}
.works_button ul{
	
}
.works_button li{
	width: 20%;
	
}
.works_button li img{
	width: 80%;
}