@charset "UTF-8";

:root {
  --keyColor: #183E78;
}

@media screen and (max-width: 640px) {
header {
  height: 40px;
  box-shadow: 0 0 4px rgb(0 0 0 /10%);

  .block-header-logo {
    top: 2px;
    left: calc(50% - 18px);

    svg {
      width: 24px !important;
    }
  }
}
.tips-modal {
  margin: 20px 16px 96px;

  h1 {
    margin: 0 0 16px;
    padding: 8px 16px;
    text-align: center;
    border-bottom: 1px solid #00000028;
  }

  section {
    & + & {
      margin-top: 50px;
    }
  }

  h2 {
    text-align: center;
    line-height: 1.5;
    font-family: var(--ff-sans_serif);
    font-weight: 600;
    font-size: 1.6rem;
  }

  .tips-modal--anchorlink {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    
    li {
      width: calc((100% - 16px) /3);

      a {
        display: flex;
        position: relative;
        align-items: center;
        padding: 0 24px 0 4px;
        min-height: 36px;
        text-decoration: none;
        font-size: 1.4rem;
        border-bottom: 1px dashed var(--cl-a);

        &::after {
          content: "";
          display: block;
          position: absolute;
          inset: auto 10px auto auto;
          margin-top: -8px;
          border: 1px solid currentColor;
          border-width: 0 1px 1px 0;
          width: 8px;
          height: 8px;
          transform: rotate(45deg);
        }
      }
    }
  }

  .scene-list {
    display: flex;
    flex-direction: column;
    gap: 40px;

    margin-top: 40px;
    .scene-list--item {
      h3 {
        margin: 0;
        padding: 6px 0;
        text-align: center;
        letter-spacing: 0.1em;
        font-weight: 600;
        font-size: 2rem;
        border-bottom: 1px solid #00000028;
      }

      ul {
        display: flex;
        justify-content: center;
        gap: 16px;
        margin-top: 24px;

        li {
          width: 72px;
          figure {
            img {
              border: 1px solid #00000028;
            }
            figcaption {
              margin-top: 4px;
              text-align: center;
              font-weight: 600;
              font-size: 1.3rem;
            }
          }
        }
      }
    }
  }
}

.pane-footer {
  padding-bottom: 60px !important;
  color: var(--col_MypreBlue);

  a {
    color: currentColor;
  }

  .tips-modal--btn__close {
    display: block grid;
    place-items: center;

    a.btn {
      display: inline-flex;
      position: fixed;
      bottom: 16px;
      border: 1px solid currentColor;
      border-radius: 50px;
      padding: 0 16px;
      height: 36px;
      text-decoration: none;
      font-feature-settings: "palt";
      font-size: 1.6rem;
      background: rgb(255 255 255 /95%);

      &::before {
        content: "✕";
        margin-right: 4px;
      }
    }
  }

  address {
    margin-top: 0 !important;
  }
}
}

@media screen and (min-width: 641px) { /*-- PC --*/
header {
  height: 48px;
  box-shadow: 0 0 4px rgb(0 0 0 /10%);

  .block-header-logo {
    top: 2px;
    left: calc(50% - 18px);

    div {
      padding: 4px !important;
      svg {
        transform: scale(90%);
      }
    }

  }
}
.tips-modal {
  margin: 20px auto 96px;
  width: var(--wrapperW);

  h1 {
    margin: 0 0 50px;
    padding: 8px 16px;
    text-align: center;
    border-bottom: 1px solid #00000028;
  }

  section {
    width: var(--contentW);
    margin-inline: auto;

    & + & {
      margin-top: 64px;
    }
  }

  h2 {
    margin: 0 0 40px;
    text-align: center;
    line-height: 1.5;
    font-family: var(--ff-sans_serif);
    font-weight: 600;
    font-size: 1.8rem;
  }

  .tips-modal--spec {
    margin-inline: auto;
    width: 480px;
  }

  .tips-modal--anchorlink {
    display: none;
    
    li {
      width: 100%;
      a {
        display: flex;
        position: relative;
        align-items: center;
        justify-content: center;
        padding: 0 24px 0 4px;
        min-height: 36px;
        text-decoration: none;
        border-bottom: 1px dashed var(--cl-a);

        &::after {
          content: "";
          display: block;
          position: absolute;
          border: 1px solid currentColor;
          border-width: 0 1px 1px 0;
          bottom: -16px;
          width: 8px;
          height: 8px;
          transform: rotate(45deg);
        }
      }
    }
  }

  .scene-list {
    margin-top: 32px;
    display: flex;
    flex-wrap: wrap;
    gap: 30px;

    .scene-list--item {
      width: calc((100% - 60px) /3);

      h3 {
        margin: 0;
        padding: 6px 0;
        text-align: center;
        letter-spacing: 0.15em;
        font-weight: 600;
        font-size: 1.8rem;
        border-bottom: 1px solid #00000028;
      }

      ul {
        display: flex;
        justify-content: center;
        gap: 16px;
        margin-top: 24px;

        li {
          width: 72px;
          figure {
            img {
              border: 1px solid #00000028;
            }
            figcaption {
              margin-top: 4px;
              text-align: center;
              font-weight: 600;
              font-size: 1.3rem;
            }
          }
        }
      }
    }
  }
}

.pane-footer {
  padding-bottom: 60px !important;
  color: var(--col_MypreBlue);

  a {
    color: currentColor;
  }

  .tips-modal--btn__close {
    display: block grid;
    place-items: center;

    a.btn {
      display: inline-flex;
      position: fixed;
      bottom: 16px;
      border: 1px solid currentColor;
      border-radius: 50px;
      padding: 0 16px;
      min-height: 36px;
      text-decoration: none;
      font-feature-settings: "palt";
      font-size: 1.6rem;
      background: #ffffffe0;
      backdrop-filter: blur(6px);

      &::before {
        content: "✕";
        margin-right: 4px;
      }
    }
  }

  address {
    margin-top: 0 !important;
  }
}
}