body { background: #f5f0e7; color: #302d29; font-family: "Yu Mincho", "游明朝", serif; }
.sec_title { .wrap { width: 100%; max-width: 1080px; min-height: 1920px; display: grid; align-items: center; } img { width: 100%; aspect-ratio: 9 / 16; display: block; object-fit: contain; } &[hidden] { display: none; } }
.sec_reader {
  &[hidden] { display: none; }
  .wrap { padding: 80px 90px 82px; width: 100%; max-width: 1080px; min-height: 1920px; display: flex; flex-direction: column; }
  header { padding-bottom: 34px; display: flex; justify-content: space-between; color: #746b61; font-size: 30px; line-height: 1.5em; letter-spacing: 0.08em; border-bottom: 1px solid #c7bbac; }
  .main { padding-top: 54px; flex: 1; }
  h2 { margin-bottom: 70px; font-size: 46px; font-weight: 400; line-height: 1.55em; letter-spacing: 0.02em; }
  figure { margin: 0 0 42px; width: 100%; img { width: 100%; max-height: 520px; display: block; object-fit: contain; } &[hidden] { display: none; } }
  article { font-size: 54px; font-weight: 400; line-height: 1.7em; letter-spacing: 0.01em; line-break: strict; overflow-wrap: break-word; p { margin-bottom: 30px; text-indent: 1em; } }
  footer { padding-top: 38px; color: #746b61; font-size: 30px; line-height: 1.5em; text-align: center; }
}
.sec_reader.has-image {
  .main { padding-top: 38px; } h2 { margin-bottom: 34px; font-size: 36px; line-height: 1.6em; br { display: none; } } figure img { max-height: 410px; }
}
body.is-turning { .sec_reader > .wrap { animation: book-page 0.45s ease-out; @media (prefers-reduced-motion: reduce) { animation: none; } } }
@keyframes book-page { from { opacity: 0.35; transform: translateX(18px); } to { opacity: 1; transform: translateX(0); } }