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

   利用規約を遵守の上、ご利用ください。
   二次配布、販売は禁止しています。
   --------------------------------------------------*/
@import url("https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@300;400;500;700;900&display=swap");
:root {
  --theme-color1: #1b344c;
  --theme-color2: #0491b8;
  --theme-color3: #3fcdd7;
  --theme-light-color3: #cfecee;
  --theme-color4: #aed73f;
  --theme-color5: #b8041c;
  --color-white: #fff;
  --bg-color: #f3f3f3;
  --text-color: var(--theme-color1);
  --form-border-color: var(--theme-color3);
  --form-border-hover-color: var(--theme-color4);
}

/* ----- ▼ リセット　ここから（基本的には触らない方が良い部分） ▼ ----- */
* {
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

:focus {
  outline: none;
}

a {
  text-decoration: none;
}

a,
a::after,
a::before,
button,
button::after,
button::before,
input,
textarea,
select {
  transition: all 0.3s;
}

a img, button img {
  transition-duration: 0.3s;
}

button {
  outline: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  cursor: hand;
}

input, textarea, select {
  font-size: 1.6rem;
}

input, textarea {
  box-shadow: none;
  -webkit-appearance: none;
}

select {
  appearance: button;
}

p, dl, ul, form {
  margin: 25px 0;
  word-break: break-all;
}

p:first-child, dl:first-child, ul:first-child, form:first-child {
  margin-top: 0;
}

p:last-child, dl:last-child, ul:last-child, form:last-child {
  margin-bottom: 0;
}

ul ul, ul ol, ol ul, ol ol {
  margin: 0 !important;
}

img {
  vertical-align: middle;
}

@media only screen and (max-width: 1024px) {
  p, form {
    margin: 0 0 1.7rem;
  }
  p:last-child, form:last-child {
    margin-bottom: 0;
    margin-right: 0px;
  }
}

/* ----- ▲ リセット　ここまで（基本的には触らない方が良い部分） ▲ ----- */
/* ----- ▼ レイアウト　ここから ▼ ----- */
/* 基本 */
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

body.no_header main, body.no_header footer {
  margin-left: auto;
  margin-right: auto;
}

body.no_header main[data-page]::before {
  left: calc((100% - (100% - 700px)) / 2 - 50px);
}

body.no_header main[data-page]::after {
  left: calc((100% - (100% - 700px)) / 2 - 63px);
}

body, button, input, textarea, select {
  font: 500 1.6rem/calc(1.6rem + 1.05rem) "Yu Gothic", Meiryo, "Hiragino Kaku Gothic ProN", sans-serif;
  color: var(--text-color);
  background: var(--bg-color);
}

main, footer {
  width: calc(100% - 700px);
  margin-left: 450px;
}

main {
  margin-top: 70px;
}

main[data-page]::before, main[data-page]::after {
  position: fixed;
}

main[data-page]::before {
  content: "";
  display: block;
  height: 100vh;
  width: 1px;
  top: 0;
  left: 395px;
  background: var(--theme-color4);
}

main[data-page]::after {
  content: attr(data-page);
  top: 70px;
  left: 382px;
  padding: 5px 0;
  background: var(--bg-color);
  color: var(--theme-color4);
  writing-mode: vertical-lr;
}

.novel{
	line-break:strict;
	word-break:break-word;
	overflow-wrap:break-word;
	word-wrap:break-word;
	text-align:justify;
}

article {
    position: relative;
    margin: 0 0 50px;
    padding: 70px 30px;
    background: var(--bg-color);
}
article.noble {
  position: relative;
  margin: 0 0 200px;
  background: var(--bg-color);
}

article > * {
  z-index: 1;
}
article.noble > * {
  z-index: 1;
}


article::before, article::after {
  content: "";
  position: absolute;
  box-sizing: border-box;
  width: calc(100% + 12px);
  height: 100px;
  z-index: -1;
}
article.noble::before, article.noble::after {
  content: "";
  position: absolute;
  box-sizing: border-box;
  width: calc(100% + 12px);
  height: 100px;
  z-index: -1;
}


article::before {
  top: -6px;
  right: -6px;
}
article.noble::before {
  top: -6px;
  right: -6px;
}

article::after {
  bottom: -6px;
  left: -6px;
}
article.noble::after {
  bottom: -6px;
  left: -6px;
}

a {
  color: var(--theme-color2);
  border-bottom: 1px solid var(--theme-color2);
}

a:hover {
  border-color: transparent;
}

a.img {
  border: 0;
}

a.img:hover {
  opacity: 0.6;
}

a.btn {
  position: relative;
  padding: 5px;
  background: var(--theme-color3);
  border: 0;
  border-radius: 10px;
  color: var(--color-white);
}

a.btn:hover {
  background: var(--theme-color2);
}

a.btn.btn-block {
  position: relative;
  display: block;
  width: 80%;
  margin: 25px auto;
  padding: 15px;
  text-align: center;
  box-shadow: 0 5px var(--theme-color2);
}

a.btn.btn-block:hover {
  background: var(--theme-color2);
  box-shadow: none;
  transform: translateY(5px);
}

img {
  max-width: 100%;
}

.wrap {
	animation: fadein 2s forwards;
}

@keyframes fadein {
	0% {opacity: 0}
	100% {opacity: 1}
}

.env-writing-mode-vertical p {
    margin: -50px 25px 0;
}

/* メニュー */
.menu:not(#spotlight), .sub-menu {
  position: fixed;
}

.menu:not(#spotlight) ul, .sub-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu:not(#spotlight) a, .menu:not(#spotlight) span, .menu:not(#spotlight) label, .sub-menu a, .sub-menu span, .sub-menu label {
  transition: all 0.3s;
}

.menu:not(#spotlight) a::before, .menu:not(#spotlight) a::after, .menu:not(#spotlight) span::before, .menu:not(#spotlight) span::after, .menu:not(#spotlight) label::before, .menu:not(#spotlight) label::after, .sub-menu a::before, .sub-menu a::after, .sub-menu span::before, .sub-menu span::after, .sub-menu label::before, .sub-menu label::after {
  transition: all 0.3s;
}

.menu:not(#spotlight) {
  top: 70px;
  left: 20px;
  font-weight: 700;
  z-index: 2;
  background: url("../img/layout/bg_menu.svg") no-repeat bottom center/50px 100%;
}

.menu:not(#spotlight) > ul {
  position: relative;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.menu:not(#spotlight) > ul a,
.menu:not(#spotlight) > ul span {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 120px;
  border: 0;
  writing-mode: vertical-lr;
  color: var(--theme-color2);
  text-align: center;
  font-style: italic;
}

.menu:not(#spotlight) > ul a:hover, .menu:not(#spotlight) > ul a.active,
.menu:not(#spotlight) > ul span:hover,
.menu:not(#spotlight) > ul span.active {
  color: var(--theme-color3);
  text-shadow: 0 0 15px var(--theme-color3);
}

.menu:not(#spotlight) > ul > li {
  position: relative;
  overflow: hidden;
}

.menu:not(#spotlight) > ul > li > ul {
  transition: all 0.3s;
  transform: scale(0);
}

.menu:not(#spotlight) > ul > li:hover {
  overflow: visible;
  width: auto;
}

.menu:not(#spotlight) > ul > li:hover > a {
  color: var(--theme-color3);
  text-shadow: 0 0 15px var(--theme-color3);
}

.menu:not(#spotlight) > ul > li:hover > ul {
  transform: scaleX(1);
}

.menu:not(#spotlight) > ul > li > ul {
  position: absolute;
  top: 0;
  left: 50px;
  padding-left: 10px;
}

.menu:not(#spotlight) > ul > li > ul > li:first-child a, .menu:not(#spotlight) > ul > li > ul > li:first-child span {
  border-top: 1px solid var(--theme-color1);
}

.menu:not(#spotlight) > ul > li > ul > li:last-child a, .menu:not(#spotlight) > ul > li > ul > li:last-child span {
  border-bottom: 1px solid var(--theme-color1);
}

.menu:not(#spotlight) > ul > li > ul a, .menu:not(#spotlight) > ul > li > ul span {
  border-left: 1px solid var(--theme-color1);
  border-right: 1px solid var(--theme-color1);
  border-left-width: 3px;
  width: 150px;
  height: auto;
  padding: 5px;
  background: var(--bg-color);
  writing-mode: horizontal-tb;
  font-style: normal;
  font-weight: 500;
}

.menu:not(#spotlight) > ul > li > ul a:hover, .menu:not(#spotlight) > ul > li > ul span:hover {
  background: var(--theme-color1);
}

.sub-menu {
  top: 0;
  left: 90px;
  width: 250px;
  height: 100vh;
  padding: 70px 15px 0;
  background: url("../img/layout/bg_submenu.svg") top center/cover;
  z-index: 1;
}

.sub-menu a, .sub-menu label {
  display: block;
  font-weight: 500;
}

.sub-menu > ul > li > a, .sub-menu > ul > li label {
  position: relative;
  padding: 5px 0;
  border: 0;
  color: var(--color-white);
}

.sub-menu > ul > li > a::before, .sub-menu > ul > li label::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  display: block;
  width: 0;
  height: 1px;
  box-shadow: 0 0 5px var(--theme-color3);
  background: var(--color-white);
}

.sub-menu > ul > li > a:hover, .sub-menu > ul > li label:hover {
  text-shadow: 0 0 5px var(--theme-color3);
}

.sub-menu > ul > li > a:hover::before, .sub-menu > ul > li label:hover::before {
  width: 100%;
}

.sub-menu > ul > li > label {
  display: flex;
  justify-content: space-between;
}

.sub-menu > ul > li > label::after {
  content: "\f107";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}

.sub-menu > ul > li > label + ul {
  max-height: 0;
  margin-left: 2rem;
  opacity: 0;
  transition: .5s;
  visibility: hidden;
}

.sub-menu > ul > li > label + ul a {
  padding: 4px 5px 2px;
  border: 0;
  color: var(--color-white);
}

.sub-menu > ul > li > label + ul a:hover {
  color: var(--theme-color2);
  background: var(--color-white);
}

.sub-menu input[type="checkbox"] {
  display: none;
}

.sub-menu input[type="checkbox"]:checked + label + ul {
  max-height: 999px;
  opacity: 1;
  visibility: visible;
  padding: 10px 0 25px;
}

.manu-toggler {
  display: none;
}

.fixed-menu {
  position: fixed;
  bottom: 45px;
  right: 45px;
  z-index: 1;
}

.fixed-menu ul {
  display: flex;
  justify-content: center;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fixed-menu a, .fixed-menu button, .fixed-menu span {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  background: var(--theme-color4) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--theme-color2) !important;
}

.fixed-menu a:hover, .fixed-menu button:hover, .fixed-menu span:hover {
  color: var(--color-white) !important;
  transform: none !important;
}

.fixed-menu a::before, .fixed-menu button::before, .fixed-menu span::before {
  position: absolute;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}

.fixed-menu li.pagetop a::before, .fixed-menu li.pagetop button::before, .fixed-menu li.pagetop span::before {
  content: "\f102";
}

.fixed-menu li.prev a::before, .fixed-menu li.prev button::before, .fixed-menu li.prev span::before {
  content: "\f104";
}

.fixed-menu li.next::before {
  content: none;
}

.fixed-menu li.next a::before, .fixed-menu li.next button::before, .fixed-menu li.next span::before {
  content: "\f105";
}

.fixed-menu li.toc a::before, .fixed-menu li.toc button::before, .fixed-menu li.toc span::before {
  content: "\f0ca";
}

.fixed-menu li.home a::before, .fixed-menu li.home button::before, .fixed-menu li.home span::before {
  content: "\e3af";
}

.fixed-menu span {
  opacity: 0.6;
}

@media only screen and (max-width: 1024px) {
  .menu:not(#spotlight), .sub-menu {
    padding-top: 90px !important;
    transition: all 0.3s;
    z-index: 3;
  }
  .menu:not(#spotlight) {
    top: 0;
    left: auto;
    right: -300px;
    width: 300px;
    height: 100vh;
    background-size: cover;
  }
  .menu:not(#spotlight).open {
    transform: translateX(-300px);
  }
  .menu:not(#spotlight) > ul {
    display: block;
  }
  .menu:not(#spotlight) > ul a,
  .menu:not(#spotlight) > ul span {
    display: block;
    width: 100%;
    height: auto;
    padding: 5px 50px 5px 30px;
    text-align: left;
    writing-mode: horizontal-tb;
  }
  .menu:not(#spotlight) > ul a:hover, .menu:not(#spotlight) > ul a.active,
  .menu:not(#spotlight) > ul span:hover,
  .menu:not(#spotlight) > ul span.active {
    color: var(--theme-color3);
    text-shadow: 0 0 15px var(--theme-color3);
  }
  .menu:not(#spotlight) > ul > li {
    overflow: visible;
  }
  .menu:not(#spotlight) > ul > li > ul {
    transform: scale(1);
  }
  .menu:not(#spotlight) > ul > li > ul {
    position: relative;
    top: 0;
    padding-left: 20px;
    background: transparent;
  }
  .menu:not(#spotlight) > ul > li > ul > li:first-child a, .menu:not(#spotlight) > ul > li > ul > li:first-child span {
    border-top: 1px solid var(--theme-color2);
  }
  .menu:not(#spotlight) > ul > li > ul > li:last-child a, .menu:not(#spotlight) > ul > li > ul > li:last-child span {
    border-bottom: 1px solid var(--theme-color2);
  }
  .menu:not(#spotlight) > ul > li > ul a, .menu:not(#spotlight) > ul > li > ul span {
    background: transparent;
    border: 0;
    width: calc(100% - 50px);
  }
  .sub-menu {
    left: auto;
    right: -250px;
    width: 250px;
    padding-left: 30px;
    padding-right: 50px;
  }
  .sub-menu.open {
    transform: translateX(-250px);
  }
  .sub-menu > ul > li > a, .sub-menu > ul > li label {
    padding: 5px 0;
  }
  .manu-toggler {
    position: fixed;
    right: 0;
    top: 100px;
    display: block;
    width: 40px;
    height: 40px;
    padding: 0;
    background: var(--theme-color1);
    border: 2px solid var(--theme-color1);
    z-index: 100;
  }
  .manu-toggler::before, .manu-toggler::after {
    content: "";
    position: absolute;
    display: block;
    width: 60%;
    height: 2px;
    background: var(--color-white);
  }
  .manu-toggler::before {
    top: 15px;
    left: 5px;
  }
  .manu-toggler::after {
    bottom: 15px;
    right: 5px;
  }
  .manu-toggler.open::before {
    transform: translateX(2px) translateY(2px) rotate(45deg);
  }
  .manu-toggler.open::after {
    transform: translateX(-2px) translateY(-2px) rotate(-45deg);
  }
  .manu-toggler + .manu-toggler {
    top: 150px;
    background: var(--bg-color);
  }
  .manu-toggler + .manu-toggler::before, .manu-toggler + .manu-toggler::after {
    content: "";
    position: absolute;
    display: block;
    width: 60%;
    height: 2px;
    background: var(--theme-color1);
  }
  .fixed-menu {
    right: 0;
  }
}

/* 見出し */
h1 {
  position: fixed;
  top: 10px;
  left: 20px;
  margin: 0;
  font: 900 40px/1 "Zen Kaku Gothic New", "Yu Gothic", Meiryo, "Hiragino Kaku Gothic ProN", sans-serif;
  z-index: 10;
  color: var(--theme-color2);
}

h1::before {
  content: "";
  position: fixed;
  width: 300px;
  top: -20px;
  left: -5px;
  display: block;
  height: 40px;
  background: var(--theme-color4);
  transform: rotate(-8deg);
  z-index: -1;
}

h1 a {
  color: var(--theme-color2);
  border: 0;
}

h1 a:hover {
  color: var(--theme-color1);
}

h1 img {
   max-width: 21%;
  height: auto;
}

h2 {
  position: absolute;
  top: 10px;
  right: 10px;
  margin: 0;
  font: italic 900 40px/1 "Zen Kaku Gothic New", "Yu Gothic", Meiryo, "Hiragino Kaku Gothic ProN", sans-serif;
  text-align: right;
  writing-mode: vertical-lr;
}

h2::first-letter {
  color: var(--theme-color3);
}

h2 {
  margin-top: 0;
}

h4 {
  text-align: center;
}

h3 {
  border-bottom: 2px solid var(--theme-color3);
  font: 700 34px/1 "Zen Kaku Gothic New", "Yu Gothic", Meiryo, "Hiragino Kaku Gothic ProN", sans-serif;
  color: var(--theme-color3);
}



h3 span
{
  position: relative;
  display: inline-block;
}


h3 span::after
{
  content: "";
  display: block;
  block-size: 4px;
  inline-size: 100%;
  border-radius: 2px;
}

h3 {
  margin-block: 100px;
  margin-inline: auto;
  text-align: center;
  padding-inline-start: 10px;
}
h3 span::after {
  margin-block-start: 30px;
}



h4, h5, h6 {
  font: 700 1.8rem/1 "Zen Kaku Gothic New", "Yu Gothic", Meiryo, "Hiragino Kaku Gothic ProN", sans-serif;
}

h4 {
  position: relative;
  width: 80%;
  margin: 100px auto 75px;
  padding: 20px;
}

h4::before, h4::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  display: block;
  border: 20px solid transparent;
}

h4::before {
  top: 0;
  left: 0;
  border-bottom: 0;
  border-left: 0;
  border-top-color: var(--theme-color4);
}

h4::after {
  bottom: 0;
  right: 0;
  border-top: 0;
  border-right: 0;
  border-bottom-color: var(--theme-color4);
}

h5, h6 {
  margin: 75px auto 50px;
}

h5::before, h6::before {
  content: "";
  display: block;
  width: 50px;
  margin-bottom: 20px;
  background: var(--theme-color4);
}

h5::before {
  height: 8px;
}

h6::before {
  height: 4px;
}

h7 {
  text-align: center;
}

h7 {
  font: 700 1.8rem/1 "Zen Kaku Gothic New", "Yu Gothic", Meiryo, "Hiragino Kaku Gothic ProN", sans-serif;
}

h7 {
  position: relative;
  width: 80%;
  margin: 15px auto 10px;
  padding: 20px;
}

h7::before, h7::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  display: block;
  border: 20px solid transparent;
}

h7::before {
  top: 0;
  left: 0;
  border-bottom: 0;
  border-left: 0;
  border-top-color: var(--theme-color4);
}

h7::after {
  bottom: 0;
  right: 0;
  border-top: 0;
  border-right: 0;
  border-bottom-color: var(--theme-color4);
}


/* リスト */
ul.column, ol.column {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 25px;
}

ul.column.column-2 li, ol.column.column-2 li {
  width: calc(50% - 25px/2);
}

ul.column.column-a li, ol.column.column-a li {
  width: calc(50% - 25px/2);
}

ul.column.column-3 li, ol.column.column-3 li {
  width: calc(100%/3 - 17px);
}

ul .description, ol .description {
  margin-left: 10px;
}

ul .description::before, ol .description::before {
  content: "…";
  margin-right: 10px;
}

ul li.next {
  list-style: none;
}

ul li.next::before {
  content: "\f061";
  margin-right: 5px;
  font: 900 100%/1 "Font Awesome 5 Free";
}

ul.small {
  list-style: none;
  padding-left: 0;
}

ul.small li {
  display: inline;
}

ul.small li:not(:first-child):not(.next)::before {
  margin: 0 5px 0 2px;
  content: ":";
  font-weight: 900;
}

ul.small li.next::before {
  margin: 0 7px 0 2px;
}

dl {
  margin: 10px 0;
}

dl dd {
  margin: 0 0 15px;
  padding: 0 0 15px 40px;
  border-bottom: 1px solid var(--theme-light-color3);
}

dl dd:last-of-type {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

dl.inline {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin: 0;
  box-sizing: border-box;
}

dl.inline dt, dl.inline dd {
  vertical-align: top;
  margin: 0 0 15px 0;
  padding: 0 0 15px;
}

dl.inline dt:last-of-type, dl.inline dd:last-of-type {
  margin-bottom: 0;
  padding-bottom: 0;
}

dl.inline dt {
  width: 200px;
  padding: 0 30px 10px 0;
  padding-right: 30px;
  border-bottom: 1px solid var(--theme-light-color3);
}

dl.inline dt:last-of-type {
  border-bottom: 0;
}

dl.inline dd {
  width: calc(100% - 200px);
}

dl.border {
  padding: 15px 20px;
  border: 3px double var(--theme-color3);
}

/* フォーム */
.form-inline > *, .form-block > * {
  margin-bottom: 5px;
}

.form-block dl dt, .form-block dl dd {
  border-bottom: 0;
}

.form-block dl.inline dt {
  width: 130px;
}

.form-block dl.inline dd {
  width: calc(100% - 130px);
}

.form-block > *, .form-block dl dd > * {
  width: 100%;
  box-sizing: border-box;
}

.required::after {
  content: "*";
  color: var(--theme-color5);
}

input, textarea, select,
button:not(.manu-toggler):not(.env-button), input[type="submit"], input[type="button"] {
  border-radius: 0;
}

input::placeholder, textarea::placeholder, select::placeholder,
button:not(.manu-toggler):not(.env-button)::placeholder, input[type="submit"]::placeholder, input[type="button"]::placeholder {
  color: var(--form-border-color);
}

input, textarea, select {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  border: 2px solid var(--form-border-color);
  box-sizing: border-box;
  background: var(--bg-color);
}

input:hover, input:focus, textarea:hover, textarea:focus, select:hover, select:focus {
  border-color: var(--form-border-hover-color);
}

button:not(.manu-toggler):not(.env-button), input[type="submit"], input[type="button"] {
  background: var(--form-border-color);
  border-radius: 10px;
  box-shadow: 0 3px var(--theme-color2);
  color: var(--bg-color);
}

button:not(.manu-toggler):not(.env-button):hover, input[type="submit"]:hover, input[type="button"]:hover {
  background: var(--theme-color2);
  box-shadow: none;
  transform: translateY(3px);
}

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

em {
  font-style: normal;
  border-bottom: 2px solid var(--theme-color4);
}

strong {
  background-image: repeating-linear-gradient(45deg, transparent, transparent 2px, var(--theme-color4) 2px, var(--theme-color4) 4px);
}

hr {
  margin: 120px auto;
  height: 6px;
  width: 200px;
  border: 1px solid var(--theme-color4);
  border-left: 0;
  border-right: 0;
}

.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;
}

.width-sm {
  max-width: 700px;
  margin: auto;
}

.column {
  display: flex;
  flex-wrap: wrap;
  gap: 25px;
  margin: 25px auto;
}

.column.column-2 > * {
  width: calc(50% - 25px/2);
}

.column.column-a > * {
  width: calc(50% - 25px/2);
}


.column.column-3 > * {
  width: calc(100%/3 - 25px);
}

.box {
  margin: 25px auto;
  padding: 15px;
  border: 3px double var(--theme-color3);
}

.box.box-sm {
  width: 80%;
}

ul.ch-list {
  padding: 0;
  list-style: none;
  font-weight: 700;
  /* カラー設定 */
}

ul.ch-list a, ul.ch-list span {
  position: relative;
  display: block;
  padding: 10px;
  border: 1px solid var(--theme-color3);
  color: var(--text-color);
  text-align: center;
  z-index: 1;
}

ul.ch-list a img, ul.ch-list span img {
  width: 100%;
}

ul.ch-list li {
  width: 100%;
  margin-bottom: 25px;
}

ul.ch-list a {
  background: transparent;
}

ul.ch-list a::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: var(--theme-color3);
  z-index: -1;
  opacity: 0;
  transform: scaleX(0);
}

ul.ch-list a:hover {
  box-shadow: 0 0 15px var(--theme-color3);
}

ul.ch-list a:hover::before {
  opacity: 1;
  transform: scaleX(1);
}

ul.ch-list span {
  opacity: 0.6;
  overflow: hidden;
}

ul.ch-list span::before {
  content: "準備中";
  position: absolute;
  top: -5px;
  left: -19px;
  display: block;
  padding: 15px 10px 0 10px;
  background: var(--theme-color3);
  color: var(--color-white);
  font-size: small;
  line-height: 1;
  transform: rotate(-40deg);
  z-index: 1;
}

ul.ch-list.ch-list-column-2, ul.ch-list.ch-list-thumb, ul.ch-list.ch-list-img {
  display: flex;
  flex-wrap: wrap;
}

ul.ch-list.ch-list-column-2 {
  gap: 25px;
}

ul.ch-list.ch-list-column-2 li {
  width: calc(50% - 25px/2);
  margin-bottom: 0;
}

ul.ch-list.ch-list-column-a {
  display: flex;
  flex-wrap: wrap;
}

ul.ch-list.ch-list-column-a {
  gap: 25px;
}

ul.ch-list.ch-list-column-a li {
  width: calc(50% - 25px/2);
  margin-bottom: 0;
}


ul.ch-list.ch-list-thumb li a div, ul.ch-list.ch-list-thumb li span div, ul.ch-list.ch-list-img li a div, ul.ch-list.ch-list-img li span div {
  position: relative;
  padding-top: 100%;
  overflow: hidden;
}

ul.ch-list.ch-list-thumb li a div > *, ul.ch-list.ch-list-thumb li span div > *, ul.ch-list.ch-list-img li a div > *, ul.ch-list.ch-list-img li span div > * {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
}

ul.ch-list.ch-list-thumb {
  gap: 10px;
  font-weight: 500;
}

ul.ch-list.ch-list-thumb li {
  width: calc((100% - 50px) / 6);
}

ul.ch-list.ch-list-thumb li a, ul.ch-list.ch-list-thumb li span {
  line-height: 120%;
}

ul.ch-list.ch-list-thumb li.no-img a, ul.ch-list.ch-list-thumb li.no-img span {
  padding: 49.4% 10px;
}

ul.ch-list.ch-list-img {
  justify-content: space-around;
  align-items: end;
  padding: 10px;
  border: 1px solid var(--theme-color3);
  background: var(--bg-color);
  gap: 10px;
}

ul.ch-list.ch-list-img[data-group] {
  position: relative;
}

ul.ch-list.ch-list-img[data-group]::before {
  content: attr(data-group);
  position: absolute;
  top: -20px;
  left: -10px;
  display: block;
  width: 100%;
  color: var(--bg-color);
  font-size:30px ;
  font-weight: 900;
  font-family: "Zen Kaku Gothic New", "Yu Gothic", Meiryo, "Hiragino Kaku Gothic ProN", sans-serif;
  -webkit-text-stroke: 1px var(--theme-color3);
  text-stroke: 1px var(--theme-color3);
}

ul.ch-list.ch-list-img li {
  width: calc((100% - 40px) / 5);
  margin: 0;
}

ul.ch-list.ch-list-img li a,
ul.ch-list.ch-list-img li span {
  padding: 0;
  border: 0;
}

ul.ch-list.ch-list-img li a::after,
ul.ch-list.ch-list-img li span::after {
  content: attr(data-name);
  position: absolute;
  left: 0;
  bottom: 0;
  display: block;
  box-sizing: border-box;
  width: 100%;
  padding: 10px;
  color: var(--color-white);
  font: 900 22px/1 "Zen Kaku Gothic New", "Yu Gothic", Meiryo, "Hiragino Kaku Gothic ProN", sans-serif;
  text-align: left;
}

ul.ch-list.ch-list-img li a div,
ul.ch-list.ch-list-img li span div {
  padding-top: 150%;
}

ul.ch-list.ch-list-img li span::after {
  font-size: 1.6rem;
  opacity: .6;
}

ul.ch-list.ch-list-img li a {
  position: relative;
  overflow: hidden;
}

ul.ch-list.ch-list-img li a::before {
  content: none;
}

ul.ch-list.ch-list-img li a::after {
  text-shadow: 0 0 5px var(--theme-color3);
  -webkit-text-stroke: 0.2px var(--theme-color3);
  text-stroke: 0.2px var(--theme-color3);
  opacity: 0;
}

ul.ch-list.ch-list-img li a:hover {
  box-shadow: none;
}

ul.ch-list.ch-list-img li a:hover img {
  -moz-filter: drop-shadow(0 0 5px var(--theme-color3));
  -ms-filter: drop-shadow(0 0 5px var(--theme-color3));
  filter: drop-shadow(0 0 5px var(--theme-color3));
}

ul.ch-list.ch-list-img li a:hover::after {
  opacity: 1;
}

  /* 遊馬 */


ul.ch-list .asuma a,
ul.ch-list .asuma span {
  border-color: #ff0000;
}

ul.ch-list .asuma a::before {
  content: "";
  background: #ff0000;
}

ul.ch-list .asuma a:hover {
  box-shadow: 0 0 15px #ff0000;
}

ul.ch-list .asuma span::before {
  background: #ff0000;
}

ul.ch-list.ch-list-img .asuma a::after {
  text-shadow: 0 0 5px #ff0000;
  -webkit-text-stroke: 0.2px #ff0000;
  text-stroke: 0.2px #ff0000;
}

ul.ch-list.ch-list-img .asuma a:hover {
  box-shadow: none;
}

ul.ch-list.ch-list-img .asuma a:hover img {
  -moz-filter: drop-shadow(0 0 5px #ff0000);
  -ms-filter: drop-shadow(0 0 5px #ff0000);
  filter: drop-shadow(0 0 5px #ff0000);
}

  /* にい */

ul.ch-list .nii a,
ul.ch-list .nii span {
  border-color: #C2C636;
}

ul.ch-list .nii a::before {
  content: "";
  background: #C2C636;
}

ul.ch-list .nii a:hover {
  box-shadow: 0 0 15px #C2C636;
}

ul.ch-list .nii span::before {
  background: #C2C636;
}

ul.ch-list.ch-list-img .nii a::after {
  text-shadow: 0 0 5px #C2C636;
  -webkit-text-stroke: 0.2px #C2C636;
  text-stroke: 0.2px #C2C636;
}

ul.ch-list.ch-list-img .nii a:hover {
  box-shadow: none;
}

ul.ch-list.ch-list-img .nii a:hover img {
  -moz-filter: drop-shadow(0 0 5px #C2C636);
  -ms-filter: drop-shadow(0 0 5px #C2C636);
  filter: drop-shadow(0 0 5px #C2C636);
}

  /* ひおり */

ul.ch-list .hiori a,
ul.ch-list .hiori span {
  border-color: #FFA400;
}

ul.ch-list .hiori a::before {
  content: "";
  background: #FFA400;
}

ul.ch-list .hiori a:hover {
  box-shadow: 0 0 15px #FFA400;
}

ul.ch-list .hiori span::before {
  background: #FFA400;
}

ul.ch-list.ch-list-img .hiori a::after {
  text-shadow: 0 0 5px #FFA400;
  -webkit-text-stroke: 0.2px #FFA400;
  text-stroke: 0.2px #FFA400;
}

ul.ch-list.ch-list-img .hiori a:hover {
  box-shadow: none;
}

ul.ch-list.ch-list-img .hiori a:hover img {
  -moz-filter: drop-shadow(0 0 5px #FFA400);
  -ms-filter: drop-shadow(0 0 5px #FFA400);
  filter: drop-shadow(0 0 5px #FFA400);
}

  /* 雲七郎 */

ul.ch-list .kumo a,
ul.ch-list .kumo span {
  border-color: #853EC6;
}

ul.ch-list .kumo a::before {
  content: "";
  background: #853EC6;
}

ul.ch-list .kumo a:hover {
  box-shadow: 0 0 15px #853EC6;
}

ul.ch-list .kumo span::before {
  background: #853EC6;
}

ul.ch-list.ch-list-img .kumo a::after {
  text-shadow: 0 0 5px #853EC6;
  -webkit-text-stroke: 0.2px #853EC6;
  text-stroke: 0.2px #853EC6;
}

ul.ch-list.ch-list-img .kumo a:hover {
  box-shadow: none;
}

ul.ch-list.ch-list-img .kumo a:hover img {
  -moz-filter: drop-shadow(0 0 5px #853EC6);
  -ms-filter: drop-shadow(0 0 5px #853EC6);
  filter: drop-shadow(0 0 5px #853EC6);
}

  /* 空良 */

ul.ch-list .sora a,
ul.ch-list .sora span {
  border-color: #B0B0B0;
}

ul.ch-list .sora a::before {
  content: "";
  background: #B0B0B0;
}

ul.ch-list .sora a:hover {
  box-shadow: 0 0 15px #B0B0B0;
}

ul.ch-list .sora span::before {
  background: #B0B0B0;
}

ul.ch-list.ch-list-img .sora a::after {
  text-shadow: 0 0 5px #B0B0B0;
  -webkit-text-stroke: 0.2px #B0B0B0;
  text-stroke: 0.2px #B0B0B0;
}

ul.ch-list.ch-list-img .sora a:hover {
  box-shadow: none;
}

ul.ch-list.ch-list-img .sora a:hover img {
  -moz-filter: drop-shadow(0 0 5px #B0B0B0);
  -ms-filter: drop-shadow(0 0 5px #B0B0B0);
  filter: drop-shadow(0 0 5px #B0B0B0);
}

  /* 侑 */

ul.ch-list .atsumu a,
ul.ch-list .atsumu span {
  border-color: #29A222;
}

ul.ch-list .atsumu a::before {
  content: "";
  background: #29A222;
}

ul.ch-list .atsumu a:hover {
  box-shadow: 0 0 15px #29A222;
}

ul.ch-list .atsumu span::before {
  background: #29A222;
}

ul.ch-list.ch-list-img .atsumu a::after {
  text-shadow: 0 0 5px #29A222;
  -webkit-text-stroke: 0.2px #29A222;
  text-stroke: 0.2px #29A222;
}

ul.ch-list.ch-list-img .atsumu a:hover {
  box-shadow: none;
}

ul.ch-list.ch-list-img .atsumu a:hover img {
  -moz-filter: drop-shadow(0 0 5px #29A222);
  -ms-filter: drop-shadow(0 0 5px #29A222);
  filter: drop-shadow(0 0 5px #29A222);
}

  /* 凍雲 */

ul.ch-list .itegumo a,
ul.ch-list .itegumo span {
  border-color: #94D2E4;
}

ul.ch-list .itegumo a::before {
  content: "";
  background: #94D2E4;
}

ul.ch-list .itegumo a:hover {
  box-shadow: 0 0 15px #94D2E4;
}

ul.ch-list .itegumo span::before {
  background: #94D2E4;
}

ul.ch-list.ch-list-img .itegumo a::after {
  text-shadow: 0 0 5px #94D2E4;
  -webkit-text-stroke: 0.2px #94D2E4;
  text-stroke: 0.2px #94D2E4;
}

ul.ch-list.ch-list-img .itegumo a:hover {
  box-shadow: none;
}

ul.ch-list.ch-list-img .itegumo a:hover img {
  -moz-filter: drop-shadow(0 0 5px #94D2E4);
  -ms-filter: drop-shadow(0 0 5px #94D2E4);
  filter: drop-shadow(0 0 5px #94D2E4);
}



.ch {
  position: relative;
  width: calc(100% + 140px);
  margin-left: -70px;
  padding: 0 70px;
}

.ch .ch-speech {
  position: absolute;
  top: -176px;
  left: 20px;
  font: 900 28px/1 "Zen Kaku Gothic New", "Yu Gothic", Meiryo, "Hiragino Kaku Gothic ProN", sans-serif;
  color: var(--bg-color);
  white-space: nowrap;
  -webkit-text-stroke: 1px var(--theme-color3);
  text-stroke: 1px var(--theme-color3);
  writing-mode: vertical-lr;
  z-index: -1;
}

.ch .ch-text,
.ch .ch-img {
  margin: 20px 0;
}

.ch .ch-img {
  text-align: center;
  font-size: small;
}

.ch .ch-img {
  position: relative;
}

.bottom-right {
  position: absolute;
  bottom: 50px;
  right: 50px;
}

.bottom-right img{
  width: 100%;
  cursor: pointer;
}
.bottom-right:hover{
  box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
  transform: translateY(5px);
  transition-duration: 0.5s;
}


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

.ch .ch-chara {
  margin: 25px 0;
}

.ch .ch-chara {
  text-align: center;
  font-size: small;
}

.ch dl.ch-data {
  display: flex;
  flex-wrap: wrap;
  margin: 1.5em 0;
}

.ch dl.ch-data dt, .ch dl.ch-data dd {
  padding: 2px 7px;
  border: 0;
}

.ch dl.ch-data ul, .ch dl.ch-data p {
  margin: 0.5em 0;
}

.ch dl.ch-data ul:first-child, .ch dl.ch-data p:first-child {
  margin-top: 0;
}

.ch dl.ch-data ul:last-child, .ch dl.ch-data p:last-child {
  margin-bottom: 0;
}

.ch dl.ch-data ul {
  padding-left: 28px;
}

.ch dl.ch-data dt, .ch dl.ch-data dd {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 5px 0;
}

.ch dl.ch-data dt > *, .ch dl.ch-data dd > * {
  width: 100%;
}

.ch dl.ch-data dt {
  width: 25%;
  border: 3px double var(--theme-color3);
  justify-content: center;
}

.ch dl.ch-data dd {
  width: 75%;
}
  .ch dl.ch-data.ch-data-column-1 dt {
  width: 25%;
  border: 3px double var(--theme-color3);
  justify-content: center;
}
  .ch dl.ch-data.ch-data-column-1 dd {
  width: 75%;
}
.ch dl.ch-data.ch-data-column-2 dt, .ch dl.ch-data.ch-data-column-2 dd {
  width: 25%;
}

.ch dl.ch-data.ch-data-column-a dt, .ch dl.ch-data.ch-data-column-a dd {
  width: 25%;
}


.ch dl.ch-data.ch-data-column-3 dt, .ch dl.ch-data.ch-data-column-3 dd {
  width: calc(100% / 6);
}

.ch dl.ch-data.ch-data-column-4 dt, .ch dl.ch-data.ch-data-column-4 dd {
  width: 12.5%;
}

.ch dl.ch-history {
  display: flex;
  flex-wrap: wrap;
}

.ch dl.ch-history.ch-history-nodt {
  margin-left: 16px;
}

.ch dl.ch-history.ch-history-nodt dd {
  width: 100%;
}

.ch dl.ch-history dt, .ch dl.ch-history dd {
  border-bottom: 0;
}

.ch dl.ch-history dt {
  width: 20%;
  padding: 5px 16px 5px 0;
}

.ch dl.ch-history dd {
  position: relative;
  width: 80%;
  padding: 5px 0 5px 16px;
  margin: 0;
  border-left: 4px solid var(--color-white);
}

.ch dl.ch-history dd::before {
  content: "";
  position: absolute;
  left: -11px;
  top: 10px;
  display: block;
  width: 12px;
  height: 12px;
  border: 2px solid var(--bg-color);
  border-radius: 50%;
  background: var(--theme-color3);
}

/* ill */
.lb-container a,
.lb-data a {
  border: 0;
}

.ill.ill-thumbnail {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.ill.ill-thumbnail.ill-center {
  justify-content: center;
}

.ill.ill-thumbnail.ill-right {
  justify-content: end;
}

.ill.ill-thumbnail.thumb-rounded div > * {
  border-radius: 8px;
}

.ill.ill-thumbnail.thumb-circle div > * {
  border-radius: 50%;
}

.ill.ill-thumbnail.thumb-circle div.new > *::after {
  width: calc(100% - 10px);
  text-align: center;
}

.ill.ill-thumbnail.thumb-border div > * {
  border: 1px solid var(--theme-color3);
}

.ill.ill-thumbnail div {
  position: relative;
  width: calc((100% - 60px) / 7);
  padding-top: calc((100% - 60px) / 7);
  object-fit: cover;
  overflow: hidden;
}

.ill.ill-thumbnail div > * {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.ill.ill-thumbnail div img {
  object-fit: cover;
  min-width: 100%;
  min-height: 100%;
}

.ill.ill-thumbnail div.new > *::after {
  content: "new";
  position: absolute;
  top: 0;
  left: 0;
  padding: 5px;
  line-height: 1;
  font-weight: 600;
  background: var(--theme-color3);
  color: var(--color-white);
  font-size: 1rem;
  font-weight: 600;
}

.ill.ill-image {
  margin: 25px 0;
  text-align: center;
}

body#INDEX {
  background: var(--theme-color1);
  color: var(--color-white);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

body#INDEX h1 {
  position: relative;
  top: 0;
  left: 0;
  margin: 0 0 50px;
  font: 900 40px/1 "Zen Kaku Gothic New", "Yu Gothic", Meiryo, "Hiragino Kaku Gothic ProN", sans-serif;
  color: var(--theme-color2);
}

body#INDEX h1::before {
  content: none;
}

body#INDEX h1::after {
  content: "";
  display: block;
  position: relative;
  width: 0;
  height: 0;
  margin: 40px auto;
  border: 40px solid transparent;
  border-top-color: var(--theme-color4);
  transform: rotate(0);
}

body#INDEX h1 a {
  color: var(--color-white);
  border: 0;
}

body#INDEX h1 a:hover {
  color: var(--color-white);
  text-shadow: 0 0 15px var(--theme-color3);
}

body#INDEX main {
  margin: auto;
  padding: 50px;
}

body#INDEX main > *:last-child {
  margin-bottom: 0;
}

body#INDEX article {
  width: 100%;
  background: var(--theme-color1);
  border-color: var(--color-white);
}
body#INDEX article.noble {
  width: 100%;
  background: var(--theme-color1);
  border-color: var(--color-white);
}

body#INDEX article::before, body#INDEX article::after {
  border-color: var(--color-white);
}
body#INDEX article.noble::before, body#INDEX article.noble::after {
  border-color: var(--color-white);
}

.env-writing-mode-vertical {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}
.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 {
  background-color: var(--theme-color1-default);
  border-radius: 5px;
}


@media only screen and (max-width: 1400px) {
  main,
  footer {
    width: calc(100% - 550px);
  }
  ul.ch-list.ch-list-thumb {
    gap: 10px;
  }
  ul.ch-list.ch-list-thumb li {
    width: calc((100% - 40px) / 5);
    margin: 0;
  }
}

/* スマホ設定 */
@media only screen and (max-width: 1024px) {
  body, button:not(.env-button), input, textarea {
    font-size: 1.2rem;
    line-height: calc(1.2rem + 0.85rem);
  }
  body.no_header main[data-page]::before, button:not(.env-button).no_header main[data-page]::before, input.no_header main[data-page]::before, textarea.no_header main[data-page]::before {
    left: 20px;
  }
  body.no_header main[data-page]::after, button:not(.env-button).no_header main[data-page]::after, input.no_header main[data-page]::after, textarea.no_header main[data-page]::after {
    top: 100px;
    left: 7px;
  }
  article, footer {
    width: calc(100%);
    margin-left: auto;
    margin-right: auto;
  }
  article.noble, footer {
    width: calc(100% - 80px);
    margin-left: auto;
    margin-right: auto;
  }

  main {
    width: 100%;
    margin: auto;
    padding: 100px 0;
    overflow: hidden;
  }
  main[data-page]::before {
    left: 20px;
  }
  main[data-page]::after {
    top: 100px;
    left: 7px;
  }
  article {
    margin: 0 0 0;
    padding: 70px 40px 5px;
  }
  article.noble {
    padding: 10px;
  }

  /* 見出し */
  h2 {
    font-size: 20px;
    z-index: 2;
  }
  /* リスト */
  ul.column.column-2 li, ul.column.column-3 li, ol.column.column-2 li, ol.column.column-3 li {
    width: calc(100%);
  }
  ul.column.column-a li, ol.column.column-a li {
    width: calc(100%);
  }

  ul .description, ol .description {
    display: block;
    margin-left: 10px;
  }
  ul .description::before, ol .description::before {
    content: "└";
    margin-right: 10px;
  }
  dl.border dt, dl.border dd, dl.inline dt, dl.inline dd {
    display: block;
  }
  dl.border dt, dl.inline dt {
    width: 100%;
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
  }
  dl.border dd, dl.inline dd {
    width: 100%;
    padding-left: 40px;
  }
  /* フォーム */
  .form-inline input {
    width: 45%;
  }
  .form-block dl.inline dt {
    width: 100%;
  }
  .form-block dl.inline dd {
    width: 100%;
    padding-left: 40px;
  }
  .form-block > *, .form-block dl dd > * {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 5px;
  }
  /* 装飾 */
  .column.column-sp-1 {
    display: block;
  }
  .column.column-sp-1 > * {
    width: 100%;
  }
  .column.column-sp-2 > * {
    width: calc(50% - 25px/2);
  }
  .column.column-sp-3 > * {
    width: calc(100%/3 - 25px*2/2);
  }
  ul.ch-list.ch-list-column-2 {
    display: block;
  }
  ul.ch-list.ch-list-column-2 li {
  width: calc(50% - 25px/2);
    margin-bottom: 15px;
  }
  ul.ch-list.ch-list-column-a {
    display: block;
  }
  ul.ch-list.ch-list-column-a li {
  width: calc(100%);
    margin-bottom: 15px;
  }
	
  ul.ch-list.ch-list-thumb {
    gap: 10px;
  }
  ul.ch-list.ch-list-thumb li {
    width: calc((100% - 20px) / 3);
    margin: 0;
  }
  ul.ch-list.ch-list-thumb li a, ul.ch-list.ch-list-thumb li span {
    padding: 5px;
  }
  ul.ch-list.ch-list-img li {
    width: calc((100% - 10px) / 3);
  }
  ul.ch-list.ch-list-img li a::after {
    padding: 4px;
    font-size: 1rem;
    opacity: 1;
  }
  ul.ch-list li {
    width: 100%;
  }
  .ch .ch-speech {
    top: -176px;
    left: 45px;
    font-size: 20px;
  }
  .ch dl.ch-data dt {
    width: 100%;
  }
  .ch dl.ch-data dd {
    width: 100%;
  }
  .ch dl.ch-data.ch-data-column-1 dt {
    width: 40%;
  }
  .ch dl.ch-data.ch-data-column-1 dd {
    width: 60%;
  }
  .ch dl.ch-data.ch-data-column-2 dt {
    width: 30%;
  }
  .ch dl.ch-data.ch-data-column-2 dd {
    width: 20%;
  }
  .ch dl.ch-data.ch-data-column-a dt {
    width: 100%;
  }
  .ch dl.ch-data.ch-data-column-a dd {
    width: 100%;
  }

  .ch dl.ch-data.ch-data-column-3 dt, .ch dl.ch-data.ch-data-column-4 dt {
    width: 40%;
  }
  .ch dl.ch-data.ch-data-column-3 dd, .ch dl.ch-data.ch-data-column-4 dd {
    width: 60%;
  }
  .ch dl.ch-history.ch-history-nodt dd {
    width: 100%;
  }
  .ch dl.ch-history dt {
    width: 30%;
  }
  .ch dl.ch-history dd {
    width: 70%;
  }
  .ill.ill-thumbnail div {
    width: calc((100% - 20px) / 3);
    padding-top: calc((100% - 20px) / 3);
  }
  body#INDEX main {
    padding: 40px;
  }
  body#INDEX h1::after {
    margin: 20px auto;
    border-width: 20px;
  }
.bottom-right {
  position: absolute;
  bottom: 50px;
  right: 5px;
}

.bottom-right img{
  width: 100%/2;
　height: 100%/2;
  cursor: pointer;
}
.bottom-right:hover{
  box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
  transform: translateY(5px);
  transition-duration: 0.5s;
}
	
h3 {
    font-size: 2rem;
    margin-block: 50px;
    margin-inline: auto;
    padding-block: 0;
}
	h4 {
  position: relative;
	line-height: 1.5em;
  width: 90%;
  margin: 25px auto 15px;
  padding: 20px;
}
h1 img {
   max-width: 45%;
  height: auto;
}
	
ul.world li {
	margin-left: -30px;	
	margin-right: -5px;

	}
ul.ch-list.ch-list-img[data-group]::before {
  content: attr(data-group);
  position: absolute;
  top: -15px;
  left: -10px;
  display: block;
  width: 100%;
  color: var(--bg-color);
  font: 900 20px/1 "Zen Kaku Gothic New", "Yu Gothic", Meiryo, "Hiragino Kaku Gothic ProN", sans-serif;
  -webkit-text-stroke: 1px var(--theme-color3);
  text-stroke: 1px var(--theme-color3);
}


}

/* ----- ▲ レイアウト　ここまで ▲ ----- */