@charset "UTF-8";
/* CSS Document */
.flow h2, .about h2, .reading h2, .deposit h2, .form h2, .reward h2 {
  position: relative;
  padding: .5em .7em;
  margin: 0 auto 40px;
  background-color: #1579c0;
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, 游ゴシック体, YuGothic, "游ゴシック Medium", "Yu Gothic Medium", 游ゴシック, "Yu Gothic", Verdana, メイリオ, Meiryo, sans-serif; }
  .flow h2::before, .about h2::before, .reading h2::before, .deposit h2::before, .form h2::before, .reward h2::before {
    position: absolute;
    top: 100%;
    left: 0;
    border-bottom: solid 10px transparent;
    border-right: solid 20px #0569b0;
    content: ''; }

.flow .dialog button, .flow .dialog dialog button {
  background-color: #f27600;
  color: #fff;
  border-radius: 100px;
  box-shadow: 2px 2px 2px #999; }

.lost-nuigurumi .link a {
  background-color: #f27600; }

section p {
  width: min(100%, 800px);
  margin: 0 auto; }
section img {
  width: min(90%, 640px);
  margin: 40px auto 0;
  border-radius: 1rem;
  display: block; }
section h3 {
  margin: 40px auto 10px; }

.summary {
  padding: 40px 1em 0; }
  .summary h2 {
    text-align-last: center; }
  .summary > p {
    width: min(90%, 720px);
    font-size: 1.2rem;
    margin: 24px auto 0; }
    @media screen and (max-width: 768px) {
      .summary > p {
        font-size: 1rem; } }
  .summary__photo {
    width: min(100%, 880px);
    display: flex;
    justify-content: space-between;
    column-gap: 1em;
    border: 3px dotted;
    border-radius: 16px;
    background-color: #fff;
    padding: 1em;
    margin: 40px auto 0; }
    .summary__photo figure {
      width: min(100%, 400px); }
    .summary__photo figcaption {
      font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, 游ゴシック体, YuGothic, "游ゴシック Medium", "Yu Gothic Medium", 游ゴシック, "Yu Gothic", Verdana, メイリオ, Meiryo, sans-serif;
      text-align-last: center;
      color: #000;
      margin-top: 8px; }
      @media screen and (max-width: 600px) {
        .summary__photo figcaption {
          text-align-last: left;
          font-size: 12px; } }
    .summary__photo img {
      width: 100%;
      margin: 0; }

.flow-index {
  border: 1px solid var(--base-color02);
  margin: 40px auto;
  padding: 1rem;
  width: min(90%, 600px);
  font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, 游ゴシック体, YuGothic, "游ゴシック Medium", "Yu Gothic Medium", 游ゴシック, "Yu Gothic", Verdana, メイリオ, Meiryo, sans-serif; }
  .flow-index h2 {
    text-align: center; }
  .flow-index .note {
    text-align: center;
    color: var(--base-color02); }
  .flow-index li {
    list-style-position: inside;
    list-style-type: decimal; }
    .flow-index li a {
      font-size: 16px;
      line-height: 2; }

.flow .dialog {
  background-color: var(--base-color01);
  padding: 1rem;
  font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, 游ゴシック体, YuGothic, "游ゴシック Medium", "Yu Gothic Medium", 游ゴシック, "Yu Gothic", Verdana, メイリオ, Meiryo, sans-serif; }
  .flow .dialog h3 {
    text-align: center;
    margin: 1rem auto;
    display: block; }
  .flow .dialog button {
    text-align: center;
    padding: 5px 10px;
    margin: 1rem auto 0;
    display: block; }
  .flow .dialog dialog {
    padding: 0; }
    .flow .dialog dialog:modal {
      background-color: rgba(0, 0, 0, 0); }
    .flow .dialog dialog::backdrop {
      background-color: rgba(0, 0, 0, 0.67); }
    .flow .dialog dialog img {
      width: min(100%, 640px);
      height: 90%;
      box-shadow: 2px 2px 2px #666; }
    .flow .dialog dialog button {
      width: 100px;
      text-align: center;
      padding: 5px 10px;
      margin: 1rem auto 0;
      display: block; }

.about figure {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4px;
  width: 100%;
  margin: 40px auto; }
  .about figure img {
    border: 2px solid var(--base-color02);
    width: 200px;
    height: auto; }
.about .link a {
  padding: 10px 40px; }

.reading ol {
  margin: 0 auto 50px; }
  .reading ol li {
    margin: 0 auto 50px; }
    .reading ol li figure {
      margin: 40px auto 50px; }
      .reading ol li figure img {
        width: min(100%, 480px);
        border: 2px solid #999;
        margin: 0 auto 20px; }
      .reading ol li figure figcaption {
        text-align: center;
        font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, 游ゴシック体, YuGothic, "游ゴシック Medium", "Yu Gothic Medium", 游ゴシック, "Yu Gothic", Verdana, メイリオ, Meiryo, sans-serif; }
      .reading ol li figure.portrait {
        margin: 40px auto 80px;
        position: relative; }
        .reading ol li figure.portrait::after {
          content: "";
          width: 0;
          height: 0;
          border-style: solid;
          border-right: 24px solid transparent;
          border-left: 24px solid transparent;
          border-top: 29px solid #1579c0;
          border-bottom: 0;
          position: absolute;
          left: calc(50% - 24px);
          bottom: -50px; }
        .reading ol li figure.portrait img {
          width: min(100%, 300px); }
    .reading ol li .store {
      margin: 0 auto;
      display: table; }
      .reading ol li .store li {
        vertical-align: middle; }
        .reading ol li .store li:first-child {
          margin-bottom: 20px; }
        .reading ol li .store li .badge {
          display: inline-block;
          vertical-align: text-bottom;
          width: min(100%, 100px);
          height: auto;
          margin: 0 20px 0 0;
          border-radius: inherit;
          vertical-align: middle; }
        .reading ol li .store li .open_window {
          width: 20px;
          height: auto;
          border-radius: inherit;
          display: inline;
          margin: 0;
          vertical-align: sub; }
.reading .gif {
  width: min(100%, 320px); }
.reading .note {
  background-color: var(--base-color01);
  padding: 1rem; }
  .reading .note h3 {
    font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, 游ゴシック体, YuGothic, "游ゴシック Medium", "Yu Gothic Medium", 游ゴシック, "Yu Gothic", Verdana, メイリオ, Meiryo, sans-serif;
    color: #fff;
    border: none;
    background-color: var(--base-color02);
    border-radius: 100px;
    padding: .5rem 1rem;
    margin: 0 auto 1rem; }

.deposit .info-list {
  line-height: 2;
  font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, 游ゴシック体, YuGothic, "游ゴシック Medium", "Yu Gothic Medium", 游ゴシック, "Yu Gothic", Verdana, メイリオ, Meiryo, sans-serif;
  margin-top: 10px; }
  .deposit .info-list > li {
    font-weight: bold;
    margin-bottom: 2rem; }
    .deposit .info-list > li > span {
      display: block;
      font-weight: bold; }
    .deposit .info-list > li .example {
      display: inline-block;
      border: 1px solid;
      margin: 0 0 0 1rem;
      padding: 1rem; }
      .deposit .info-list > li .example li {
        margin: 0 0 0 2em;
        list-style-type: disc; }

.form .link {
  margin: 40px auto;
  text-align: center; }
  .form .link a {
    font-size: 1.5rem;
    background-color: #f27600;
    padding: 10px 40px; }

/*# sourceMappingURL=lost-nuigurumi.css.map */