@charset "UTF-8";
@-webkit-keyframes blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
@keyframes blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
:where(*) {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 0;
  margin: 0;
}

:where(html) {
  font-family: var(--font_family);
  font-size: var(--font_size);
  line-height: var(--line_height);
  color: rgba(var(--color_text), 1);
  background-color: rgba(var(--color_back), 1);
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

:where(body) {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  min-height: 100vh;
  background: -webkit-gradient(linear, left top, right top, from(rgba(var(--color_main), 0.25)), to(rgba(var(--color_sub), 0.25)));
  background: linear-gradient(90deg, rgba(var(--color_main), 0.25), rgba(var(--color_sub), 0.25));
  position: relative;
}

:where(main) {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  max-width: 800px;
  width: 100%;
  margin: calc(60px + 1em) auto 0;
}
:where(main) a {
  color: rgba(var(--color_link), 1);
}

:where(article) {
  background: rgba(var(--color_cont), 0.5);
  border-radius: 5px;
}

:where(header) {
  width: 100%;
}

:where(footer) {
  width: 100%;
}

:where(article) > section + section {
  margin-top: 5em;
}

:where(h1) {
  font-weight: bold;
  line-height: 1.25;
  padding: 0.25em 0.5em;
  margin: 0 auto 0.5em;
}

:where(h2) {
  font-weight: bold;
  line-height: 1.25;
  padding: 0.25em 0.5em;
  margin: 0 auto 0.5em;
}

:where(h3) {
  font-weight: bold;
  line-height: 1.25;
  padding: 0.25em 0.5em;
  margin: 0 auto 0.5em;
}

:where(h4) {
  font-weight: bold;
  line-height: 1.25;
  padding: 0.25em 0.5em;
  margin: 0 auto 0.5em;
}

:where(h5) {
  font-weight: bold;
  line-height: 1.25;
  padding: 0.25em 0.5em;
  margin: 0 auto 0.5em;
}

h1 + ul, h1 + ol, h1 + dl, h1 + table {
  margin-top: 0;
}

h2 + ul, h2 + ol, h2 + dl, h2 + table {
  margin-top: 0;
}

h3 + ul, h3 + ol, h3 + dl, h3 + table {
  margin-top: 0;
}

h4 + ul, h4 + ol, h4 + dl, h4 + table {
  margin-top: 0;
}

h5 + ul, h5 + ol, h5 + dl, h5 + table {
  margin-top: 0;
}

:where(p + p) {
  margin-top: 1em;
}

:where(ul, ol) {
  max-width: 100%;
  list-style-type: none;
}

:where(main) ul, :where(main) ol {
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  margin: 3rem 0;
}
:where(main) ul li + li, :where(main) ol li + li {
  margin-top: 1em;
}
:where(main) ul li, :where(main) ol li {
  padding-left: 1em;
  position: relative;
}
:where(main) ul li::before, :where(main) ol li::before {
  content: "";
  display: inline;
  position: absolute;
  inset: 0 auto auto 0;
}

:where(main) ul li::before {
  content: "・";
}

:where(main) ol {
  counter-reset: count;
}
:where(main) ol li {
  counter-increment: count;
}
:where(main) ol li:before {
  content: counter(count) ".";
  padding-right: 0.25em;
}

:where(main dl) {
  max-width: 100%;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  margin: 3rem 0;
}
:where(main dl) dt {
  max-width: 100%;
  font-weight: bold;
  white-space: nowrap;
}
:where(main dl) dd {
  padding-left: 1em;
}

:where(main table) {
  max-width: 100%;
  min-width: 300px;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  border: none;
  border-collapse: collapse;
  border-radius: 5px;
  overflow: hidden;
  margin: 3rem auto;
}
:where(main table) caption {
  font-weight: bold;
  line-height: 2.5;
  background-color: rgba(var(--color_text), 0.75);
  color: rgba(var(--color_back), 1);
}
:where(main table) tr:nth-of-type(odd) {
  background-color: rgba(var(--color_text), 0.2);
}
:where(main table) tr:nth-of-type(even) {
  background-color: rgba(var(--color_text), 0.1);
}
:where(main table) th {
  white-space: nowrap;
  text-align: left;
  vertical-align: top;
}
:where(main table) td * + ul, :where(main table) td * + ol {
  margin-top: 1em;
}
:where(main table) ul, :where(main table) ol {
  width: 100%;
  margin: 0;
}

:where(hr) {
  display: block;
  width: 100px;
  height: 5px;
  background: -webkit-gradient(linear, left top, right top, from(rgba(var(--color_main), 1)), to(rgba(var(--color_sub), 1)));
  background: linear-gradient(90deg, rgba(var(--color_main), 1), rgba(var(--color_sub), 1));
  border: none;
  margin: 3em auto;
}

:where(img) {
  display: block;
  height: auto;
  width: 100%;
  border-radius: 5px;
  margin: 0 auto;
}

:where(video) {
  display: block;
  max-width: 100%;
  max-height: 75vh;
  border-radius: 5px;
  margin: 0 auto;
}

:where(svg) {
  width: 100%;
  height: 100%;
  fill: currentColor;
  font-size: inherit;
}

:where(form) > div {
  padding-bottom: 1.25em;
}
:where(form) > div + div {
  margin-top: 1em;
}
:where(form) > div > label {
  display: block;
  font-weight: bold;
}
:where(form) .error {
  display: none;
  color: #dd0000;
  font-size: 0.8em;
  white-space: nowrap;
  position: absolute;
}
:where(form) .error::before {
  content: "※";
}
:where(form) .error.on {
  display: block;
}
:where(form) textarea {
  min-height: 100px;
  resize: vertical;
}
:where(form) input:not([type=checkbox], [type=radio]), :where(form) select, :where(form) textarea {
  margin-top: 0.25em;
}

:where(input:not([type=checkbox], [type=radio]), select, textarea) {
  width: 100%;
  line-height: 2;
  font-family: var(--font_family);
  border: none;
  border-radius: 2px;
  -webkit-box-shadow: 0 0 0 1px rgba(var(--color_text), 0.5);
          box-shadow: 0 0 0 1px rgba(var(--color_text), 0.5);
  background: rgba(255, 255, 255, 0.75);
  padding: 0.5em;
}
:where(input:not([type=checkbox], [type=radio]), select, textarea):focus {
  outline: none;
  -webkit-box-shadow: 0 0 0 1px rgba(var(--color_main), 1);
          box-shadow: 0 0 0 1px rgba(var(--color_main), 1);
}
:where(input:not([type=checkbox], [type=radio]), select, textarea)::-webkit-input-placeholder {
  font-family: var(--font_family);
  color: rgba(var(--color_text), 0.25);
}
:where(input:not([type=checkbox], [type=radio]), select, textarea)::-moz-placeholder {
  font-family: var(--font_family);
  color: rgba(var(--color_text), 0.25);
}
:where(input:not([type=checkbox], [type=radio]), select, textarea):-ms-input-placeholder {
  font-family: var(--font_family);
  color: rgba(var(--color_text), 0.25);
}
:where(input:not([type=checkbox], [type=radio]), select, textarea)::-ms-input-placeholder {
  font-family: var(--font_family);
  color: rgba(var(--color_text), 0.25);
}
:where(input:not([type=checkbox], [type=radio]), select, textarea)::placeholder {
  font-family: var(--font_family);
  color: rgba(var(--color_text), 0.25);
}

:where(input[type=checkbox], input[type=radio]) {
  width: 1em;
  height: 1em;
}

@media (width > 767px) {
  :where(main) {
    padding: 3rem 1rem;
  }
  :where(main) a:not(.button) {
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
  }
  :where(main) a:not(.button):hover {
    opacity: 0.5;
  }
  :where(article) {
    padding: 2rem 2rem 3rem;
  }
  :where(main dl) {
    display: grid;
    grid-template-columns: auto 1fr;
    row-gap: 2em;
  }
  :where(main table) th {
    padding: 1.5em 1em;
  }
  :where(main table) td {
    padding: 1.5em 1em;
  }
  :where(h1) {
    font-size: 2rem;
  }
  :where(h2) {
    font-size: 1.75rem;
  }
  :where(h3) {
    font-size: 1.5rem;
  }
  :where(h4) {
    font-size: 1.25rem;
  }
  :where(h5) {
    font-size: 1rem;
  }
  :where(form) > div {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
}
@media (width < 768px) {
  :where(main) {
    padding: 2rem 0.5rem;
  }
  :where(article) {
    padding: 1rem 0.5rem 1.5rem;
  }
  :where(main dl) dt {
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
  }
  :where(main dl) dt:not(:first-of-type) {
    margin-top: 2em;
  }
  :where(main table) tr {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  :where(main table) th {
    padding: 1em 1em 0.25em 1em;
    position: relative;
  }
  :where(main table) td {
    padding: 0.25em 1em 1em 1em;
  }
  :where(h1) {
    font-size: 1.8rem;
  }
  :where(h2) {
    font-size: 1.6rem;
  }
  :where(h3) {
    font-size: 1.4rem;
  }
  :where(h4) {
    font-size: 1.2rem;
  }
  :where(h5) {
    font-size: 1rem;
  }
  :where(form) > div {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}
header .wrap, footer .wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
header a, footer a {
  color: rgba(var(--color_lumi), 1);
  text-decoration: none;
}
header nav ul, footer nav ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.header_nav .menu li, .footer_nav .menu li {
  padding-left: 0.75em;
}
.header_nav .menu li.current, .footer_nav .menu li.current {
  color: rgba(var(--color_lumi), 1);
  position: relative;
}
.header_nav .menu li.current::before, .footer_nav .menu li.current::before {
  content: "\f0da";
  display: inline-block;
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  position: absolute;
  top: 0;
  left: 0;
}
.header_nav .menu li.current a, .footer_nav .menu li.current a {
  cursor: default;
}

html.public header .wrap {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

html.member header .wrap {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

header {
  position: fixed;
  inset: 0 0 auto 0;
  background: -webkit-gradient(linear, left top, right top, from(rgba(var(--color_main), 1)), to(rgba(var(--color_sub), 1)));
  background: linear-gradient(90deg, rgba(var(--color_main), 1), rgba(var(--color_sub), 1));
  z-index: 9998;
}

#logo {
  display: block;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
}
#logo img {
  height: 60px;
  -webkit-filter: brightness(0) invert(var(--color_logo));
          filter: brightness(0) invert(var(--color_logo));
}

#sp_menu {
  display: none;
}

[for=sp_menu] {
  width: 48px;
  height: 48px;
  color: rgba(var(--color_lumi), 1);
}

footer {
  font-size: 0.8rem;
  background: -webkit-gradient(linear, left top, right top, from(rgba(var(--color_main), 0.75)), to(rgba(var(--color_sub), 0.75)));
  background: linear-gradient(90deg, rgba(var(--color_main), 0.75), rgba(var(--color_sub), 0.75));
}

.sns_nav .menu {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-column-gap: 1em;
     -moz-column-gap: 1em;
          column-gap: 1em;
}
.sns_nav .menu li a {
  display: block;
  width: 2em;
  height: 2em;
  color: rgba(var(--color_lumi), 1);
}

#copyright {
  display: block;
  font-size: 1em;
  line-height: 3;
  color: rgba(var(--color_lumi), 1);
  background: -webkit-gradient(linear, left top, right top, from(rgba(var(--color_main), 1)), to(rgba(var(--color_sub), 1)));
  background: linear-gradient(90deg, rgba(var(--color_main), 1), rgba(var(--color_sub), 1));
  text-align: center;
}

#totop {
  display: none;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: -webkit-gradient(linear, left top, right top, from(rgba(var(--color_main), 1)), to(rgba(var(--color_sub), 1)));
  background: linear-gradient(90deg, rgba(var(--color_main), 1), rgba(var(--color_sub), 1));
  mix-blend-mode: multiply;
  position: fixed;
  inset: auto 0.5em 2.5em auto;
  z-index: 9997;
  cursor: pointer;
}
#totop::before {
  content: "\f106";
  display: block;
  font-size: 2em;
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: rgba(var(--color_lumi), 1);
  text-align: center;
  line-height: 60px;
}

@media (width > 767px) {
  header {
    padding: 0.5em 2em;
  }
  [for=sp_menu] {
    display: none;
  }
  .header_nav .menu, .footer_nav .menu {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-column-gap: 1.25em;
       -moz-column-gap: 1.25em;
            column-gap: 1.25em;
  }
  .header_nav .menu li:not(.current) a, .footer_nav .menu li:not(.current) a {
    display: block;
    position: relative;
    overflow: hidden;
  }
  .header_nav .menu li:not(.current) a::after, .footer_nav .menu li:not(.current) a::after {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background-color: rgba(var(--color_lumi), 1);
    position: absolute;
    inset: auto 0 1px -100%;
    -webkit-transition: left 0.5s;
    transition: left 0.5s;
  }
  .header_nav .menu li:not(.current) a:hover::after, .footer_nav .menu li:not(.current) a:hover::after {
    left: 100%;
  }
  #logo:not([tabindex]) {
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
  }
  #logo:not([tabindex]):hover {
    opacity: 0.5;
  }
  .sns_nav, .footer_nav {
    margin: 2rem 1rem;
  }
  .sns_nav li a {
    opacity: 1;
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
  }
  .sns_nav li a:hover {
    opacity: 0.25;
  }
}
@media (width < 768px) {
  header {
    padding: 0.5em 1em;
  }
  #sp_menu:not(:checked) + [for=sp_menu] .svg_menu {
    display: block;
  }
  #sp_menu:not(:checked) + [for=sp_menu] .svg_close {
    display: none;
  }
  #sp_menu:checked + [for=sp_menu] .svg_menu {
    display: none;
  }
  #sp_menu:checked + [for=sp_menu] .svg_close {
    display: block;
  }
  #sp_menu:checked + [for=sp_menu] + .header_nav {
    height: calc(100vh - 60px - 1em);
  }
  .header_nav {
    height: 0;
    background: -webkit-gradient(linear, left top, right top, from(rgba(var(--color_main), 1)), to(rgba(var(--color_sub), 1)));
    background: linear-gradient(90deg, rgba(var(--color_main), 1), rgba(var(--color_sub), 1));
    position: absolute;
    inset: 100% 0 auto 0;
    -webkit-transition: height 0.5s ease-out;
    transition: height 0.5s ease-out;
    overflow: hidden;
  }
  .header_nav .menu {
    max-width: 100%;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    font-size: 1.2em;
    padding: 1em;
    margin: 0 auto;
  }
  .header_nav .menu, .footer_nav .menu {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    row-gap: 1em;
  }
  .sns_nav, .footer_nav {
    margin: 1.5rem 0.5rem;
  }
}
hr.separate_line {
  width: 100%;
  height: 1px;
  background: rgba(var(--color_text), 0.1);
  margin: 0.5em 0;
}

.grecaptcha-badge {
  display: none;
}

form #infomation {
  text-align: center;
  margin-top: 1.5em;
  height: 1em;
  -webkit-transition: color 0.3s ease;
  transition: color 0.3s ease;
  position: relative;
}
form #infomation:not(.red) {
  color: transparent;
}
form #infomation.red {
  -webkit-animation: blink 1.5s infinite ease-in-out;
          animation: blink 1.5s infinite ease-in-out;
}

form .hpfield {
  width: 1px;
  height: 1px;
  position: absolute;
  left: -10000px;
  top: auto;
  overflow: hidden;
}

.small {
  font-size: 0.8em;
}

.note {
  font-size: 0.8em;
  padding-left: 1.25em;
  position: relative;
}
.note::before {
  content: "※";
  position: absolute;
  inset: 0 auto auto 0;
}

.select {
  -webkit-user-select: auto;
     -moz-user-select: auto;
      -ms-user-select: auto;
          user-select: auto;
  cursor: pointer;
}

.red {
  color: #dd0000;
}

.marker {
  background: rgba(221, 0, 0, 0.1);
}

.logo {
  max-width: 300px;
  margin: 0 auto 1em;
}

.box {
  border-radius: 5px;
  -webkit-box-shadow: 0 0 0 1px rgba(var(--color_text), 1);
          box-shadow: 0 0 0 1px rgba(var(--color_text), 1);
}

.center {
  margin: 3rem auto;
}

.centering {
  max-width: 100%;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  margin: 3rem auto;
}

.row_center {
  max-width: 100%;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  margin: 0 auto;
}

.text_center {
  text-align: center;
}

.eyecatch {
  margin: 1em auto;
}

.look {
  display: block;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  max-width: 100%;
  text-align: center;
  color: #dd0000;
  font-weight: bold;
  position: relative;
  margin: 0 auto 1em;
  -webkit-animation: blink 1.5s linear infinite;
          animation: blink 1.5s linear infinite;
}
.look::before, .look::after {
  content: "";
  display: block;
  width: 1em;
  height: 1em;
  position: absolute;
  top: 0.5em;
}
.look::before {
  border-top: solid 2px #dd0000;
  left: -1.5em;
  -webkit-transform: rotate(60deg);
          transform: rotate(60deg);
}
.look::after {
  border-top: solid 2px #dd0000;
  right: -1.5em;
  -webkit-transform: rotate(-60deg);
          transform: rotate(-60deg);
}

[data-look] {
  position: relative;
}
[data-look]::before {
  content: "\\ " attr(data-look) " /";
  display: block;
  font-size: 0.8em;
  font-weight: bold;
  color: #dd0000;
  white-space: nowrap;
  position: absolute;
  top: -60%;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  -webkit-animation: blink 1.5s linear infinite;
          animation: blink 1.5s linear infinite;
}

.wrap {
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
}

.compact {
  max-width: 500px;
  margin: 0 auto;
}

.sign {
  text-align: right;
  margin-top: 3em;
}

.break {
  display: inline-block;
}

h1.title {
  text-align: center;
}

h2.title span {
  font-size: 0.7em;
}
h2.title {
  padding-bottom: 0.5em;
  margin-bottom: 0.5em;
}
h2.title::after {
  width: 100%;
  height: 2px;
  background: -webkit-gradient(linear, left top, right top, from(rgba(var(--color_main), 1)), to(rgba(var(--color_sub), 1)));
  background: linear-gradient(90deg, rgba(var(--color_main), 1), rgba(var(--color_sub), 1));
  inset: auto 0 0 0;
}

h3.title {
  padding: 0 0.5em;
  margin-top: 2em;
}
h3.title::after {
  width: 5px;
  height: 1em;
  background: rgba(var(--color_main), 1);
  inset: 50% auto 0 0;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

h4.title {
  margin-top: 2em;
}

h2.title, h3.title {
  position: relative;
}
h2.title::after, h3.title::after {
  content: "";
  display: block;
  position: absolute;
}

.button {
  display: block;
  max-width: 100%;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  font-family: var(--font_family);
  font-size: 1rem;
  color: rgba(var(--color_text), 1);
  background-color: transparent;
  border: none;
  border-radius: 2px;
  -webkit-box-shadow: 0 0 0 1px rgba(var(--color_text), 1);
          box-shadow: 0 0 0 1px rgba(var(--color_text), 1);
  padding: 0.5rem 1.5rem;
  cursor: pointer;
  -webkit-transition: background 0.5s;
  transition: background 0.5s;
  text-decoration: none;
}
.button:hover {
  background: rgba(var(--color_main), 0.5);
}
.button:disabled {
  pointer-events: none;
  opacity: 0.25;
}

.link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  row-gap: 2em;
  font-size: 0.8em;
  margin-top: 2em;
}

.caution {
  font-size: 0.8em;
  color: #dd0000;
  text-align: center;
  margin-bottom: 2em;
}
.caution::before {
  content: "※";
}

.inputbox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-column-gap: 0.5em;
     -moz-column-gap: 0.5em;
          column-gap: 0.5em;
}

#copied {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(var(--color_back), 0.95);
  z-index: 9999;
}
#copied p {
  line-height: 100vh;
  text-align: center;
}

.form_row {
  margin-top: 0.25em;
}
.form_row > label {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 0.9em;
}
.form_row > label > input {
  margin-right: 0.25em;
}
.form_row > label + label {
  margin-top: 0.5em;
}

form .re {
  position: relative;
}
form .re::after {
  content: " *";
  color: #dd0000;
}

.task {
  margin: 3em 0;
}

.explain_open input {
  display: none;
}
.explain_open input:checked + dd p {
  display: block;
}
.explain_open label {
  cursor: pointer;
}
.explain_open p {
  display: none;
  font-size: 0.8em;
  border-top: solid 1px rgba(var(--color_text), 0.5);
  padding-top: 1em;
  margin-top: 1em;
}

@media (width > 767px) {
  .box {
    padding: 1rem;
  }
}
@media (width < 768px) {
  .box {
    padding: 1rem 0.5rem;
  }
}
#die {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background: rgba(var(--color_back), 1);
  position: fixed;
  inset: 0;
  z-index: 10000;
}
#die h1 {
  max-width: 100%;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  margin: 0 auto 1em;
}
#die .inner {
  max-width: 100%;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
}

@media (width > 767px) {
  #die {
    padding: 3rem 1rem;
  }
}
@media (width < 768px) {
  #die {
    padding: 2rem 0.5rem;
  }
}
body.top #title img {
  max-height: 120px;
  width: auto;
  margin: 0 auto;
  mix-blend-mode: multiply;
}
body.top h1.title {
  position: relative;
}
body.top h1.title::after {
  content: attr(data);
  display: block;
  font-size: 15px;
}
body.top h2.title {
  text-align: center;
}
body.top #visual {
  position: relative;
}
body.top #visual::before {
  content: "";
  display: block;
  background: -webkit-gradient(linear, left top, right top, from(rgba(var(--color_main), 1)), to(rgba(var(--color_sub), 1)));
  background: linear-gradient(90deg, rgba(var(--color_main), 1), rgba(var(--color_sub), 1));
  position: absolute;
  inset: 0;
  mix-blend-mode: overlay;
  opacity: 0.25;
}
body.top .concept {
  max-width: 100%;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  color: rgba(var(--color_lumi), 1);
  background: -webkit-gradient(linear, left top, right top, from(rgba(var(--color_main), 1)), to(rgba(var(--color_sub), 1)));
  background: linear-gradient(90deg, rgba(var(--color_main), 1), rgba(var(--color_sub), 1));
  border-radius: 2px;
  padding: 0.25em 1em;
  margin: 1rem auto 3em;
}
body.top .center {
  max-width: 100%;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
}
body.top section + section {
  margin-top: 3em;
}

body.archive main ul li,
body.category main ul li {
  border-radius: 5px;
  overflow: hidden;
  padding: 0;
}
body.archive main ul li::before,
body.category main ul li::before {
  content: "";
}
body.archive main ul li[data] a::before,
body.category main ul li[data] a::before {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: end;
  width: 60px;
  height: 60px;
  font-size: 0.8rem;
  position: absolute;
  inset: -30px -30px auto auto;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
body.archive main ul li[data=viewed] a::before,
body.category main ul li[data=viewed] a::before {
  content: "済";
  color: rgba(var(--color_lumi), 1);
  background: rgba(var(--color_text), 0.5);
}
body.archive main ul li[data=viewing] a::before,
body.category main ul li[data=viewing] a::before {
  content: "続";
  color: rgba(var(--color_text), 1);
  background: rgba(var(--color_lumi), 0.5);
}
body.archive main ul li a,
body.category main ul li a {
  display: block;
  color: rgba(var(--color_lumi), 1);
  text-decoration: none;
  white-space: nowrap;
}

body.archive main ul li a {
  max-width: 100%;
  width: 300px;
  font-size: 1.5em;
  background: -webkit-gradient(linear, left top, right top, from(rgba(var(--color_main), 1)), to(rgba(var(--color_sub), 1)));
  background: linear-gradient(90deg, rgba(var(--color_main), 1), rgba(var(--color_sub), 1));
  text-align: center;
  padding: 0.5em 1em;
}

body.category main ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  row-gap: 1em;
  -webkit-column-gap: 1em;
     -moz-column-gap: 1em;
          column-gap: 1em;
}
body.category main ul li {
  margin: 0;
}
body.category main ul li a::after {
  content: attr(data);
  position: absolute;
  inset: auto 0 0 0;
  background: rgba(0, 0, 0, 0.5);
  -webkit-transition: background 0.5s;
  transition: background 0.5s;
  padding: 0.25em 1em;
}

@media (width > 767px) {
  body.category main ul {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
  body.category main ul li {
    width: 40%;
  }
}
@media (width < 768px) {
  body.category main ul {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
body.post section:first-type {
  margin-top: 1em;
}
body.post #avoid {
  display: none;
}
body.post .video + .video {
  margin-top: 3em;
}
body.post form .viewed {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: end;
}
body.post form .viewed label {
  min-width: auto;
}
body.post form #submit {
  display: none;
}
body.post .pagenation ul {
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-column-gap: 5em;
     -moz-column-gap: 5em;
          column-gap: 5em;
  margin: 5em auto 0;
}
body.post .pagenation ul li {
  padding: 0;
  margin: 0;
}
body.post .pagenation ul li::before {
  content: "";
}
body.post .pagenation ul li a {
  font-size: 2rem;
  color: rgba(var(--color_text), 1);
  text-decoration: none;
}
body.post .pagenation ul li a[tabindex] {
  opacity: 0.25;
}
body.post .pagenation ul li a::before {
  content: "";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
}
body.post .pagenation ul li:first-child a::before {
  content: "\f053";
}
body.post .pagenation ul li:last-child a::before {
  content: "\f054";
}

body.public .text {
  margin-top: 1em;
}

body.thanks .compact img {
  max-width: 50%;
  margin: 3rem auto 0;
}

body.invitation .caption_img {
  max-width: 300px;
  margin: 0.5em auto;
}
body.invitation .caption_img + p {
  margin-top: 3em;
}
body.invitation ol {
  margin: 2em 0;
}

.lock_input {
  display: block;
  max-width: 300px;
  margin: 0.5em auto;
}

.lock_error {
  min-height: 1.5em;
  font-size: 0.8em;
  color: #dd0000;
  text-align: center;
  margin-top: 1em;
}