@charset "utf-8";

*{
margin:0;
padding:0;
}

a{
text-decoration:none;
color:#000;
}

img{
vertical-align:bottom;
border:none;
}

li{
list-style-type:none;
}

h1,h2,h3{
font-weight: 400;
}

body{
font-family: "Montserrat","Klee One", sans-serif, cursive;
font-optical-sizing: auto;
font-style: normal;
font-weight:300;
}

#wrapper{
width: 100%;
background-image: url("../img/work_bg.jpg"), url("../img/work_bg2.jpg");
background-position: left top, left bottom;
/*background-attachment: fixed;*/
background-repeat: no-repeat, no-repeat;
background-size: 100%;
color: #6D6361;
letter-spacing: 0.1em;
padding-bottom: 20px;
float: left;
}

header{
width:20%;
height:100vh;
position:fixed;
left:0;
top:0;
}

header h1{
width:33%;
margin:230px auto 40px;
text-align: center;
background-image: url("../img/point_red.jpg");
background-position: left top;
background-size: 30%;
background-repeat: no-repeat;
font-size:max(1.6vw,16px);
padding: 3px 0;
}

nav ul{
width: fit-content;
margin: 0 auto;
text-align:center;
line-height:2;
text-align: left;
}

nav ul li{
font-size: max(1.4vw,14px);
margin-top: 10px;
}

main{
width:80%;
float: right;
/*position:absolute;
right:0;
top:0;
*/}

main section#temp{
margin-top: 13vw;
}


main section{
width:55%;
margin:8vw auto 0;
}

main section p{
text-align: center;
}

main section p span{
font-size: 13px;
font-size: max(1.3vw,14px);
}

main section h2{
text-align:center;
padding:3vw 0 15px;
font-size: max(1.6vw,18px);
}


main ul{
display:flex;
flex-wrap:wrap;
justify-content:space-between;
margin-top: 30px;
align-items: center;
}

main ul li{
width:21%;
margin-bottom:25px;
border: 1px solid #6D6361;
}

main section#web ul li{
    width: 80%;
    margin: 0 auto 25px;
}

main #temp ul li,main #sns ul li{
width:30%;
}

main #others ul li{
width:45%;
}

#temp #more{
font-size: max(1.3vw,14px);
text-align: right;
padding: 0 1em;
}

#sns ul li:nth-child(5){
height: fit-content;
}

#more span {
display: inline-block;
width: 2em;
height: 0.5em;
border-bottom: 1px solid #6D6361;
border-right: 1px solid #6D6361;
transform: skew(45deg);
}

#web{
margin-bottom: 15vw;
}

main ul li.yoko{
height: fit-content;
}

main ul li.no{
border: none;
}

main ul li img{
width:100%;
}

#totop{
text-align: center;
padding: 1em;
border: 1px solid #6D6361;
position: fixed;
right: 3vw;
bottom: 3vw;
}

#totop a{
display: block;
width: 100%;
height: 100%;
}

.clearfix::after {
content: "";
display: block;
clear: both;
}



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

header{
position:static;
width:100%;
height:auto;
padding:70px 0 0;
}

header h1{
width:5.5em;
height:20px;
margin:0 auto;
background-size: 30%;
}

nav ul{
display:flex;
width:80%;
margin:0 auto;
justify-content:space-between;
}

nav ul li{
width:fit-content;
font-size: max(1.4vw,11px);
margin-top:10px;
}

main{
width:100%;
float: inherit;
}

main section{
width: 80%;
font-size: max(1.4vw,12px);
margin-top: 12vw;
}

main ul li{
width:30%;
}

#totop {
font-size: max(1.4vw,12px);
    padding: 1em;
    border: 1px solid #6D6361;
    position: fixed;
    right: 3vw;
    bottom: 3vw;
}


}