@charset "utf-8";

 :root {
    --primary-lightbrown: #9D9684;
    --primary-brown: #4A3D3D;
    --primary-beige: #EDEBE6;
    --contentPadding: 0 2.7%;
    --fontFamilyEN: 'Crimson Text';
    --fontFamilyJP: 'Shippori Mincho';
    --background: 237 235 230;
}


/* ===============================
about
PC FIRST
=============================== */

html,
body {
  width: 100vw;
  height: 100vh;
}

.article {
  width: auto;
}

/* ===============================
Main Visual
=============================== */

.article__header {
    position: relative;
    margin: 0;
    padding: 0;
    width: 100%;
    display: flex;
    justify-content: center;
}

.article__header > .mainImg_PC {
  display: block;    
  height: auto;
}

.article__header > img:nth-of-type(3) {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10vw;
  height: auto;
}

/* ===============================
Navigation
=============================== */

.nav__galleryList {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  width: 800px;
  margin: 0 auto;
  text-align: center;
}

.nav__galleryItem {
  font-family: var(--fontFamilyEN);
  font-size: 1.4rem;
  letter-spacing: 0.3rem;
  margin: 35px 0;
  transition: 0.4s;
}

.nav__galleryItem:hover {
  opacity: 0.5;
  cursor: pointer;
}

/* ===============================
Fade In
=============================== */

.fade-in-image {
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.fade-in-image.first {
  opacity: 1;
}

.fade-in-image.visible {
  opacity: 1;
}

/* ===============================
Gallery
=============================== */

.section--Gallery {
  padding: 74px 2.7% 0;
  background-color: var(--primary-lightGray);
  margin-top: 0;
}

.Gallery__contents {
  margin: 0 auto;
}

.Gallery__list {
  display: grid;
  grid-template-columns: repeat(3, auto);
  place-content: center;
  gap: 80px 2%;
}

.Gallery__list a {
  margin: 0 auto;
}

.Gallery__item {
  display: block;
  width: 330px;
  height: auto;
  transition: filter 0.3s ease-in-out;
}

.Gallery__item:hover {
  filter: brightness(1.2);
  cursor: pointer;
}

.Gallery__item img {
  width: 100%;
  object-fit: cover;
  object-position: center;
}

.Gallery__itemTopic {
  font-size: 1.6rem;
  font-family: var(--fontFamilyJP);
  letter-spacing: 0.5rem;
  margin: 22px 0 12px;
}

time {
  font-family: var(--fontFamilyEN);
  font-size: 1.2rem;
  letter-spacing: 0.3rem;
}

/* ==========================================
Tablet
========================================== */

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

  .nav__galleryList {
    width: 624px;
  }

  .nav__galleryItem {
    font-size: 1.2rem;
  }

  .section--Gallery {
    padding: 60px 2.7% 0;
  }

  .Gallery__list {
    grid-template-columns: repeat(2, auto);
    gap: 0 6%;
  }

  .Gallery__item {
    width: 268px;
    height: auto;
    margin-bottom: 40px;
  }

  .Gallery__itemTopic {
    font-size: 1.4rem;
  }

}

/* ==========================================
SP
========================================== */

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

  .article {
    padding: 0 2.7%;
  }

  /* Main Visual */

  .article__header > .mainImg_PC {
    display: block;
    margin: 15vw 0 0;
    width: 15vw;
  }

  .article__header > img:nth-of-type(3) {
        position: absolute;
        /* transform: none; */
        width: 32vw;
        height: auto;
  }

  /* Navigation */

  .nav__galleryList {
    flex-wrap: wrap;
    width: 300px;
    gap: 8.3%;
  }

  .nav__galleryItem {
    width: 40%;
    margin-top: 24px;
    margin-bottom: 0;
    font-size: 1.2rem;
  }

  /* Gallery */

  .section--Gallery {
    padding: 60px 2.7% 0;
  }

  .Gallery__list {
    display: block;
  }

  .Gallery__item {
    width: 95%;
    height: auto;
    margin: 0 auto 40px;
  }

  .Gallery__itemTopic {
    font-size: 1.4rem;
  }

}