/* 共通設定 */
body {
   margin: auto;
   text-decoration: none;
}
img {
   max-width: 100%;
}
h2 {
   font-size: 3rem;
   margin: 10% auto;
   text-align: center;
}
h3 {
   font-size: 1.8rem;
   margin: auto;
}
hr {
   margin: 5% auto;
   width: 40%;
}
section {
   margin: 10% auto;
   max-width: 1600px;
}
.wrapper {
   margin: auto;
   text-align: center;
}
.container {
   height: 3rem;
   font-size: 2rem;
   display: flex;
   justify-content: space-around;
}
.gnav {
   width: 40%;
}
.gnav-list {
   display: flex;
   justify-content: space-around;
}
.gnav-item {
   margin: 0 2%;
}

/* top-mv */
.mv-container img {
   height: 100vh;
   width: 100%;
   object-fit: cover;
}
 
/* section_works */
.gallery {
   height: 100%;
   display: flex;
   flex-direction: column-reverse;
}
.gallery-image {
   width: min(100%, calc(38rem - 2rem));
   margin: auto;
   align-content: center;
   position: relative;
}
/* .gallery-image::after {
   display: block;
   content: '';
   width: calc(100% - 2rem);
   height: calc(50% - 2.5rem);
   z-index: 3;
   border: 3px solid var(--blue);
   position: absolute;
      top: 1rem;
      left: 1rem;
} */
.gallery-image p {
   margin: 2%;
   font-size: 2rem;
   text-align: center;
}

.gallery-image img {
   aspect-ratio: 3/4;
   object-fit: cover;
   width: 100%;
   height: 50%;
}
.gallery-thumbnails {
   display: grid;
   gap: 1rem;
   grid-template-columns: repeat(5, 1fr);
   list-style: none;
   margin: 1rem 0;
      
}
.gallery-thumbnails img {
   aspect-ratio: 3/4;
   object-fit: cover;
   cursor: pointer;
}


/* section_skill */
.skill-list {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   margin: auto 3%;
}
.skill-item {
   width: 80%;
}
.skill-item img {
   /* 仮の大きさ */
   width: 100px;
   height: 100px;
}
.skill-text {
   margin-bottom: 8%;
}

/* section-about */
.about-main {
   display: flex;
   justify-content: space-around;
}
.about-p {
   width: 40%;
   text-align: center;
   margin: auto;
}
.about-my {
   line-height: 4rem;
}
.about-my strong {
   margin-left: 3%;
   font-size: 1.5rem;
}
.about-img {
   width: 40%;
   text-align: center;
   margin: auto;
}




/* section_contact */
.contact-list {
   margin: 3% auto;
   display: flex;
   justify-content: space-around;
}

/* footer */
.footer-list {
   font-size: 2rem;
   height: 3rem;
   display: flex;
   justify-content: space-around;
   background-color: #000000;
   color: #ffffff;
}

/* 紹介ページ */
.works-page {
   width: 90%;
   margin: auto;
}
.works-page-img {
   margin-bottom: 5%;
}
.works-page-title {
   margin-top: 5%;
   margin-bottom: 2%;
}
.works-return {
   width: 20%;
   margin: 10% auto;
   text-align: center;
   font-size: 1.2rem;
   background: #000000;
   color: #ffffff;
   border-radius: 5px;
   padding: 18px 32px;
}
.works-return:hover {
   background: #ffffff;
   color: #000000;
}
@media(min-width: 800px) {
   .gallery {
      flex-direction: row;
   }
   .gallery-image {
      width: 50vw;
      margin: 0;
   }
   .gallery-content {
      width: 30vw;
   }
   .gallery-thumbnails {
      gap: 2vw;
      grid-template-columns: repeat(3, 1fr);
   }
   .gallery-thumbnails img:hover {
      box-shadow: 0 0 1rem rgba(0, 0, 0, .4);
      transition: .4s;
   }
}