@charset "UTF-8";
/* design by tsugumi https://miroirs.stars.ne.jp/ */
/*
Copyright (c) 2022 by Goodkatz (https://codepen.io/goodkatz/pen/LYPGxQz)

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/
/* font import */
@font-face
{
font-family: チェックポイント;
src: url('https://cdn.leafscape.be/cpfont/CP_Font_web.woff2')
     format("woff2");
}
/* font import END */
/* resetcss */
/*
Copyright (c) 2021 tsugumi - https://miroirs.stars.ne.jp/
Released under the MIT license
https://licenses.opensource.jp/MIT/MIT.html

Copyright (c) 2010 Richard Clark - http://richclarkdesign.com
Released under the MIT license
https://licenses.opensource.jp/MIT/MIT.html
*/
*,
*::before,
*::after {
  vertical-align: baseline;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  box-sizing: border-box;
  background: transparent;
  font-size: 100%;
  outline: 0;
}

*::before,
*::after {
  content: none;
}

body {
  line-height: 1.5;
}

main {
  display: block;
}

[type="checkbox"],[type="radio"],[type="submit"],
button,select,option,label,summary {
  cursor: pointer;
}

input,button,textarea,select {
  font-family: inherit;
  font-size: 100%;
  letter-spacing: inherit;
  -webkit-appearance: none;
  appearance: none;
}

textarea {
  overflow-x: hidden;
  resize: vertical;
}

::placeholder {
  opacity: 1;
}

ul,ol {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote::before,blockquote::after,
q::before,q::after {
  content:'';
  content: none;
}

mark {
  color: #000;
  background-color: #ff9;
  font-weight: bold;
}

del {
  text-decoration: line-through;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

hr {
  display: block;
  height: 1px;
  border-top: 1px solid #000;
}
/* resetcss END */
/* firefox only */
@-moz-document url-prefix() {
  body {
    overflow-wrap: break-word;
  }
}
/* firefox only END */
/* root */
:root {
  --base-color: #fff;
  --main-color: #211572;
  --sub-color: #24bddf;
  --accent-color: #fffdbb;
  --strong-color: #de235f;
  --selection-color: rgba(36, 189, 223, .5);
  --white-color: #fff;
  --body-font: 'Montserrat', "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  --title-font: 'Aclonica', "チェックポイント", "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  --headline-font: 'Sacramento', "M PLUS Rounded 1c", "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
/* root END */
/* scrollbar */
::-webkit-scrollbar {
  width: 4px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background: var(--main-color);
}

html {
  scrollbar-color: var(--main-color) transparent;
  scrollbar-width: thin;
}
/* scrollbar END */
/* selection */
::selection {
  background: var(--selection-color);
}
/* selection END */
/* body */
body {
  position: relative;
  line-height: 1.8;
  color: var(--main-color);
  background: var(--white-color);
  font-family: var(--body-font);
  font-size: 11px;
  text-align: justify;
  letter-spacing: .2em;
  word-break: break-all;
}
/* body END */
/* headline */
h1 {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 0 auto 16px;
  padding: 16px;
  border: 4px solid var(--white-color);
  font-family: var(--title-font);
  font-weight: normal;
  font-size: 32px;
  letter-spacing: 4px;
}

h1::before {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: -1;
  width: 100%;
  height: 100%;
  background: var(--sub-color);
  content: '';
}

h1::after {
  position: absolute;
  top: -16px;
  left: -16px;
  z-index: -2;
  width: 100%;
  height: 100%;
  -webkit-clip-path: polygon(100% 0, 0 0, 0 100%);
  clip-path: polygon(100% 0, 0 0, 0 100%);
  background-image: radial-gradient(var(--white-color) 8%, transparent 13%),radial-gradient(var(--white-color) 8%, transparent 13%);
  background-position: 0 0, 11px 11px;
  background-size: 22px 22px;
  content: '';
}

h2,
h3,
h4,
h5,
h6 {
  margin: 16px 0;
  font-family: var(--headline-font);
}

h2 {
  position: relative;
  line-height: 1.25;
  padding: 0 0 4px 4px;
  font-size: 20px;
  text-transform: capitalize;
}

h2::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  margin: auto;
  border-radius: 4px;
  background: var(--main-color);
  content: '';
}

h3 {
  display: flex;
  align-items: center;
  font-size: 18px;
}

h3::after {
  flex-grow: 1;
  margin-left: 8px;
  border-top: 4px dotted var(--main-color);
  content: '';
}

h4 {
  display: table;
  padding: 0 8px;
  border: 2px solid var(--main-color);
  box-shadow: 4px 4px 0 0 var(--main-color);
  font-size: 16px;
}

h5 {
  padding-left: 8px;
  border-left: 4px solid var(--main-color);
  font-size: 14px;
}

h6 {
  display: table;
  border-bottom: 2px dotted var(--main-color);
  font-size: 12px;
}
/* headline END */
/* text decoration */
a {
  color: var(--sub-color);
  text-decoration: none;
}

strong {
  color: var(--strong-color);
}

em {
  border-bottom: 1px dashed;
}

mark {
  display: inline-block;
  line-height: 1;
  padding: 0 4px;
  background: var(--accent-color);
}

[data-ruby] {
  position: relative;
}

[data-ruby]::before {
  position: absolute;
  right: -3em;
  bottom: 105%;
  left: -3em;
  line-height: 100%;
  margin: auto;
  font-size: .5em;
  text-align: center;
  letter-spacing: 1px;
  word-break: keep-all;
  content: attr(data-ruby);
  transform: scale(.75);
  transform-origin: bottom center;
}

ruby rt {
  display: none;
}

.subtext {
  opacity: .5;
}

.dot {
  -webkit-text-emphasis: filled var(--main-color);
  text-emphasis: filled var(--main-color);
}

.border-l {
  position: relative;
  margin-right: 8px;
  padding-left: 8px;
}

.border-l::after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  height: 100%;
  margin: auto;
  border-radius: 4px;
  background: var(--main-color);
  content: '';
}

.border-r {
  position: relative;
  margin-right: 8px;
  padding-right: 8px;
}

.border-r::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 4px;
  height: 100%;
  margin: auto;
  border-radius: 4px;
  background: var(--main-color);
  content: '';
}

.border-a {
  position: relative;
  margin-right: 40px;
}

.border-a::after {
  position: absolute;
  top: 0;
  right: -30px;
  bottom: 0;
  width: 24px;
  height: 4px;
  margin: auto;
  border-top: 2px dotted var(--main-color);
  content: '';
}

.marker {
  background: linear-gradient(transparent 60%, var(--accent-color) 60%);
}

.btn {
  display: inline-block;
  padding: 0 8px;
  border: 2px solid var(--main-color);
  border-bottom: 4px solid var(--main-color);
  background: var(--white-color);
}
/* text decoration END */
/* align */
.left {
  text-align: left;
}

.center {
  text-align: center;
}

.right {
  text-align: right;
}
/* align END */
/* separator */
hr {
  height: 1px;
  border-top: 4px dotted var(--main-color);
}
/* line END */
/* box */
.box {
  margin: 16px auto;
  padding: 8px;
  border: 2px solid var(--main-color);
  box-shadow: 4px 4px 0 0 var(--main-color);
}
/* box END */
/* details */
details summary {
  display: inline-block;
  border-bottom: 2px dotted var(--main-color);
}

details summary::marker,
details summary::-webkit-details-marker {
  display: none;
}

details[open] summary::before {
  transform: rotate(90deg);
}

details summary::before {
  display: inline-block;
  margin-right: 4px;
  color: var(--text-color);
  font-family: 'Font Awesome 5 Free';
  font-weight: bold;
  content: '\f0da';
  transition: .3s;
}

details[open] .details-contents {
  animation: fadeIn 2s ease;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(-16px);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

.details-contents {
  padding: 8px 0;
}
/* details END */
/* list */
.ol-column,
.ol-row,
.ul-row,
.ul-column,
.dl-banner,
.dl-row,
.dl-column {
  padding: 16px 0;
}

.ol-row,
.ul-row {
  display: flex;
  flex-wrap: wrap;
}

.ol-row,
.ol-column {
  counter-reset: number;
  list-style-type: none;
}

.ol-row li {
  position: relative;
  width: 20%;
  height: 32px;
  line-height: 32px;
  margin-bottom: 8px;
  text-align: center;
}

.ol-row li::after,
.ol-column li::after {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 0;
  width: 24px;
  height: 24px;
  line-height: 24px;
  margin: auto;
  color: var(--white-color);
  text-align: center;
  content: counter(number);
  counter-increment: number;
}

.ol-row li::after {
  right: 0;
  left: 0;
}

.ol-column li::after {
  left: 4px;
}

.ol-row li::before,
.ol-column li::before {
  position: absolute;
  z-index: 0;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--main-color);
  content: '';
}

.ol-row li::before {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

.ol-column li::before {
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

.ol-row li a {
  display: block;
  position: absolute;
  right: 0;
  left: 0;
  z-index: 1;
  width: 32px;
  height: 32px;
  margin: auto;
}

.ol-column li {
  position: relative;
  line-height: 32px;
  margin-bottom: 8px;
  padding-left: 38px;
}

.ul-row,
.ul-column {
  list-style-type: disc;
}

.ul-row li,
.ul-column li {
  margin-left: 16px;
}

.dl-row dt {
  position: relative;
  float: left;
  margin-right: 4px;
  padding: 0 2px 2px;
}

.dl-row dt::after {
  display: inline-block;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  margin: auto;
  padding: 0 4px;
  background: var(--main-color);
  content: '';
}

.dl-row dd {
  padding-bottom: 4px;
}

.dl-column dt::before {
  display: inline-block;
  width: 4px;
  height: 4px;
  vertical-align: middle;
  margin-right: 8px;
  border: 1px solid var(--main-color);
  border-radius: 50%;
  content: '';
}

.dl-column dd {
  margin-left: 12px;
}

.dl-banner dt {
  display: table;
  position: relative;
  text-align: center;
}

.banner-title:hover + .banner,
a .banner:hover {
  filter: brightness(125%);
}

.banner {
  display: block;
  width: 200px;
  height: 40px;
  border-radius: 8px;
  object-fit: cover;
}

.dl-banner dd {
  margin-bottom: 16px;
  padding: 8px 0 8px 8px;
  border-left: 2px dotted var(--main-color);
}

.banner-title {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
  line-height: 40px;
  margin: auto;
  color: var(--white-color);
  font-weight: bold;
  text-decoration: none;
}
/* list END */
/* form */
form {
  max-width: 400px;
  margin: auto;
  padding: 16px;
}

input,
textarea,
select {
  display: inline-block;
  line-height: inherit;
  padding: 8px;
  border-bottom: 2px solid var(--main-color);
  color: var(--main-color);
  font-family: 'Font Awesome 5 Free', var(--body-font);
  text-align: justify;
}

[type="submit"] {
  width: 40px;
  border: 2px solid var(--main-color);
  border-bottom: 4px solid var(--main-color);
  text-align: center;
}

.form-namechange [type="text"] {
  display: inline-block;
  width: calc(50% - 30px);
  margin: 8px auto;
}

.form-clap [type="text"],
.form-clap select {
  width: calc(100% - 48px);
}
/* form END */
/* semantic elements */
header {
  position: relative;
  z-index: 0;
  height: 400px;
  padding: 64px 32px;
  color: var(--white-color);
  background: var(--main-color);
}

aside {
  position: relative;
  z-index: 10;
  width: 200px;
  margin: 32px auto;
}

main {
  position: relative;
}

section {
  width: calc(100% - 32px);
  max-width: 560px;
  margin: 32px auto;
}

article {
  position: relative;
  max-width: 520px;
  line-height: 2;
  margin: 0 auto;
  padding: 32px;
  user-select: none;
}

footer {
  line-height: 2;
  padding: 32px 0;
  text-align: center;
}
/* semantic elements END */
/* novel parts */
/* wave animation */
.waves {
  position: relative;
  top: -39px;
  width: 100%;
  height: 40px;
  min-height: 40px;
  margin-bottom: -7px;
}

.parallax > use {
  animation: move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite;
}

.parallax > use:nth-child(1) {
  animation-duration: 7s;
  animation-delay: -2s;
}

.parallax > use:nth-child(2) {
  animation-duration: 10s;
  animation-delay: -3s;
}

.parallax > use:nth-child(3) {
  animation-duration: 13s;
  animation-delay: -4s;
}

.parallax > use:nth-child(4) {
  animation-duration: 20s;
  animation-delay: -5s;
}

@keyframes move-forever {
  0% {
    transform: translate3d(-90px,0,0);
  }
  100% {
    transform: translate3d(85px,0,0);
  }
}
/* wave animation END */
aside a {
  display: block;
  margin-top: 8px;
  padding-left: 8px;
  border-left: 4px solid var(--white-color);
  color: var(--white-color);
}

.card-wrapper {
  display: flex;
  flex-wrap: wrap;
}

.card-item {
  width: 50%;
  padding: 0 4px 32px;
  text-align: center;
}

.card-img {
  width: 100px;
  height: 100px;
  border-radius: 16px;
  object-fit: cover;
}

.afterword {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 2px dotted var(--main-color);
}

.ul-pager {
  text-align: center;
}

.ul-pager li {
  display: inline-block;
  padding: 0 8px;
  text-transform: uppercase;
}
/* novel parts END */
/* more than 768px */
@media screen and (min-width: 768px) {
  .waves {
    top: -100px;
    height: 100px;
  }

  .flex-wrapper {
    display: flex;
    max-width: 768px;
    flex-wrap: wrap;
    justify-content: space-around;
    margin: auto;
  }

  .flex-item {
    width: calc(50% - 32px);
  }
}
/* more than 768px END */