@charset "UTF-8";
/* --------------------------------------------------
  Template by espace（https://espace.monbalcon.net/）
  Copyright: 2020 espace.

  利用規約を遵守の上、ご利用ください。
  二次配布、販売は禁止しています。
  --------------------------------------------------*/
/* ----- ▼ CSS変数設定 ここから ▼ ----- */
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@500;600&family=Open+Sans:wght@400;500&family=Pinyon+Script&family=Zen+Kaku+Gothic+New:wght@500&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200");
:root {
  /* テキスト */
  --text-color: #e3eaf2;        /* 雪に反射する淡い白 */
  --text-color-sub: #b9c9db;    /* 注釈・補足 */

  /* 背景（超控えめグラデーション用） */
  --bg-color-top: #0e1b2d;      /* 深夜の群青 */
  --bg-color-bottom: #1f3654;   /* 雪明かりが溶けた夜 */
  --bg-color-sub: #243d5a;      /* セクション背景 */

  /* テーマカラー（海×夜） */
  --theme-color1-more-light: #294060;
  --theme-color1-light: #4e6a91;
  --theme-color1-default: #6f8fb2;
  --theme-color1-dark: #a9bbd6; /* 見出し・アクセント用 */

  /* 星・物語のぬくもり */
  --theme-color2-default: #b2936e;

  /* 必須・警告 */
  --required-color: #c06a74;

  /* 影（黒じゃなく青） */
  --shadow: rgba(15, 35, 60, 0.6);

  --white: #e3eaf2;
  --animation: 0.7s;
}

/* ----- ▲ CSS変数設定 ここまで ▲ ----- */
/* ----- ▼ リセット　ここから（基本的には触らない方が良い部分） ▼ ----- */
/*
  Josh's Custom CSS Reset
  https://www.joshwcomeau.com/css/custom-css-reset/
*/
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

body {
  -webkit-font-smoothing: antialiased;
}

input,
button,
textarea,
select {
  font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

#root,
#__next {
  isolation: isolate;
}

/*
  Add by espace
*/
* {
  word-break: normal;
}

:focus {
  outline: none;
}

html {
  font-size: 62.5%;
}

body {
  word-wrap: break-word;
}

picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  margin-block: 0;
  margin-inline: auto;
}

a,
button {
  cursor: pointer;
}

a {
  text-decoration: none;
}

img {
  vertical-align: middle;
  max-inline-size: 100%;
}

p,
dl,
ul,
ol,
form,
blockquote,
.box,
.scrollbox {
  margin-block: 2.5rem;
  margin-inline: auto;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

main {
  hanging-punctuation: allow-end;
}

/* ----- ▲ リセット　ここまで（基本的には触らない方が良い部分） ▲ ----- */
/* ----- ▼ PCレイアウト　ここから ▼ ----- */
/* 基本 */
html {

}

.bg-fixed {
  position: fixed;
  inset: 0;
  z-index: -1;

  background: linear-gradient(
    to bottom,
    var(--bg-color-top) 0%,
    var(--bg-color-bottom) 100%
  );
}

body,
button,
input,
textarea,
select {
  font: 500 1.5rem/2.65rem "Yu Gothic", Meiryo, "Hiragino Kaku Gothic ProN", sans-serif;
  color: var(--text-color);
}



body.get-header header h1 {
  left: calc(45px - 4vh);
  top: 14vh;
  font-size: 8vh;
}
body.get-header .snow {
  top: 32vh;
  left: calc(255px - 14.8vh);
  width: 30vh;
}
body.get-header main,
body.get-header footer {
  max-width: 100%;
  margin-left: 400px;
  margin-right: 30px;
}
header {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100vh;
  width: 255px;
  border-right: 2px solid var(--white);
}

.snow {
  position: fixed;
  left: 149px;
  top: calc(50vh - 100px - 4rem);
  width: 250px;
  aspect-ratio: 1/1;
  margin: auto;
  background: url("../img/layout/h1.jpg") center/cover;
  border: 2px solid var(--white);
  border-radius: 100%;
  -webkit-clip-path: inset(0 0 0 0);
          clip-path: inset(0 0 0 0);
  overflow: hidden;
  box-shadow: inset 0 0 14px 0 var(--shadow);
}
.snow > div {
  /*雪の色*/
  color: snow;
  /*雪の大きさ*/
  font-size: 5px;
  /*初期位置*/
  position: fixed;
  top: -5%;
  /*雪を適当な幅で降らせる*/
  text-shadow: 5vw -100px 2px, 10vw -400px 3px, 20vw -500px 4px, 30vw -580px 1px, 39vw -250px 2px, 42vw -340px 5px, 56vw -150px 2px, 63vw -180px 0, 78vw -220px 4px, 86vw -320px 9px, 94vw -170px 7px;
  text-shadow: 2vw -100px 2px, 10vw -400px 3px, 5vw -504px 4px, 17vw -580px 1px, 15vw -250px 2px, 20vw -340px 5px, 38vw -150px 2px, 48vw -180px 0, 27vw -220px 4px, 75vw -320px 9px, 74vw -170px 7px;
  /*雪アニメーション1*/
  animation: roll 5s linear infinite;
}
.snow > div::before {
  content: "●";
}
.snow > div:nth-child(2) {
  animation: anim 8s linear infinite;
}

@keyframes roll {
  0% {
    transform: rotate(0deg);
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: rotate(20deg);
    top: 100%;
    opacity: 0;
  }
}
@keyframes anim {
  100% {
    color: transparent;
    top: 150%;
  }
}
main,
footer {
  max-width: 1000px;
  margin-block: 10rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 2rem;
  padding-right: 2rem;
}

/* メニュー */
.menu {
  padding: 20px 20px calc(20px + 4rem) 20px;
  font: 700 1.4rem/1 "Cormorant Garamond", "BIZ UDPMincho", "serif";
  letter-spacing: 1px;
}
.menu ul {
  margin: 0;
}
.menu ul li a {
  display: block;
  padding: 10px 0;
  color: var(--theme-color1-default);
}

.menu ul li .main {
  display: block;
  padding: 10px 0;
  color: var(--theme-color1-default);
}

.menu ul li ul {
  margin-left: 16px;
  padding-left: 16px;
  border-left: 2px solid var(--white);
}

.manu-toggler {
  display: none;
}

.fixed-menu {
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 60;
}
.fixed-menu ul li.next::before {
  content: none;
}
.fixed-menu ul li a,
.fixed-menu ul li button,
.fixed-menu ul li span {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
}
.fixed-menu ul li a::before,
.fixed-menu ul li button::before,
.fixed-menu ul li span::before {
  font: 400 1.6rem/1 "Material Symbols Rounded";
}
.fixed-menu ul li a {
  color: var(--theme-color1-default);
}
.fixed-menu ul li a:hover,
.fixed-menu ul li button:hover {
  box-shadow: none !important;
  background: none !important;
}
.fixed-menu ul li span {
  color: var(--theme-color1-light);
}
.fixed-menu ul li.pagetop a::before,
.fixed-menu ul li.pagetop button::before,
.fixed-menu ul li.pagetop span::before {
  content: "\keyboard_double_arrow_up";
}
.fixed-menu ul li.prev a::before,
.fixed-menu ul li.prev button::before,
.fixed-menu ul li.prev span::before {
  content: "\keyboard_arrow_left";
}
.fixed-menu ul li.next a::before,
.fixed-menu ul li.next button::before,
.fixed-menu ul li.next span::before {
  content: "\keyboard_arrow_right";
}
.fixed-menu ul li.home a::before,
.fixed-menu ul li.home button::before,
.fixed-menu ul li.home span::before {
  content: "\home";
}
.fixed-menu ul li.toc a::before,
.fixed-menu ul li.toc button::before,
.fixed-menu ul li.toc span::before {
  content: "\menu_book";
}
.fixed-menu ul li.characters a::before,
.fixed-menu ul li.characters button::before,
.fixed-menu ul li.characters span::before {
  content: "\group";
}
.fixed-menu ul li.images a::before,
.fixed-menu ul li.images button::before,
.fixed-menu ul li.images span::before {
  content: "\photo_library";
}

/* 見出し */
h1 {
  position: fixed;
  top: 0;
  font: 400 60px/1 "Pinyon Script", "Yu Mincho", YuMincho, "Hiragino Mincho Pro", serif;
  text-align: center;
  color: var(--white);
  text-shadow: 0 0 8px rgba(143, 166, 192, 0.55);
}
h1 span {
  background: var(--bg-color);
}
h1 a {
  color: var(--white);
}

h2 {
  margin-block: 15rem 5rem;
  font: 500 6rem/1 "Noto Serif JP", "Yu Mincho", YuMincho, "Hiragino Mincho Pro", serif;
  color: var(--theme-color1-light);
}
h2:first-child {
  margin-block-start: 10rem;
}

h3,
h4,
h5,
h6 {
  margin-block: 10rem 5rem;
  font: 700 2rem/1 "Cormorant Garamond", "BIZ UDPMincho", "serif";
}

h3 {
  position: relative;
  display: inline-block;
  color: var(--theme-color1-default);
  padding-right: 1em;
}

h3::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  height: 1px;
  width: calc(100vw - 100% - 50rem);
  max-width: calc(100svw - 100% - 50rem);
  background: var(--white);
  z-index: -1;
}
h3 span {
  background: var(--bg-color);
  padding-inline: 0.6rem;
}

h4,
h5,
h6 {
  font-size: 1.6rem;
}

h4::before {
  content: "✦";
  display: inline-block;
  left: 0;
  font-size: 2.1rem;
  padding: 0.1rem 0.5rem;
  color: var(--theme-color1-light);
}

h5 span,
h6 span {
  display: inline-block;
  padding: 0.6rem 1.2rem;
  border: 2px solid var(--theme-color1-light);
}



h6 span {
  border-inline: 0;
  border-block-start: 0;
}

/* リスト */
ul.no-style, ol.no-style {
  padding: 0;
  list-style: none;
}
ul.column, ol.column {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
}
ul.column > *, ol.column > * {
  margin: 0 !important;
}
ul.column.gap, ol.column.gap {
  gap: 5px 25px;
}
ul.column.column-2 > *, ol.column.column-2 > * {
  inline-size: calc((100% - 25px) / 2) !important;
}
ul.column.column-3 > *, ol.column.column-3 > * {
  inline-size: calc((100% - 50px) / 3) !important;
}
ul .description, ol .description {
  margin-inline-start: 10px;
}
ul .description::before, ol .description::before {
  content: "…";
  margin-inline-end: 10px;
}
ul .description:has(ul.small), ul .description:has(ol.small), ol .description:has(ul.small), ol .description:has(ol.small) {
  display: flex;
  justify-content: flex-start;
}
ul .description:has(ul.small)::before, ul .description:has(ol.small)::before, ol .description:has(ul.small)::before, ol .description:has(ol.small)::before {
  content: "└";
}
ul .description > ul.small, ol .description > ul.small {
  display: inline-block;
  margin-block: 0;
  margin-inline: 0;
}

dl dd {
  margin-block-end: 1.25rem;
  padding-inline-start: 5rem;
  padding-block-end: 1.25rem;
}
dl dd:last-of-type {
  padding-block-end: 0 !important;
  border-block-end: 0 !important;
}
dl.inline {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 0;
}
dl.inline dt, dl.inline dd {
  margin-block-end: 0;
  padding-block-end: 1.25rem;
}
dl.inline dt:last-of-type, dl.inline dd:last-of-type {
  padding-block-end: 0 !important;
  border-block-end: 0 !important;
}
dl.inline dt {
  inline-size: 200px;
}
dl.inline dd {
  inline-size: calc(100% - 200px);
  padding-inline-start: 0;
}

ul li.next {
  list-style: none;
}
ul li.next::before {
  content: "→";
  margin-inline-end: 0.4rem;
  font-size: 120%;
}
ul.small {
  list-style: none;
  padding-inline-start: 0;
}
ul.small li {
  display: inline;
}
ul.small li::before {
  color: blue;
}
ul.small li:not(:first-child):not(.next)::before {
  content: ":";
  margin-block: 0;
  margin-inline: 0.2rem 0.4rem;
  font-weight: 900;
}
ul.small li.next::before {
  margin-block: 0;
  margin-inline: 0.2rem 0.4rem;
}

dl dd {
  border-block-end: 2px dotted var(--white);
}
dl.inline dt,
dl.inline dd {
  border-block-end: 2px dotted var(--white);
}
dl.border {
  padding-block: 1.4rem;
  padding-inline: 2rem;
  border: 2px solid var(--white);
  border-radius: 10px;
}

/* フォーム */
.required::after {
  content: "*";
  color: var(--required-color);
}

.form-block {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.form-block > dl:first-child {
  margin-block-start: 0;
}
.form-block > dl:last-of-type {
  margin-block-end: 0;
}
.form-block dl dt,
.form-block dl dd {
  margin: 0;
  padding: 0;
  border-block-end: 0;
}
.form-block dl dd > * {
  margin: 0;
}
.form-block dl.inline {
  gap: 1.25rem 0;
}
.form-block dl.inline dt {
  inline-size: 130px;
}
.form-block dl.inline dd {
  inline-size: calc(100% - 130px);
}
.form-block > *,
.form-block dl dd > * {
  inline-size: 100%;
}

input,
textarea,
select,
button:not(.manu-toggler),
input[type=submit],
input[type=button] {
  border: 2px solid var(--white);
  color: var(--theme-color1-default);
  border-radius: 13px;
}

input,
textarea,
select {
  transition: border-color var(--animation);
}
input:hover, input:focus,
textarea:hover,
textarea:focus,
select:hover,
select:focus {
  border-color: var(--theme-color1-light);
  color: var(--theme-color1-default);
}

button:not(.manu-toggler),
input[type=submit],
input[type=button] {
  transition: background var(--animation), box-shadow var(--animation);
  background: transparent;
  color: var(--theme-color1-default);
  font-weight: 600;
}
button:not(.manu-toggler):disabled,
input[type=submit]:disabled,
input[type=button]:disabled {
  filter: grayscale(0.8);
}
button:not(.manu-toggler):not(:disabled):hover,
input[type=submit]:not(:disabled):hover,
input[type=button]:not(:disabled):hover {
  background: var(--white);
  box-shadow: 2px 2px 10px var(--theme-color1-light);
}

/* リンク */
a.arrow::before,
span.arrow::before {
  content: "\keyboard_arrow_right";
  margin-inline-end: 0.4rem;
  font-family: "Material Symbols Rounded";
  vertical-align: middle;
}
a.btn,
span.btn {
  overflow: hidden;
  padding-block: 0.4rem;
  padding-inline: 0.8rem;
  border: 2px solid var(--white);
  border-radius: 10px;
  font-weight: bold;
}
a.btn.btn-block,
span.btn.btn-block {
  display: block;
  margin-block: 0.6rem;
  text-align: center;
}
a.btn.btn-arrow::after,
span.btn.btn-arrow::after {
  content: "\keyboard_arrow_right";
  margin-inline-start: 0.4rem;
  font-family: "Material Symbols Rounded";
  vertical-align: middle;
}
a.btn.btn-arrow.btn-block,
span.btn.btn-arrow.btn-block {
  position: relative;
  padding-inline-end: 2rem;
}
a.btn.btn-arrow.btn-block::after,
span.btn.btn-arrow.btn-block::after {
  position: absolute;
  right: 0.6rem;
}

a {
  color: var(--theme-color2-default);
}
a.btn, a.btn-block {
  transition: background var(--animation), box-shadow var(--animation);
}
a.btn:hover, a.btn-block:hover {
  background: var(--white);
  box-shadow: 2px 2px 10px var(--theme-color1-light);
}

span.btn, span.btn-block {
  filter: grayscale(1);
}

/* 装飾 */
b,
em,
strong {
  font-weight: bold;
}

em {
  font-style: normal;
  background: linear-gradient(transparent 50%, var(--theme-color1-light) 50%);
}

strong {
  background: var(--theme-color1-light);
}

hr {
  margin-block: 10rem;
  margin-inline: auto;
  inline-size: 1px;
  block-size: 10rem;
  background: var(--theme-color1-light);
  border: 0;
}

.box {
  padding: 2rem;
  border: 2px solid var(--white);
  border-radius: 10px;
}
.box > *:first-child {
  margin-block-start: 0;
  padding-block-start: 0;
}
.box > *:last-child {
  margin-block-end: 0;
  padding-block-end: 0;
}

.scrollbox {
  overflow-y: auto;
  max-block-size: 14rem;
}
.scrollbox::-webkit-scrollbar {
  inline-size: 1rem;
}
.scrollbox::-webkit-scrollbar-track {
  background-color: transparent;
}
.scrollbox::-webkit-scrollbar-thumb {
  border: 2px solid var(--white);
  border-radius: 10px;
}
.scrollbox > *:first-child {
  margin-block-start: 0;
  padding-block-start: 0;
}
.scrollbox > *:last-child {
  margin-block-start: 0;
  padding-block-start: 0;
}

.onlyrow {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.material-symbols-rounded {
  font-size: initial;
  vertical-align: unset;
}

.column {
  display: grid;
  grid-template-columns: 1fr;
  gap: 25px;
  margin-block: 2.5rem;
  margin-inline: auto;
}
.column > * {
  margin: 0 !important;
}
.column.column-2 {
  grid-template-columns: repeat(2, 1fr);
}
.column.column-3 {
  grid-template-columns: repeat(3, 1fr);
}
.column.column-4 {
  grid-template-columns: repeat(4, 1fr);
}

.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.text-bold {
  font-weight: bold;
}
.text-small {
  font-size: smaller;
}
.text-large {
  font-size: larger;
}

/* ▼ novel viewerを使用しない場合は削除してOK ▼ */
.env-writing-mode-vertical::-webkit-scrollbar {
  inline-size: 10px;
}
.env-writing-mode-vertical::-webkit-scrollbar-track {
  background-color: transparent;
}
.env-writing-mode-vertical::-webkit-scrollbar-thumb {
  border: 2px solid var(--white);
  border-radius: 10px;
}

/* ▲ novel viewerを使用しない場合は削除してOK ▲ */
/* インデックス */
#INDEX h1,
#INDEX .snow {
  position: initial;
}
#INDEX h1 {
  height: auto;
  writing-mode: initial;
}
/* ----- ▲ PCレイアウト　ここまで ▲ ----- */
/* ----- ▼ SPレイアウト　ここから ▼ ----- */
@media only screen and (max-width: 1000px) {
  /* 基本 */
  body,
  button,
  input,
  textarea {
    font-size: 1.4rem;
    line-height: 2.65rem;
  }
  body.get-header header h1 {
    left: auto;
    height: auto;
    font-size: 60px;
  }
  body.get-header .snow {
    top: auto;
    left: auto;
    width: 30vw;
  }
  body.get-header main,
  body.get-header footer {
    margin-left: auto;
    margin-right: auto;
  }
  header {
    position: inherit;
    width: 100%;
    height: auto;
    gap: 2.5vw;
    margin-top: 10vw;
    margin-bottom: 20vw;
    border: 0;
  }
  .snow {
    position: inherit;
    top: auto;
    left: auto;
    width: 30vw;
  }
  main,
  footer {
    margin-left: 2.4rem;
    margin-right: 2.4rem;
  }
  /* メニュー */
  .menu {
    position: fixed;
    top: 0;
    left: 100vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 100vh;
    background: linear-gradient(110deg, var(--bg-color-top), var(--bg-color-bottom));
    opacity: 0;
    z-index: 70;
    transition: all var(--animation);
  }
  .menu ul {
    text-align: center;
  }
  .menu ul li a {
    padding: 16px 0;
  }
  .menu ul li ul {
    margin-left: 50%;
    text-align: left;
  }
  .menu.open {
    left: 0;
    opacity: 1;
  }
  .manu-toggler {
    position: fixed;
    top: calc(50vh - 20px);
    right: 0;
    display: block;
    width: 20px;
    height: 58px;
    border: 0;
    border-radius: 16px 0 0 16px;
    background: var(--white);
    z-index: 72;
    color: var(--theme-color1-default);
  }
  .manu-toggler::before {
    content: "menu";
    position: absolute;
    top: 0;
    left: 8px;
    display: block;
    height: 100%;
    font: 400 1.2rem/1 "Open Sans", "Zen Kaku Gothic New", "Yu Gothic", Meiryo, "Hiragino Kaku Gothic ProN", sans-serif;
    text-align: center;
    writing-mode: vertical-lr;
  }
  .manu-toggler.open::before {
    content: "close";
  }
  /* 見出し */
  h1 {
    position: inherit;
    left: auto;
    height: auto;
    writing-mode: inherit;
  }
  h2 {
    font-size: 4rem;
  }

h3::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  height: 1px;
  width: calc(100vw - 100% - 3.8rem);
  max-width: calc(100svw - 100% - 3.8rem);
  background: var(--white);
  z-index: -1;
}

  /* リスト */
  ul.no-style, ol.no-style {
    padding: 0;
    list-style: none;
  }
  ul.column, ol.column {
    display: flex;
    flex-direction: column;
  }
  ul.column.column-2 > *, ul.column.column-3 > *, ol.column.column-2 > *, ol.column.column-3 > * {
    inline-size: 100% !important;
  }
  ul .description, ol .description {
    display: block;
    margin-inline-start: 10px;
  }
  ul .description::before, ol .description::before {
    content: "└";
    margin-inline-end: 10px;
  }
  dl.border, dl.inline {
    display: block;
  }
  dl.border dt, dl.border dd, dl.inline dt, dl.inline dd {
    inline-size: 100%;
  }
  dl.border dt, dl.inline dt {
    padding-block-end: 0;
    border-block-end: 0;
  }
  dl.border dd, dl.inline dd {
    padding-inline-start: 5rem;
    margin-block-end: 1.25rem;
  }
  dl.border dd:last-of-type, dl.inline dd:last-of-type {
    margin-block-end: 0;
  }
  /* フォーム */
  .form-inline input {
    inline-size: 40%;
  }
  .form-block dl {
    flex-direction: column;
  }
  .form-block dl.inline dt, .form-block dl.inline dd {
    inline-size: 100%;
  }
  /* リンク */
  /* 装飾 */
  .column.column-sp-1 {
    grid-template-columns: 1fr;
  }
  .column.column-sp-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .column.column-sp-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  /* インデックス */
  /* インデックス */
}
/* ----- ▲ SPレイアウト　ここまで ▲ ----- */