/* エッセイのページ（site/essay.html）。読むためのページなので、明朝の本文を、ゆったりした行間と短めの行長で組む。
   色と書体は3Dビューアー（style.css）に合わせる。外部のフォントは読み込まない。 */
:root{
  --paper:#f4f2ea;--ink:#242e2b;--ink2:#4f5d55;--ink3:#6c7a71;--green3:#25443a;--line:rgba(36,46,43,.18);
  --font-mincho:"Yu Mincho","Hiragino Mincho ProN","Noto Serif JP",serif;
  --font-gothic:"Yu Gothic","Hiragino Sans","Noto Sans JP",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{background:var(--paper);-webkit-text-size-adjust:100%}
body{margin:0 auto;max-width:40em;padding:28px 22px 64px;color:var(--ink);font-family:var(--font-mincho);font-size:17px;line-height:2.05;font-feature-settings:"palt" 0}
nav{font-family:var(--font-gothic);font-size:14px;margin-bottom:56px}
nav.end{margin:72px 0 0;padding-top:24px;border-top:1px solid var(--line)}
a{color:var(--green3);text-underline-offset:4px}
a:focus-visible{outline:3px solid #e39f42;outline-offset:3px}
article>header{margin-bottom:64px}
h1 span{display:inline-block} /* 題名は読点の位置で折り返す */
h1{margin:0;font-size:clamp(26px,6vw,40px);font-weight:700;line-height:1.5;letter-spacing:.08em}
.subtitle{margin:10px 0 0;font-size:17px;letter-spacing:.12em;color:var(--ink2);text-indent:0}
.byline{margin:18px 0 0;font-size:15px;line-height:1.7;color:var(--ink2)}
h2{margin:72px 0 22px;font-size:21px;font-weight:700;letter-spacing:.1em;line-height:1.6}
h2::before{content:"";display:block;width:2.2em;border-top:2px solid var(--green3);margin-bottom:16px;opacity:.7} /* 章の切れ目 */
p{margin:0;text-indent:1em;text-align:justify;line-break:strict;overflow-wrap:anywhere}
p+p{margin-top:.9em}
.dated{margin-top:2.4em;text-indent:0;text-align:right;color:var(--ink2);font-size:15px}
footer a{color:inherit;text-underline-offset:3px}
footer{margin-top:28px;line-height:1.9;font-family:var(--font-gothic);font-size:13px;color:var(--ink3)}
@media(max-width:600px){
  body{padding:20px 18px 48px;font-size:16px;line-height:1.95}
  nav{margin-bottom:40px}
  article>header{margin-bottom:44px}
  h2{margin-top:56px;font-size:19px}
}

/* 読み終えた人への案内 */
#after{margin-top:72px}
.seeModel{display:block;position:relative;border-radius:6px;overflow:hidden;box-shadow:0 8px 28px rgba(0,0,0,.22);text-decoration:none}
.seeModel img{display:block;width:100%;height:auto}
.seeModel span{position:absolute;left:0;right:0;bottom:0;padding:34px 20px 16px;font-size:20px;font-weight:700;letter-spacing:.12em;color:#f6f0e2;background:linear-gradient(transparent,rgba(20,18,30,.82));text-align:center}
.seeModel:hover span{text-decoration:underline;text-underline-offset:6px}
.shareLine{margin-top:26px;text-indent:0;text-align:center;font-family:var(--font-gothic);font-size:15px;color:var(--ink2)}
#copyLink{font:inherit;color:var(--green3);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:4px}
#copyLink:focus-visible{outline:3px solid #e39f42;outline-offset:3px}
nav.end{margin-top:40px}