@charset "utf-8";

/* 『悲しみの関税』
   罫線・影・角丸は使わない。区切りは余白で作る。 */

:root {
  --paper: #F8F6F1;
  --ink: #22201C;
  --ink-faint: #8A857C;
  --sea: #6B7E8C;
  --dusk: #E9C9A8;
  --paper-night: #1B1C1E;
  --ink-night: #D8D2C4;

  --bg: var(--paper);
  --fg: var(--ink);
  --faint: var(--ink-faint);
  --link: var(--sea);

  --fs: 1.08rem;
  --bar: 3.1rem;
  --mincho: "Shippori Mincho", "游明朝", YuMincho, "Hiragino Mincho ProN",
            "ヒラギノ明朝 ProN", serif;
}

html.night {
  --bg: var(--paper-night);
  --fg: var(--ink-night);
  --faint: #7C776E;
  --link: #93A5B2;
}

html.fs-s { --fs: 0.94rem; }
html.fs-m { --fs: 1.08rem; }
html.fs-l { --fs: 1.32rem; }

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
}

body {
  font-family: var(--mincho);
  font-weight: 400;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--link);
  text-decoration: none;
  border: 0;
}
a:hover { color: var(--fg); }

img { max-width: 100%; height: auto; display: block; }

::selection { background: rgba(107, 126, 140, .18); }

/* ---------------------------------------------------------------- 表紙 */

.page-cover {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 6vh 6vw 8vh;
  position: relative;
  overflow-x: hidden;
}

.page-cover main {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cover {
  width: min(288px, 54vw);
  height: auto;
}

.opening {
  margin: 2.6rem 0 0;
  font-size: clamp(1.02rem, 3.4vw, 1.24rem);
  line-height: 2.1;
  letter-spacing: .04em;
}

.enter {
  margin: 2.4rem 0 0;
  font-size: 1.08rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-indent: .22em;
}

.toc-link {
  margin: 1.5rem 0 0;
  font-size: .8rem;
  letter-spacing: .18em;
  text-indent: .18em;
}
.toc-link a { color: var(--faint); }

/* 夕凪のにじみ */
.bleed {
  position: fixed;
  inset: auto 0 0 0;
  height: 30vh;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(125% 105% at 32% 104%, rgba(107, 126, 140, .34), rgba(107, 126, 140, 0) 68%),
    radial-gradient(88% 78% at 76% 100%, rgba(233, 201, 168, .46), rgba(233, 201, 168, 0) 64%);
  filter: blur(14px);
}
html.night .bleed { opacity: .38; }

.site-footer {
  position: relative;
  z-index: 1;
  margin-top: 3rem;
  font-size: .74rem;
  letter-spacing: .16em;
  color: var(--faint);
}

/* ---------------------------------------------------------------- 目次 */

.page-toc {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12vh 6vw 10vh;
}

.page-toc main { width: 100%; max-width: 30rem; }

.toc-heading {
  margin: 0 0 4rem;
  font-size: .9rem;
  font-weight: 400;
  letter-spacing: .5em;
  text-indent: .5em;
  color: var(--faint);
  text-align: center;
}

.part {
  margin: 3.4rem 0 1.5rem;
  font-size: .78rem;
  font-weight: 400;
  letter-spacing: .3em;
  text-indent: .3em;
  color: var(--faint);
}
.part:first-of-type { margin-top: 0; }

.chapters { margin: 0; padding: 0; list-style: none; }
.chapters li { margin: 0; }
.chapters a {
  display: grid;
  grid-template-columns: 5.4em 1fr;
  gap: .7em;
  padding: .58rem 0;
  font-size: .95rem;
  letter-spacing: .06em;
  color: var(--fg);
}
.chapters .no { color: var(--faint); }
.chapters a:hover,
.chapters a:hover .no { color: var(--link); }

.toc-back {
  margin: 5rem 0 0;
  text-align: center;
  font-size: .78rem;
  letter-spacing: .18em;
  text-indent: .18em;
}
.toc-back a { color: var(--faint); }

/* ---------------------------------------------------------------- 読む */

.page-read {
  height: 100svh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.tools {
  flex: none;
  height: var(--bar);
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 1.15rem;
  padding: 0 max(1.1rem, env(safe-area-inset-right)) 0 1.1rem;
}

.tools button {
  appearance: none;
  background: none;
  border: 0;
  padding: .35rem .1rem;
  margin: 0;
  font-family: inherit;
  font-size: .82rem;
  letter-spacing: .08em;
  color: var(--faint);
  cursor: pointer;
  line-height: 1;
}
.tools button:hover { color: var(--fg); }

#scroller {
  flex: none;
  margin: auto 0;
  outline: none;
}
#scroller:focus-visible { outline: none; }

.honbun {
  font-size: var(--fs);
  line-height: 2.05;
  letter-spacing: .02em;
}

.honbun p { margin: 0; }

/* 縦書き(既定) */
html.dir-v #scroller {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  height: min(42em, calc(100svh - var(--bar) - 2.2rem));
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
html.dir-v .honbun {
  height: 100%;
  padding-block: 8vw 14vw;
  padding-inline: .9em;
}

/* 横書き */
html.dir-h #scroller {
  height: calc(100svh - var(--bar));
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  width: 100%;
}
html.dir-h .honbun {
  max-width: 34em;
  margin: 0 auto;
  padding: 2.5rem 1.4rem 8rem;
}

/* 見出し */
.work-title,
.part-label {
  margin: 0 0 3.5em;
  font-size: .78em;
  font-weight: 400;
  letter-spacing: .34em;
  text-indent: .34em;
  color: var(--faint);
}

.chapter-title {
  margin: 0 0 2.8em;
  font-size: 1.24em;
  font-weight: 500;
  letter-spacing: .16em;
  text-indent: .16em;
}

/* 題辞 */
.daiji {
  margin: 0 0 3.6em;
  padding: 0;
  font-size: .9em;
  line-height: 1.95;
  color: var(--faint);
}
.daiji p { margin: 0 0 1em; }
.daiji strong { font-weight: 500; color: var(--fg); }

/* 章頭の事務の一行 */
.jimu {
  margin: 0 0 3em;
  font-size: .87em;
  line-height: 1.8;
  letter-spacing: .01em;
  color: var(--faint);
}

/* 書式ブロック(約款・判決文・伝票など) */
.shoshiki {
  margin: 1.9em 0;
  font-size: .9em;
  line-height: 1.78;
  letter-spacing: .04em;
}

/* 資料幕間 */
.shiryo-sep { height: 0; margin-block: 6.5em; }
html.dir-h .shiryo-sep { margin: 6rem 0; }

.shiryo {
  font-size: .92em;
  line-height: 1.9;
  letter-spacing: .03em;
}
.shiryo p { margin: 0 0 1.4em; }
.shiryo .shoshiki p { margin: 0; }
.shiryo strong { font-weight: 500; }

.shiryo-title {
  margin: 0 0 2em;
  font-size: .92em;
  font-weight: 400;
  letter-spacing: .12em;
  color: var(--faint);
}

/* ルビ・縦中横 */
ruby { ruby-align: center; }
rt {
  font-size: .5em;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--faint);
}
.tcy {
  text-combine-upright: all;
  -webkit-text-combine: horizontal;
}

/* 章末 */
.chapter-end {
  margin-block-start: 7em;
  font-size: .9em;
}
html.dir-h .chapter-end { margin: 6rem 0 0; }
.chapter-end p { margin: 0 0 2.4em; }
.chapter-end p:last-child { margin-bottom: 0; }

.nokori {
  color: var(--faint);
  letter-spacing: .1em;
}
.next { letter-spacing: .2em; text-indent: .2em; }
.sub { font-size: .84em; letter-spacing: .12em; }
.sub a { color: var(--faint); }
.sub a:hover { color: var(--link); }

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}