@charset "UTF-8" ;

.container {
    width: 100%;
    background-color: #fffaf3;
}
.nav {
    width: 100%;
    height: 110px;
    position: fixed;
    top: 0;
    z-index: 999;
    background-color: #ffffff;
    box-shadow: 3px 3px 6px -2px #555,
    3px 3px 8px rgba(255,255,255,0.8) inset;

}
.navi {
    width: 80%;
    margin: 0 auto;
    padding-top: 20px;
    /* background-color: aquamarine; */
}
.navi ul {
    display: flex;
    justify-content: space-around;
    align-items: center;
    list-style: none;
    text-align: center;
}
.navi a {
    color: grey;
    text-decoration: none;
}
.logo {
    width: 10%;
}
.logo img {
    width: 100%;
}



/* --------------------------------------------------------------------------------
Tabのレイアウト
-------------------------------------------------------------------------------- */
/*tabの形状*/
.tab{
	display: flex;
	flex-wrap: wrap;
}
.tab li a{
	display: block;
	background:#ddd;
	margin:0 2px;
	padding:10px 20px;
}
/*liにactiveクラスがついた時の形状*/
.tab li.active a{
	/* background:#fff; */
    background-color: #fffaf3;
}


/*エリアの表示非表示と形状*/
.area {
	display: none;/*はじめは非表示*/
	opacity: 0;/*透過0*/
	/* background: #fff; */
    background-color: #fffaf3;
	padding:50px 20px;
}

/*areaにis-activeというクラスがついた時の形状*/
.area.is-active {
    display: block;/*表示*/
    animation-name: displayAnime;/*ふわっと表示させるためのアニメーション*/
    animation-duration: 2s;
    animation-fill-mode: forwards;
}

@keyframes displayAnime{
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}



/*========= レイアウトのためのCSS ===============*/

ul{
	list-style:none;
}

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

.wrapper{
	width:100%;
	max-width: 960px;
	margin:0 auto;
    padding-top: 170px;
    /* background:#fefefe; */
    background-color: #fffaf3;
}

.works {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.work {
    width: calc(33.333% - 20px);
}
.work img {
    width: 100%;
    height: auto;
    display: block;
}

/* ホバー */
.image_link{
    position:relative;
    display:block;
    height:auto;
  }
  .image_link img{
    display:block;
    width:100%;
  }
  .image_link:before{
    content:"";
    display:block;
    width:100%;
    height:100%;
    position:absolute;
    z-index:2;
    background:#000;/*好みの色に変えてください。*/
    opacity:0;
    transition:0.3s;
  }
  .image_link:hover:before{
    opacity:0.2;
  }