body > main {
  padding: calc(64 / 750 * 100vw) 0 calc(155 / 750 * 100vw);
  background: hsl(0, 0%, 100%);
}
body > main > hgroup {
  width: fit-content;
  margin: 0 auto;
}
body > main > hgroup > h2 {
  width: fit-content;
  margin: 0 auto;
  font-family: "Cormorant Garamond", serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 400;
  font-size: calc(60 / 750 * 100vw);
  line-height: 1;
  letter-spacing: calc(25em / 1000);
  color: hsl(0, 1%, 45%);
}
body > main > hgroup > p {
  width: fit-content;
  margin: calc(17 / 750 * 100vw) auto 0;
  font-weight: 400;
  font-size: calc(24 / 750 * 100vw);
  line-height: 1;
  letter-spacing: calc(150em / 1000);
  color: hsl(0, 1%, 45%);
}
body > main > div {
  display: grid;
  grid-template: auto auto/auto;
  width: 100%;
  position: relative;
  margin: calc(56 / 750 * 100vw) 0 0;
}
body > main > div #posts {
  grid-row: 1/2;
  grid-column: 1/2;
}
body > main > div #posts::after {
  content: "";
  display: block;
  width: calc(620 / 750 * 100vw);
  height: max(2 / 750 * 100vw, 1px);
  margin: calc(57 / 750 * 100vw) auto 0;
  background: hsl(300, 1%, 44%);
}
body > main > div #posts > hgroup {
  width: fit-content;
  margin: 0 auto;
}
body > main > div #posts > hgroup > h2 {
  width: fit-content;
  max-width: calc(620 / 750 * 100vw);
  margin: 0 auto;
  font-weight: 400;
  font-size: calc(32 / 750 * 100vw);
  line-height: calc(52 / 750 * 100vw);
  letter-spacing: calc(100em / 1000);
  text-align: center;
  color: hsl(0, 1%, 45%);
}
body > main > div #posts > hgroup > p {
  width: fit-content;
  margin: calc(11 / 750 * 100vw) auto 0;
  font-weight: 400;
  font-size: calc(20 / 750 * 100vw);
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  color: hsl(0, 0%, 0%);
}
body > main > div #posts > img.cover {
  display: block;
  width: 100%;
  height: auto;
  margin: calc(48 / 750 * 100vw) 0 0;
}
body > main > div #posts > img.cover + p {
  margin-top: calc(58 / 750 * 100vw);
}
body > main > div #posts > p {
  width: calc(620 / 750 * 100vw);
  margin: calc(46 / 750 * 100vw) auto 0;
  font-weight: 400;
  font-size: calc(24 / 750 * 100vw);
  line-height: calc(46 / 750 * 100vw);
  letter-spacing: calc(100em / 1000);
  color: hsl(0, 0%, 0%);
}
body > main > div #posts > a {
  display: block;
  width: fit-content;
  position: relative;
  margin: calc(131 / 750 * 100vw) auto 0;
  padding: 0 0 0.1em calc(28 / 750 * 100vw);
  font-weight: 400;
  font-size: calc(24 / 750 * 100vw);
  line-height: 1;
  letter-spacing: calc(150em / 1000);
  text-decoration: none;
  color: hsl(0, 0%, 0%);
}
body > main > div #posts > a::before {
  content: "";
  display: block;
  width: calc(16 / 750 * 100vw);
  height: calc(16 / 750 * 100vw);
  position: absolute;
  inset: calc(50% - 8 / 750 * 100vw) auto auto 0;
  background: url(../image/posts/post_01.svg) center/contain no-repeat;
}
body > main > div #lists {
  grid-row: 2/3;
  grid-column: 1/2;
  box-sizing: border-box;
  margin: calc(100 / 750 * 100vw) auto 0;
}
body > main > div #lists > ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: calc(30 / 750 * 100vw) calc(20 / 750 * 100vw);
  width: calc(700 / 750 * 100vw);
  margin: 0 auto;
  padding: 0;
}
body > main > div #lists > ul > li > a {
  display: grid;
  grid-template: auto auto 1fr/auto;
  width: calc(340 / 750 * 100vw);
  height: 100%;
  box-sizing: border-box;
  padding: 0 0 calc(19 / 750 * 100vw);
  text-decoration: none;
  border-bottom: calc(1 / 750 * 100vw) solid hsl(300, 1%, 44%);
}
body > main > div #lists > ul > li > a > div {
  grid-row: 1/2;
  grid-column: 1/2;
  width: calc(340 / 750 * 100vw);
  height: calc(340 / 750 * 100vw);
  overflow: hidden;
}
body > main > div #lists > ul > li > a > div > img {
  display: block;
  width: calc(340 / 750 * 100vw);
  height: calc(340 / 750 * 100vw);
  object-fit: cover;
}
body > main > div #lists > ul > li > a > h6 {
  grid-row: 2/3;
  grid-column: 1/2;
  margin: calc(11 / 750 * 100vw) 0 0;
  font-weight: 500;
  font-size: calc(24 / 750 * 100vw);
  line-height: calc(36 / 750 * 100vw);
  letter-spacing: calc(50em / 1000);
  color: hsl(0, 0%, 0%);
}
body > main > div #lists > ul > li > a > p {
  grid-row: 3/4;
  grid-column: 1/2;
  align-self: end;
  margin: calc(16 / 750 * 100vw) 0 0;
  font-weight: 400;
  font-size: calc(16 / 750 * 100vw);
  line-height: 1;
  letter-spacing: calc(25em / 1000);
  color: hsl(0, 0%, 0%);
}
body > main > div #lists > a {
  display: block;
  width: fit-content;
  margin: calc(100 / 750 * 100vw) auto 0;
  padding: 0 0 calc(9 / 750 * 100vw);
  font-weight: 500;
  font-size: calc(24 / 750 * 100vw);
  line-height: 1;
  letter-spacing: calc(150em / 1000);
  text-decoration: none;
  color: hsl(0, 0%, 0%);
  border-bottom: calc(2 / 750 * 100vw) solid hsl(300, 1%, 44%);
}
body > main #index {
  margin: calc(69 / 750 * 100vw) 0 0;
}
body > main #index > ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: calc(30 / 750 * 100vw) calc(20 / 750 * 100vw);
  width: calc(700 / 750 * 100vw);
  margin: 0 auto;
  padding: 0;
}
body > main #index > ul > li > a {
  display: grid;
  grid-template: auto auto 1fr/auto;
  width: calc(340 / 750 * 100vw);
  height: 100%;
  box-sizing: border-box;
  padding: 0 0 calc(19 / 750 * 100vw);
  text-decoration: none;
  border-bottom: calc(1 / 750 * 100vw) solid hsl(300, 1%, 44%);
}
body > main #index > ul > li > a > div {
  grid-row: 1/2;
  grid-column: 1/2;
  width: calc(340 / 750 * 100vw);
  height: calc(340 / 750 * 100vw);
  overflow: hidden;
}
body > main #index > ul > li > a > div > img {
  display: block;
  width: calc(340 / 750 * 100vw);
  height: calc(340 / 750 * 100vw);
  object-fit: cover;
}
body > main #index > ul > li > a > h6 {
  grid-row: 2/3;
  grid-column: 1/2;
  margin: calc(22 / 750 * 100vw) 0 0;
  font-weight: 500;
  font-size: calc(24 / 750 * 100vw);
  line-height: calc(36 / 750 * 100vw);
  letter-spacing: calc(50em / 1000);
  color: hsl(0, 0%, 0%);
}
body > main #index > ul > li > a > p {
  grid-row: 3/4;
  grid-column: 1/2;
  align-self: end;
  margin: calc(31 / 750 * 100vw) 0 0;
  font-weight: 300;
  font-size: calc(18 / 750 * 100vw);
  line-height: 1;
  letter-spacing: calc(25em / 1000);
  color: hsl(0, 0%, 0%);
}
body > main #index > nav {
  list-style: none;
  width: fit-content;
  justify-content: center;
  margin: calc(94 / 750 * 100vw) auto 0;
  padding: 0;
}
body > main #index > nav > h2 {
  display: none;
}
body > main #index > nav .nav-links {
  display: flex;
  width: calc(630 / 750 * 100vw);
  box-sizing: border-box;
  position: relative;
  margin: 0 auto;
  padding: 0 calc(95 / 750 * 100vw);
  justify-content: space-between;
}
body > main #index > nav .nav-links a, body > main #index > nav .nav-links span {
  font-weight: 700;
  font-size: calc(40 / 750 * 100vw);
  line-height: 1;
  letter-spacing: 0;
  color: hsl(0, 1%, 45%);
  text-decoration: none;
}
body > main #index > nav .nav-links a.prev, body > main #index > nav .nav-links span.prev {
  display: inline-block;
  width: calc(40 / 750 * 100vw);
  height: calc(40 / 750 * 100vw);
  overflow: hidden;
  white-space: no-wrap;
  position: absolute;
  inset: 0 auto auto 0;
  text-indent: 100%;
  background: url(../image/posts/post_01.svg) center/contain no-repeat;
}
body > main #index > nav .nav-links a.next, body > main #index > nav .nav-links span.next {
  display: inline-block;
  width: calc(40 / 750 * 100vw);
  height: calc(40 / 750 * 100vw);
  overflow: hidden;
  white-space: no-wrap;
  position: absolute;
  inset: 0 0 auto auto;
  text-indent: 100%;
  background: url(../image/posts/post_01.svg) center/contain no-repeat;
  transform: scale(-1, 1);
}
@media print, screen and (min-width:769px) {
  body > main {
    padding: min(calc(68 / 1440 * 100vw), 68px) 0 min(calc(99 / 1440 * 100vw), 99px);
  }
  body > main > hgroup > h2 {
    font-size: min(calc(40 / 1440 * 100vw), 40px);
  }
  body > main > hgroup > p {
    margin: min(calc(20 / 1440 * 100vw), 20px) auto 0;
    font-weight: 500;
    font-size: min(calc(16 / 1440 * 100vw), 16px);
    letter-spacing: calc(100em / 1000);
  }
  body > main > div {
    grid-template: auto/auto auto;
    width: min(calc(1400 / 1440 * 100vw), 1400px);
    margin: min(calc(58 / 1440 * 100vw), 58px) auto 0;
  }
  body > main > div #posts {
    grid-row: 1/2;
    grid-column: 1/2;
    width: min(calc(910 / 1440 * 100vw), 910px);
  }
  body > main > div #posts::after {
    width: 100%;
    height: 1px;
    margin: min(calc(24 / 1440 * 100vw), 24px) auto 0;
  }
  body > main > div #posts > hgroup {
    margin: 0;
  }
  body > main > div #posts > hgroup > h2 {
    max-width: none;
    margin: 0;
    font-size: min(calc(24 / 1440 * 100vw), 24px);
    line-height: 1;
    text-align: left;
  }
  body > main > div #posts > hgroup > p {
    margin: min(calc(18 / 1440 * 100vw), 18px) 0 0;
    font-size: min(calc(14 / 1440 * 100vw), 14px);
    text-align: left;
  }
  body > main > div #posts > img.cover {
    width: min(calc(780 / 1440 * 100vw), 780px);
    margin: min(calc(49 / 1440 * 100vw), 49px) auto 0;
  }
  body > main > div #posts > img.cover + p {
    margin-top: min(calc(30 / 1440 * 100vw), 30px);
  }
  body > main > div #posts > p {
    width: min(calc(910 / 1440 * 100vw), 910px);
    margin: min(calc(32 / 1440 * 100vw), 32px) auto 0;
    font-size: min(calc(16 / 1440 * 100vw), 16px);
    line-height: min(calc(32 / 1440 * 100vw), 32px);
  }
  body > main > div #posts > a {
    margin: min(calc(71 / 1440 * 100vw), 71px) 0 0;
    padding: 0 0 0.1em min(calc(22 / 1440 * 100vw), 22px);
    font-size: min(calc(16 / 1440 * 100vw), 16px);
    letter-spacing: calc(100em / 1000);
  }
  body > main > div #posts > a::before {
    width: min(calc(12 / 1440 * 100vw), 12px);
    height: min(calc(12 / 1440 * 100vw), 12px);
    inset: calc(50% - min(calc(6 / 1440 * 100vw), 6px)) auto auto 0;
  }
  body > main > div #lists {
    grid-row: 1/2;
    grid-column: 2/3;
    width: min(calc(365 / 1440 * 100vw), 365px);
    height: 100%;
    overflow: hidden auto;
    position: absolute;
    inset: 0 0 auto auto;
    margin: 0;
  }
  body > main > div #lists > ul {
    gap: min(calc(58 / 1440 * 100vw), 58px);
    width: min(calc(320 / 1440 * 100vw), 320px);
  }
  body > main > div #lists > ul > li > a {
    width: 100%;
    height: auto;
    padding: 0;
    border-bottom: none;
  }
  body > main > div #lists > ul > li > a > div {
    width: min(calc(320 / 1440 * 100vw), 320px);
    height: min(calc(240 / 1440 * 100vw), 240px);
  }
  body > main > div #lists > ul > li > a > div > img {
    width: min(calc(320 / 1440 * 100vw), 320px);
    height: min(calc(240 / 1440 * 100vw), 240px);
    transform-origin: center;
    transition: transform 0.3s;
  }
  body > main > div #lists > ul > li > a > h6 {
    margin: min(calc(6 / 1440 * 100vw), 6px) 0 0;
    font-size: min(calc(14 / 1440 * 100vw), 14px);
    line-height: min(calc(24 / 1440 * 100vw), 24px);
    letter-spacing: calc(150em / 1000);
  }
  body > main > div #lists > ul > li > a > p {
    margin: min(calc(8 / 1440 * 100vw), 8px) 0 0;
    font-size: min(calc(12 / 1440 * 100vw), 12px);
    letter-spacing: 0;
  }
  body > main > div #lists > ul > li > a:hover > div > img {
    transform: scale(1.07);
  }
  body > main > div #lists > a {
    margin: min(calc(100 / 1440 * 100vw), 100px) auto 0;
    padding: 0 0 min(calc(9 / 1440 * 100vw), 9px);
    font-size: min(calc(14 / 1440 * 100vw), 14px);
    border-bottom: min(calc(2 / 1440 * 100vw), 2px) solid hsl(300, 1%, 44%);
  }
  body > main #index {
    width: min(calc(1740 / 1920 * 100vw), 1740px);
    margin: min(calc(60 / 1920 * 100vw), 60px) auto 0;
  }
  body > main #index > ul {
    gap: min(calc(100 / 1920 * 100vw), 100px) min(calc(20 / 1920 * 100vw), 20px);
    width: 100%;
  }
  body > main #index > ul > li > a {
    width: min(calc(420 / 1920 * 100vw), 420px);
    height: 100%;
    padding: 0 0 min(calc(19 / 1920 * 100vw), 19px);
    border-bottom: min(calc(1 / 1920 * 100vw), 1px) solid hsl(300, 1%, 44%);
  }
  body > main #index > ul > li > a > div {
    width: min(calc(420 / 1920 * 100vw), 420px);
    height: min(calc(420 / 1920 * 100vw), 420px);
  }
  body > main #index > ul > li > a > div > img {
    width: min(calc(420 / 1920 * 100vw), 420px);
    height: min(calc(420 / 1920 * 100vw), 420px);
    transform-origin: center;
    transition: transform 0.3s;
  }
  body > main #index > ul > li > a > h6 {
    margin: min(calc(13 / 1920 * 100vw), 13px) 0 0;
    font-size: min(calc(20 / 1920 * 100vw), 20px);
    line-height: min(calc(30 / 1920 * 100vw), 30px);
  }
  body > main #index > ul > li > a > p {
    margin: min(calc(23 / 1920 * 100vw), 23px) 0 0;
    font-size: min(calc(14 / 1920 * 100vw), 14px);
    letter-spacing: calc(50em / 1000);
  }
  body > main #index > ul > li > a:hover > div > img {
    transform: scale(1.07);
  }
  body > main #index > nav {
    margin: min(calc(98 / 1920 * 100vw), 98px) auto 0;
  }
  body > main #index > nav .nav-links {
    width: min(calc(280 / 1920 * 100vw), 280px);
    padding: 0 min(calc(50 / 1920 * 100vw), 50px);
  }
  body > main #index > nav .nav-links a, body > main #index > nav .nav-links span {
    font-size: min(calc(20 / 1920 * 100vw), 20px);
  }
  body > main #index > nav .nav-links a.prev, body > main #index > nav .nav-links span.prev {
    width: min(calc(20 / 1920 * 100vw), 20px);
    height: min(calc(20 / 1920 * 100vw), 20px);
  }
  body > main #index > nav .nav-links a.next, body > main #index > nav .nav-links span.next {
    width: min(calc(20 / 1920 * 100vw), 20px);
    height: min(calc(20 / 1920 * 100vw), 20px);
  }
}