/* ===== 電子小説本文（安定版） ===== */

@charset "utf-8";

/* ==================================================
   全体
================================================== */

html,
body {
  margin: 0;
  padding: 0;
  background: #ffffff;
  color: #111111;
}

body {
  font-family:
    "Hiragino Mincho ProN",
    "Yu Mincho",
    "游明朝",
    "Noto Serif JP",
    serif;
}


/* ==================================================
   桜の背景
================================================== */

.sakura {
  position: fixed;
  top: 0;
  left: 0;

  width: 100vw;
  height: 100vh;

  margin: 0;
  padding: 0;

  overflow: hidden;

  pointer-events: none;
  z-index: 0;
}

.sakura li {
  position: absolute;
  top: -60px;

  display: block;
  list-style: none;

  width: 16px;
  height: 10px;

  background: #ffdbed;

  /* 花びらっぽい形 */
  border-radius: 0 70% 0 70%;

  opacity: 0.85;

  /* 初期位置 */
  transform: translateX(0) rotate(0deg);

  /* 落下＋左右揺れ */
  animation:
    sakura-fall 10s linear infinite,
    sakura-sway 3s ease-in-out infinite alternate;
}


/* 落下 */

@keyframes sakura-fall {
  0% {
    top: -60px;
  }

  100% {
    top: 110vh;
  }
}


/* 左右の揺れ */

@keyframes sakura-sway {
  0% {
    margin-left: -30px;
    transform: rotate(0deg);
  }

  50% {
    margin-left: 80px;
    transform: rotate(90deg);
  }

  100% {
    margin-left: 160px;
    transform: rotate(180deg);
  }
}


/* ------------------------------
   花びらごとの位置・速度
------------------------------ */

.sakura li:nth-child(1) {
  left: 0%;
  width: 22px;
  height: 13px;
  animation-duration: 10s, 3s;
  animation-delay: 0s, 0s;
}

.sakura li:nth-child(2) {
  left: 7%;
  width: 13px;
  height: 9px;
  animation-duration: 15s, 2.5s;
  animation-delay: -6s, 0s;
}

.sakura li:nth-child(3) {
  left: 15%;
  width: 16px;
  height: 10px;
  animation-duration: 9s, 3.5s;
  animation-delay: -3s, 0s;
}

.sakura li:nth-child(4) {
  left: 25%;
  width: 14px;
  height: 9px;
  animation-duration: 12s, 4s;
  animation-delay: -8s, 0s;
}

.sakura li:nth-child(5) {
  left: 35%;
  width: 18px;
  height: 11px;
  animation-duration: 10s, 3s;
  animation-delay: -1s, 0s;
}

.sakura li:nth-child(6) {
  left: 45%;
  width: 22px;
  height: 13px;
  animation-duration: 13s, 3.5s;
  animation-delay: -10s, 0s;
}

.sakura li:nth-child(7) {
  left: 55%;
  width: 15px;
  height: 10px;
  animation-duration: 8s, 2.5s;
  animation-delay: -4s, 0s;
}

.sakura li:nth-child(8) {
  left: 63%;
  width: 13px;
  height: 9px;
  animation-duration: 11s, 3s;
  animation-delay: -7s, 0s;
}

.sakura li:nth-child(9) {
  left: 72%;
  width: 18px;
  height: 11px;
  animation-duration: 9s, 4s;
  animation-delay: -2s, 0s;
}

.sakura li:nth-child(10) {
  left: 80%;
  width: 22px;
  height: 13px;
  animation-duration: 12s, 3s;
  animation-delay: -9s, 0s;
}

.sakura li:nth-child(11) {
  left: 88%;
  width: 13px;
  height: 9px;
  animation-duration: 15s, 2.5s;
  animation-delay: -5s, 0s;
}

.sakura li:nth-child(12) {
  left: 94%;
  width: 16px;
  height: 10px;
  animation-duration: 10s, 3.5s;
  animation-delay: -12s, 0s;
}

.sakura li:nth-child(13) {
  left: 30%;
  width: 12px;
  height: 8px;
  animation-duration: 14s, 4s;
  animation-delay: -11s, 0s;
}

.sakura li:nth-child(14) {
  left: 67%;
  width: 20px;
  height: 12px;
  animation-duration: 11s, 3s;
  animation-delay: -6s, 0s;
}


/* ==================================================
   本文エリア
================================================== */

.novel {
  position: relative;
  z-index: 1;

  writing-mode: vertical-rl;
  text-orientation: mixed;

  overflow-x: auto;
  overflow-y: hidden;

  width: 90%;
  height: 70vh;
  max-height: 55vh;

  margin: 2em auto;
  padding: 2em 1.8em;

  background: #ffffff;
  border: none;

  box-sizing: border-box;

  font-family:
    "游明朝",
    "Yu Mincho",
    "Hiragino Mincho ProN",
    "MS Mincho",
    serif;

  font-size: 13px;
  line-height: 2.1;
  letter-spacing: 0.08em;

  color: #111111;

  scroll-behavior: smooth;
}


/* 段落 */

.novel p {
  margin: 0 0 2.2em;
}


/* ルビ */

.novel ruby {
  ruby-position: over;
}


/* ==================================================
   本文上部の目印
================================================== */

.novel-wrap {
  position: relative;
  z-index: 1;
}

.marker {
  position: sticky;
  top: 0;

  z-index: 10;

  writing-mode: horizontal-tb;
  text-align: center;

  font-family:
    "游明朝",
    "Yu Mincho",
    serif;

  font-size: 12px;
  font-weight: normal;

  letter-spacing: 0.2em;

  padding: 0.2em 0;
  margin-bottom: 0.1em;

  background: #ffffff;

  border: none !important;
}


/* キャラ別 */

.marker.ite::before {
  content: "- ✿ -";
}

.marker.rou::before {
  content: "- ✾ -";
}

.marker.rin::before {
  content: "- ꕤ -";
}

.marker.hon::before {
  content: "- ☂︎ -";
}

/* ==================================================
   縦書き教科書風本文
================================================== */

.textbook {
  position: relative;
  z-index: 1;

  writing-mode: vertical-rl;

  line-height: 1.9;
  letter-spacing: 0.08em;
}

.textbook-title {
  font-size: 22px;
  font-weight: normal;

  letter-spacing: 0.3em;

  margin-left: 3em;
  margin-bottom: 4em;
}

.textbook-author {
  display: block;

  font-size: 13px;
  letter-spacing: 0.15em;

  margin-top: 1.5em;
}

.textbook p {
  margin: 0 0 2em;
}


/* ==================================================
   表紙
================================================== */

.cover {
  position: relative;
  z-index: 1;

  width: 100%;
  max-width: 900px;
  height: 60vh;

  margin: 0 auto;

  background: #ffffff;

  overflow: hidden;
}


/* 表紙の背景文字 */

.text-bg {
  position: absolute;
  inset: 0;

  z-index: 1;

  font-family:
    "游明朝",
    "Yu Mincho",
    "Hiragino Mincho ProN",
    serif;

  font-size: 10px;
  line-height: 1.6;
  letter-spacing: 0.1em;

  color: #2a0000;
  opacity: 0.45;

  writing-mode: horizontal-tb;

  padding: 1.2em;

  user-select: none;
  pointer-events: none;
}


/* 表紙タイトル */

.title-label {
  position: absolute;

  top: 50%;
  left: 50%;

  transform: translate(-50%, -50%);

  z-index: 2;

  isolation: isolate;

  background: #000000;
  color: #ffffff;

  padding: 0.35em 1.4em;

  font-family:
    "游明朝",
    "Yu Mincho",
    "Hiragino Mincho ProN",
    serif;

  font-size: 1em;

  letter-spacing: 0.25em;

  white-space: nowrap;
}


/* ==================================================
   表紙限定
================================================== */

#COVERONLY .cover {
  position: relative;
  z-index: 1;

  width: 100%;
  max-width: 900px;
  height: 60vh;

  margin: 0 auto;

  background: #ffffff;

  overflow: hidden;
}

#COVERONLY .text-bg {
  position: absolute;
  inset: 0;

  z-index: 1;

  font-family:
    "游明朝",
    "Yu Mincho",
    "Hiragino Mincho ProN",
    serif;

  font-size: 12px;
  line-height: 2.2;
  letter-spacing: 0.15em;

  color: #2a0000;
  opacity: 0.45;

  writing-mode: horizontal-tb;

  padding: 2em;

  user-select: none;
  pointer-events: none;
}

#COVERONLY .title-label {
  position: absolute;

  top: 50%;
  left: 50%;

  transform: translate(-50%, -50%);

  z-index: 2;
  isolation: isolate;

  background: #000000;
  color: #ffffff;

  padding: 0.35em 1.4em;

  font-family:
    "游明朝",
    "Yu Mincho",
    "Hiragino Mincho ProN",
    serif;

  font-size: 1em;

  letter-spacing: 0.25em;

  white-space: nowrap;
}


/* ==================================================
   リンク・一覧などの字体統一
================================================== */

a,
.storylist,
.storylist a,
.story_list,
.story_list a,
.entry-list,
.entry-list a,
.index,
.index a,
a[href*="edit"],
a[href*="admin"],
a[href*="manage"],
a[href*="delete"],
a[href*="back"] {
  font-family:
    "Hiragino Mincho ProN",
    "Yu Mincho",
    "Noto Serif JP",
    serif !important;

  font-weight: normal !important;
  letter-spacing: 0.02em !important;
}


/* リンク色を消す */

a,
a:link,
a:visited,
a:hover,
a:active {
  color: inherit !important;
}


/* ==================================================
   その他
================================================== */

#container {
  color: transparent;
}

hr {
  border: none;
  height: 0;

  margin: 0 0 1em;
  padding: 0;
}


/* ==================================================
   スマホ
================================================== */

@media (max-width: 600px) {

  .novel {
    width: 94%;
    height: 65vh;
    max-height: 55vh;

    padding: 1.5em 1.2em;

    font-size: 14px;
    line-height: 2;
  }

  .marker {
    font-size: 12px;
    padding: 0.2em 0;
    margin-bottom: 0.1em;
  }

  .cover {
    height: 60vh;
  }

  .title-label {
    font-size: 0.9em;
  }

  .text-bg {
    font-size: 9px;
  }
}