@charset "utf-8";

/* 共通部分--------*/
html {
    font-size: 100%;
    
}
body {
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

header {
    background-color: dodgerblue;
    height: 100px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    
}
footer {
    background-color: rgb(251, 209, 85);
    height: 100px;
    padding: 30px;
}
footer p{
    text-align: center;
}
.wrap {
    width: 80%;
    margin: auto;
}
a {
    text-decoration: none;
}

.works-header {
    display: flex;
    justify-content: space-between;
}
.works-nav {
    display: flex;
    justify-content: space-between;
}
li {
    list-style: none;
}
.category{    
    
    text-align: center;    
    
}
.box{
    margin-top: 120px;
}



.detail-wrap{
    width: 800px;
    margin: auto;
    
}

.description{
    width: 650px;
    margin: auto;
}

.category-wrap{
    width: 60%;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1fr ;
    text-align: center;
}


/* ヘッダーメニュー　アンダーライン  -----------------*/
.home-nav a {
    position: relative;
}
.home-nav a::after {
    position: absolute;
    left: 0;
    content: '';
    width: 100%;
    height: 2px;
    background: #000000;
    bottom: -10px;
    visibility: hidden;
}
.home-nav a:hover::after {
    visibility: visible;
}

.works-header h2 :hover{
    background-color: blue;
}


.works-nav a:hover{
    background-color: blue;
}




/* home --------*/
.home-header {
    display: flex;
    justify-content: space-between;
    padding : 20px;
    
}
.home-nav {
    display: flex;
    list-style: none;
}
.mainvisual {
    width: 80%;
    margin: auto;
    margin-top: 100px;
}
.mainvisual img {
    
    width: 100%;
}


.home-nav li {
    text-decoration: none;
    padding: 10px;
}
.profile-wrap {
    display: flex;
} 
.category h2{
 
    text-align: center;
    
}
img {
    max-width: 100%;
    
}
.img-wrap {
    text-align: center;
}
.item {
    text-align: center;
}

/* profile  ---------------*/
 #about {
        margin-top: 50px;
        padding-top: 100px;
    }
#about h1 {
    margin-bottom: 30px;
}
.profile-wrap  {
        width: 1000px;
        margin: auto;
        
    
}
.profile-wrap img {
        width: 500px;
}

.history {
    width: 410px;
    margin: auto;
}
.profile-img {
    padding: 50px;
}


/* works--------*/
#works {
    margin-top: 50px;
    padding-top: 100px;
}
#works h1 {
    margin-bottom: 30px;
}
.works-wrap {

    width: 60%;
    margin: auto;
    display: grid;
    row-gap: 30px;
    grid-template-columns: 1fr 1fr ;
    
}
/* hoverしたら薄くなる-------------*/
.works-wrap a:hover {
    opacity: 0.7;
}

/* 詳細ページ　hoverしたら色が変わる----*/
.becorated-btn:hover {
    background-color: gold;
}


.form-wrap {
    padding-top: 130px;
    margin: auto;
    width: 50%;

}
 textarea {
    width: 650px;
    height: 500px;
    border: 1px solid black;
    margin: auto;
}
.file-up {
    margin-bottom: 10px;
}
.category input {
    width: 30px;
}
.submit {
    text-align: center;
}

.btn {
    display: inline-block;
    border-radius: 3px;
    font-size: 18px;
    background: #67c5ff;
    border: 2px solid #67c5ff;
    padding: 5px 10px;
    color: rgb(255, 255, 255);
    cursor: pointer;
  }
.category-bt{
    border : 1px solid black;
    width: 100px;
}
.form-wrap {
    width: 1000px;
    margin: auto;
}
.submit {
    margin-bottom: 50px;
}
.img-wrap img {
    object-fit: contains;
}

/* contact -------------*/
.contact-wrap{
    padding-top: 150px;
    width: 350px;
    margin: auto;
    
}
.contact-wrap textarea {
    width: 350px;
}

.item {
    width: 350px;
    text-align: left;
}

.item input {
    width: 200px;
    border: #000000 solid 1px;

}

.button {
    width: 50px;
    border: #000000 solid 1px;
}


h1 {
    text-align: center;
}

/* WEBサイト --------------*/
.website {
    width: 1000px;
    margin: auto;
    
}
.site {
    width: 360px;
    margin-bottom: 50px;
    margin: auto;
}
.site img {
    width: 360px;
}
.site-wrap {
    width: 360px;
    margin: auto;
}
.login {
    width: 200px;
    margin: auto;
}

/*---------

モバイル版
-----------*/

@media(max-width:900px){
    .works-wrap{
        
        text-align: center;
    }
    .category-wrap{
        display: block;
        text-align: center;
    }
    .wrap {
        width: 100%;
        margin: auto;
    }
    .mainvisual {
        width: 100%;
        margin: auto;
        margin-top: 100px;
    }
    .detail-wrap{
        width: 100%;
        margin: auto;
        
    }
    .description{
        width: 100%;
        
        
    }
    .home-nav {
        display: block;
        background-color: white;
        opacity: 0.5;
    }
    .works-header {
        position: absolute;
    }
    .works-nav {
        width: 140px;
        height: 170px;
        display: block;
        position: relative;
        top: 10px;
        float: right;
        padding: 10px;
        border-radius: 10px;
        background-color: #67c5ff;
        opacity: 0.5;
        
    }
    .category {
        width: 200px;
        margin: auto;
    }
    .box{
        margin-top: 180px;
    }
    
    
    .works-wrap {
        display: block;
    }
    .profile-wrap {
        display: block;
        width: 350px;
        margin: auto;
    }
    .history {
        width: 350px;
    }
    
    
    
    
    
}