@charset "UTF-8";
body {
  font-family: serif;
  color: #e8f0f8;
  min-height: 100vh;
  max-width: 21.5rem;
  margin: 0 auto;
  padding: 2rem 1rem;
  letter-spacing: 0.05em;
}
figure {
  margin: 0;
}

.work-category {
  letter-spacing: 0.1em;
  padding-bottom: 0.01rem;
}
.work-title {
  font-size: 1.7rem;
  margin-bottom: 1rem;
}

h2 {
  padding-bottom: 0.5rem;
}
.description {
  margin-bottom: 1rem;
}
@media (min-width: 768px) {
  body {
    max-width: 82rem;
    padding: 4rem 2rem;
  }
  .description {
    margin-bottom: 2rem;
  }
}
/* ==============================
  Desktop View
============================== */
.top {
  display: flex;
  flex-direction: column;
  padding-bottom: 3rem;
}

.desktop-view {
  padding-bottom: 1.5rem;
}
.desktop-view img {
  display: block;
}
.top-img {
  width:100%;
  max-width: 14rem;
  height: auto;
  margin: auto;
}
.work-meta {
  display: grid;
  gap: 2rem;
}

.work-meta dt {
  font-size: 1.2rem;
  font-weight: 600;
  color: #fff8dc;
  margin-bottom: 0.5rem;
}
.work-meta dd {
  max-width: 28rem;
  margin: 0;
}
.work-meta ul {
  padding-left: 0.5rem;
}
.work-meta li {
    padding-bottom: 0.5rem;
}

@media (min-width: 768px) {
  .work-category {
    padding-bottom: 0.5rem;
  }
  .work-title {
    font-size: 2rem;
    margin-bottom: 2rem;
  }
  .top {
    flex-direction: row;
  }
  .desktop-view {
    width: 55%;
  }
  .top-img {
    width: 90%;
    max-width: 80rem;
    margin: 0;
  }
  .top-text {
    width: 45%;
    padding-left: 2rem;
  }
  .top-text h2 {
    margin-bottom:2rem;
  }
  .work-meta {
    gap: 3rem;
  }
  .work-meta dt {
    margin-bottom: 1rem;
  }
  .work-meta dd {
    max-width: 31rem;
  } 
}

/* ================================
  Key Section
================================ */
.key, .difference {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(1,1fr);
}

figure img {
  width:100%;
  display:block;
  border-radius: 1rem;
}

figcaption{
  padding:1.2rem 1.4rem;
  font-size:0.9rem;
  line-height:1.7;
}

figcaption::before{
  content:"Point";
  display:block;
  font-size:0.75rem;
  letter-spacing:0.05em;
  opacity:.6;
  margin-bottom:0.4rem;
}

@media (min-width: 768px) {
  .key-section {
    padding-bottom: 3rem;
  }
  .key {
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem;
  }
  .difference {
    grid-template-columns: repeat(2,1fr);
    gap: 3rem;
  }
  .difference img {
    height: 20rem;
  }
}

/* ================================
  Mobile Design
================================ */
.mobile {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(1, 1fr);
}

.mobile img {
  width: 50%;
  margin: auto;
}

@media (min-width: 768px) {
  .mobile {
    grid-template-columns: repeat(2, 1fr);
  }
  .mobile img {
    max-height: 30rem;
    width: auto;
  }
  .mobile figcaption {
    max-width: 32rem;
    margin: auto;
  }
}

/* ===============================
  個別CSS
=============================== */
@media (min-width: 768px) {
  .newt img {
    max-height: 30rem;
    width: auto;
    margin-left: 1rem;
  }
}