@charset "utf-8";
/*****スクロール*0509*****/
html{
  scroll-behavior: smooth;
}
img{
  max-width: 100%;
  height:auto;
}
/* CSS Document */
h3 {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-size: 18px;
  font-style: normal;
  color: #0c1713;
}
p {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-size: 15px;
  font-style: normal;
  color: #0c1713;
}
li {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-size: 14px;
  font-style: normal;
  color: #0c1713;
}
.wrappar {
    max-width: 1920px;
    background-color: #fbfcf4;
}
header{
  position: fixed;
  z-index: 10;
  width: 100%;
      div {
        padding: 40px 0 0 60px; 
    }
    .nav01 {
        display: flex;
        justify-content: flex-end;

        gap: 20px;
        padding: 0 7%;
        a{
          position: relative;
          text-decoration: none;
          /* color: #1075ff; */
          transition: 0.3s;
        }
        /* a:hover{
          color: #0055df;
        } */
        a::before{
          content: "";
          position: absolute;
          left: 50%;
          bottom: -4px;
          width: 0;
          height: 4px;
          background: #8b9b95;
          transition: 0.3s;
        }
        a:hover::before{
          left: 0;
          width: 100%;
        }
        }
    }
.top {
  h1 {
    /* background-image: url(../img/portfolio.png); */
    /* background-repeat: no-repeat; */
    display: flex;
    justify-content: center;
    padding-top: 380px;
    /* background-attachment: fixed; */
  }
  p {
    display: flex;
    justify-content: center;
    margin: 90px 0 0 280px;
  }
}

/* ワークス */
.works {
  background-image: url(../img/bakc_4.png);
  background-repeat: no-repeat;
  /* background-attachment: fixed; */
    h2 {
      display: flex;
      justify-content: center;
      margin: 280px 0 110px 0;
    }
}
.workbox01 {
  display: flex;
  justify-content: center;
  gap: 50px;
}
.work01 {
  padding: 10px ;
  h3 {
    margin: 18px;
  }
  p {
    margin: 0 0 10px 10px;
  }
  li{
    margin: 0 0 5px 10px;
  }
}

.image_link{
  display:block; 
  position:relative;
  text-decoration:none;
 }
 .image_link img{
   display:block;
   width:100%;
   transition:0.3s;
 }
 .image_link:before{
   content:"View more";
   display:block;
   color:#fff;
   line-height:48px;
   width:180px;
   border:solid 4px #8b9b95;
   border-radius:5px;
   text-align:center;
   position:absolute;
   top:50%;
   left:50%;
   margin-top:-1em;
   margin-left:-90px;
   opacity:0;
   z-index:3;
   transition:0.3s;
   font-weight:bold;
   letter-spacing:0.2em;
 }
 .image_link:hover img{
   filter:blur(3px);
 }
 .image_link:hover:before{
   opacity:1;
   margin-top:-0.5em;
 }
 
.workbox02 {
  background-image: url(../img/bakc_5.png);
  background-repeat: no-repeat;
  background-position: right;
  /* background-attachment: fixed; */
  display: flex;
  justify-content: center;
  gap: 50px;
  margin-top: 100px;
  /* padding: 30ox 0 100px 0;  */
}
.workbox03 {
  display: flex;
  justify-content: center;
  margin-bottom: 30px;
  margin-top: 100px;
  /* gap: 50px; */
}

/* アバウト */
.about {
  background-image: url(../img/bakc_4.png);
  background-repeat: no-repeat;
  h2 {
    display: flex;
    justify-content: center;
    margin: 250px 0 10px 0;
  }
}
.aboutbox {
  display: flex;
  justify-content: center;
  padding: 130px 0;
}
.abobox {
  margin: 0 3%;
}
.aboutbox01 {
  padding: 0 5px 50px 50px;
  h3 {
    margin-bottom: 30px;
  }
  p {
    line-height: 170%;
  }
  img {
    margin-top: 35px;
  }
}
footer {
  background-color: #8b9b95;
  width: 100%;
  height: 150px;
    p {
      display: flex;
      justify-content: center;
      padding-top: 20px;
    }
}
.nav02 {
  display: flex;
  gap: 50px;
  padding: 40px 0 0 100px;
}

.nav03 img {  
	position: absolute;
	/* top: 50%;
	left: 50%; */
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	/* width: 100%; */
	/* display: block; */
	-webkit-transition: .4s ease-in-out;
	transition: .4s ease-in-out;
}
.nav03:hover img:nth-of-type(2) {
	opacity: 0;
}


/******* スマホ *******/
@media only screen and (max-width:700px) {

  /* ヘッダー */
  header div {
    padding: 20px 0 0 25px;
  }
  /* トップ */
  .top {
    h1 {
      padding-top: 300px;
    }
    p {
      margin: 50px 0 0 140px;
    }
  }
  /* ワークス */
  .works {
    padding-top: 80px;
    h2 {
      margin: 200px 0 50px 0;
    }
  }
  .workbox03 {
    display: flex;
    flex-direction: column;
    margin-top: 50px;
  }
  .workbox01 {
    display: flex;
    flex-direction: column;
  }
  .workbox02 {
    display: flex;
    flex-direction: column;
    margin-top: 50px;
    /* padding: 5% 0 33% 0;  */
  }
  .extenal-link:after {
    padding: 0 0.3rem;
    display: inline-block;
    /* width: 3rem; */
    content:url('../img/linkmark_07.png');

  }

/* アバウト */
.aboutbox {
  display: flex;
  flex-direction: column;
  padding-top: 70px;
  margin-bottom: 70px;
}
.abobox {
  margin: 0 auto;
}
.aboutbox01 {
  margin: 25px auto;
}
/* フッター */
footer {
  p {
    padding-top: 40px;
  }
}
  .nav02 { 
    padding: 35px 0 0 55px;
  } 
}