@charset "UTF-8";
/* CSS Document tokyo artstamprally 2026 02 style.css*/
@layer reset, tokens, base, layout, components, modal, utilities;
@layer reset {
 /* Reset */
 *, *::before, *::after {
  box-sizing: border-box;
 }
 * {
  margin: 0;
  padding: 0;
 }
 html, body {
  height: 100%;
 }
 html {
  scroll-behavior: smooth;
 }
 body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-wrap: anywhere;
  scrollbar-gutter: stable;
 }
 img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  vertical-align: middle;
 }
 input, button, textarea, select {
  font: inherit;
 }
 button {
  appearance: none;
  cursor: pointer;
  border: none;
 }
 a {
  text-decoration: none;
  color: inherit;
 }
 table {
  border-collapse: collapse;
  border-spacing: 0;
 }
 ul, ol {
  list-style: none;
 }
 /* form */
 input[type="checkbox"], input[type="radio"] {
  all: revert;
 }
 input, select {
  vertical-align: middle;
 }
 /* accessibility */ :focus-visible {
  outline: 2px solid #000;
  outline-offset: 2px;
 }
}
@layer tokens {
 :root {
  /* colors */
  --color-primary: #fff100;
  /* yellow */
  --color-secondary: #e84d96;
  /*  violet */
  --color-tertiary: #1b2169;
  /* dark blue */
  --color-text: #1b2169;
  --color-text-hover: #f22;
  --color-btn-bl: #00afec;
  --color0btn-wh: #fff;
  --color-footer-bg: #e9e9e9;
  --zen-maru: "Zen Maru Gothic", sans-serif;
 }
}
@layer base {
 html {
  scroll-behavior: smooth;
  scroll-padding-top: 0;
 }
 /* @font-face でローカルフォントを優先 */
 @font-face {
  font-family: 'Local Noto Sans JP';
  src:
   local('Noto Sans JP'), /* Windows用 */ local('Noto Sans CJK JP Regular') /* Android用 */
  ;
 }
 body {
  min-height: 100vh;
  font-family: "Local Noto Sans JP", "Noto Sans JP", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Segoe UI", Meiryo, sans-serif;
  text-size-adjust: 100%;
  letter-spacing: 0.05em;
  font-weight: 400;
  font-feature-settings: "palt"1;
  color: var(--color-text);
 }
 a {
  color: currentColor;
  transition: color 0.3s;
  text-decoration: none;
  @media (any-hover: hover) {
   &:hover {
    color: --color-text-hover;
   }
  }
 }
 img {
  display: block;
  max-width: 100%;
  height: auto;
 }
}
@layer layout {
 header.global {
  > div {
   width: 100%;
   img {
    width: 100%;
   }
  }
 }
 main {
  > section > div {
   container-type: inline-size;
   width: 100%;
   max-width: 960px;
   margin-inline: auto;
   padding: 4em 0;
   @media(max-width: 960px) {
    padding: 3em 4%;
   }
   @media (max-width: 480px) {
    padding: 8.5cqw 5%;
   }
  }
 }
 footer.global {
  padding: 40px 0 50px;
  background: var(--color-footer-bg);
  @media(max-width: 480px) {
   padding: 30px 0;
  }
  div {
   text-align: center;
   .logo_cjr_footer a {
    display: inline-block;
    margin: 0 auto 1em;
    img {
     width: 48px;
    }
   }
   .copyright {
    font-size: .75em;
    color: #333;
   }
  }
  @media(max-width: 896px) {
   div {
    .logo_cjr_footer a img {
     width: 40px;
    }
   }
  }
 }
}
@layer components {
 main > section > div {
  .center {
   text-align: center;
  }
  > h3 {
   margin: 0 auto;
   padding: .5em 0;
   border-top: 2px solid;
   border-bottom: 2px solid;
   text-align: center;
   font-family: var(--zen-maru);
   font-size: 1.75em;
   @media(max-width: 480px) {
    font-size: 6.2cqw;
   }
  }
  ul.notes {
   margin-block: 0;
   li {
    position: relative;
    margin-bottom: .24em;
    padding-left: 1.2em;
    &::before {
     position: absolute;
     top: .2em;
     left: 0;
     content: "※";
     margin-inline: 0 .2em;
     display: inline-block;
    }
    &:has(small) {
     &::before {
      font-size: smaller;
     }
    }
   }
  }
 }
 main {
  section {
   &.lead {
    background: var(--color-primary);
    > div {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     h2 {
      order: 3;
      margin: 6cqw auto 2cqw;
      picture {
       width: 104.6cqw;
       /* 1004 / 960(100cqw) */
       margin: auto;
       img {
        margin-left: calc((100cqw - 1004px) / 2);
       }
      }
      @media(max-width: 960px) {
       picture {
        width: 100%;
        img {
         margin-left: auto;
        }
       }
      }
      @media(max-width: 480px) {
       picture {
        width: 94%;
       }
      }
     }
     p {
      order: 1;
     }
     dl {
      width: 100%;
      order: 2;
      font-family: var(--zen-maru);
      div {
       dt {
        padding: .4em;
        background: var(--color-tertiary);
        text-align: center;
        font-weight: 700;
        font-size: 1.5em;
        color: #fff;
        @media(max-width: 896px) {
         font-size: 1.3em
        }
        @media(max-width: 480px) {
         font-size: 1em;
        }
       }
       dd {
        padding: 2em 0;
        border: 1px solid var(--color-tertiary);
        background: #fff;
        text-align: center;
        img {
         width: 50cqw;
         margin: auto;
        }
        @media(max-width: 896px) {
         padding: 4cqw 0;
         img {
          width: 60cqw;
         }
         @media(max-width: 480px) {
          img {
           width: 86cqw;
          }
         }
        }
       }
      }
     }
    }
   }
   /*-- /lead --*/
   &.benefits {
    background: var(--color-tertiary);
    > div {
     > h3 {
      border-color: var(--color-secondary);
      color: var(--color-secondary);
      + p {
       margin: 1.8em auto;
       text-align: center;
       font-weight: 700;
       font-size: 1.125em;
       line-height: 2;
       color: #fff;
       @media(max-width: 480px) {
        margin: 1em 0;
        text-align: left;
        font-size: 1em;
        br {
         display: none;
        }
       }
      }
     }
     > div.list {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 2.5em;
      margin: 4.8em auto 2em;
      @media(max-width: 480px) {
       gap: 0;
       margin-block: 15cqw 0;
      }
      > div {
       display: flex;
       flex-direction: column;
       justify-content: flex-start;
       width: calc((100% - 2.5em) / 2);
       margin-block: 0 1em;
       padding: 1em 1em;
       background: #fff;
       @media(max-width: 480px) {
        width: calc(97% / 2);
        padding: 0 .5em .5em .5em;
       }
       h4 {
        position: relative;
        margin: -2em auto 1em;
        padding: .5em 1em;
        background: var(--color-secondary);
        clip-path: polygon(1% 0%, 100% 0%, 99% 100%, 0% 100%);
        text-align: center;
        font-family: var(--zen-maru);
        font-weight: 700;
        font-size: 1.4em;
        color: var(--color-tertiary);
        transform: rotate(-4deg);
        @media (max-width: 896px) {
         padding: .5em;
        }
        @media (max-width: 480px) {
         left: -3%;
         width: 106%;
         margin-top: -1.6em;
         padding: .5em .25em;
         font-size: 3.5cqw;
        }
       }
       h5 {
        margin-block: .5em 1em;
        text-align: center;
        font-weight: 700;
        font-size: 1.5em;
        color: var(--color-secondary);
        span {
         display: inline-block;
        }
        @media (max-width: 480px) {
         min-height: 5em;
         font-size: 4.35cqw;
        }
        & + dl {
         font-size: 1em;
         div {
          dt {
           padding: .4em;
           background: var(--color-tertiary);
           text-align: center;
           font-family: var(--zen-maru);
           font-weight: 700;
           color: #fff;
           @media (max-width: 480px) {
            font-size: 3.7cqw;
           }
          }
          dd {
           min-height: 8em;
           padding: 1em;
           background: #fff;
           border: 1px solid var(--color-tertiary);
           color: var(--color-tertiary);
           @media (max-width: 480px) {
            min-height: 17em;
            font-size: 3.7cqw;
           }
          }
         }
        }
       }
       > div {
        margin: 7em 0 0;
        position: relative;
        padding-block: 0;
        @media (max-width: 480px) {
         margin: 19cqw 0 0;
        }
        > p {
         position: absolute;
         top: -90px;
         left: 2%;
         width: 120px;
         height: 120px;
         img {}
         @media (max-width: 480px) {
          top: -15cqw;
          width: 18.4cqw;
          height: 18.4cqw;
         }
        }
        div {
         object-fit: contain;
         object-position: center;
         img {
          width: 100%;
          height: 100%;
          margin-block: 0;
          /*aspect-ratio: 4 / 3;*/
          object-fit: contain;
          background: #c4c4c4;
         }
         p:has(small) {
          font-size: .6em;
         }
        }
        div:has(details) {
         position: relative;
         details {
          background: #fff;
          padding: .5em 1em 1em;
          font-size: .875em;
          summary {
           margin: .5em 0;
           font-weight: 700;
           font-size: 1.125em;
           @media(any-hover: hover) {
            &:hover {
             cursor: pointer;
             color: var(--color-secondary);
             text-decoration: underline;
            }
           }
          }
          > div {
           ul {
            li {
             list-style: disc;
             margin: 0 0 .25em 1.5em;
             &:last-of-type {
              margin-bottom: 0;
             }
            }
           }
          }
          @media(max-width: 480px) {
           padding: .5em 0 .5em .5em;
           summary {
            font-size: 3.7cqw;
           }
           div ul li {
            font-size: 3.7cqw;
           }
          }
         }
        }
       }
      }
     }
    }
    /*-- /div --*/
   }
   /*--/.benefits  --*/
   &.entry {
    background: var(--color-secondary);
    > div {
     ol {
      margin: 2em auto;
      > li {
       width: 100%;
       margin-block: 0;
       &::after {
        content: "";
        display: block;
        height: calc(25px / 2 * tan(60deg));
        width: 25px;
        margin: 2% auto;
        clip-path: polygon(0 0, 100% 0, 50% 100%);
        background: var(--color-tertiary);
        @media (max-width: 480px) {
         height: calc(20px / 2 * tan(60deg));
         width: 20px;
         top: 50%;
        }
       }
       &:last-of-type::after {
        display: none;
       }
       > div {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 48px;
        padding: 48px;
        background: #fff;
        border: 2px solid var(--color-tertiary);
        @media(max-width: 480px) {
         padding: 1.5em 1em;
         flex-direction: column;
         gap: 1em;
        }
        > div:nth-of-type(1) {
         /* left_box */
         min-width: 140px;
         @media(max-width: 480px) {
          min-width: auto;
         }
         img {
          width: 100%;
          max-width: 140px;
          @media(max-width: 480px) {
           width: 25cqw;
          }
         }
        }
        > div:nth-of-type(2) {
         /* right_box */
         width: auto;
         @media(max-width: 480px) {
          width: 100%;
         }
         h4 {
          font-family: var(--zen-maru);
          font-weight: 700;
          font-size: 1.5em;
          @media(max-width: 480px) {
           width: fit-content;
           margin: auto;
           text-align: center;
           font-size: 4.8cqw;
          }
          + p {
           font-family: var(--zen-maru);
           font-weight: 700;
           font-size: 1.125em;
           @media(max-width: 480px) {
            width: fit-content;
            margin: auto;
            text-align: center;
            font-size: 3.7cqw;
           }
           &.event_period {
            width: fit-content;
            margin: 1em 0;
            padding: .25em .5em;
            border-top: 1px solid;
            border-bottom: 1px solid;
            border-color: var(--color-tertiary);
            @media(max-width: 480px) {
             margin: 1em auto;
             padding: .3em;
            }
           }
          }
         }
        }
        ul.aw_list {
         margin-block: 1em;
         li {
          margin: .4em 0 .4em 1.2em;
          font-family: var(--zen-maru);
          font-weight: 700;
          font-size: 1.25em;
          color: var(--color-secondary);
          @media(max-width: 480px) {
           font-size: 4cqw;
          }
          &::marker {
           content: "✦ ";
          }
         }
        }
        ul.notes {
         color: #333;
         li {
          margin-bottom: .4em;
          &:last-of-type {
           margin-bottom: unset;
          }
          &:has(small) {
           font-weight: normal;
           font-size: .875em;
           color: #333;
           line-height: 1.3;
          }
          @media (max-width: 480px) {
           font-size: 3.8cqw;
           &:has(small) {
            font-size: 3.8cqw;
           }
          }
         }
        }
       }
      }
     }
    }
   }
   /* -- /entry --*/
   &.stamp_spot {
    background: var(--color-primary);
    @media (max-width: 480px) {
     margin: 0;
    }
    > div {
     @media (max-width: 480px) {
      padding-block: 2em;
     }
     > h3 {
      margin-bottom: 2.29em;
      border-color: var(--color-secondary);
      color: var(--color-secondary);
      @media(max-width: 480px) {
       margin-bottom: 1.5em;
      }
     }
     div.spot_point {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 4%;
      margin-block: 3% 0;
      @media (max-width: 480px) {
       justify-content: center;
       margin-block: 4% 0;
      }
      > div {
       display: flex;
       flex-direction: column;
       width: calc(96% / 2);
       padding: 0 0 4em;
       z-index: 1;
       @media (max-width: 480px) {
        width: 100%;
        padding-bottom: 2.5em;
       }
       > div.stamp {
        position: relative;
        &::after {
         position: absolute;
         bottom: 16px;
         right: 16px;
         display: block;
         content: "";
         width: 48px;
         height: 48px;
         background: url("../images/icon_stamp.svg") no-repeat center /contain;
         z-index: 5;
        }
       }
       img {
        width: 100%;
        padding: 8px;
        border: 2px solid var(--color-secondary);
        object-fit: cover;
        aspect-ratio: 4 / 3;
        @media(any-hover: hover) {
         &:hover {
          cursor: pointer;
         }
        }
       }
       h4 {
        display: flex;
        justify-content: center;
        align-items: flex-end;
        flex-grow: 1;
        margin-block: .7em;
        font-family: var(--zen-maru);
        font-weight: 700;
        font-size: 1.5em;
        color: var(--color-secondary);
        @media (max-width: 480px) {
         font-size: 6.2cqw;
        }
        + p {
         width: fit-content;
         margin-inline: auto;
         font-size: 1em;
        }
       }
      }
     }
     div.notes {
      p {
       width: fit-content;
       margin: 0 auto 1em;
       padding: 0 10%;
       text-align: center;
       font-size: .875em;
       span {
        display: inline-block;
       }
       @media (max-width: 480px) {
        padding: 0;
       }
      }
     }
     div.banner {
      margin: 4cqw auto 1em;
      @media(max-width: 480px) {
       margin-top: 8cqw;
      }
      > picture {
       width: 100%;
      }
     }
    }
   }
   /* -- /stamp_spot --*/
   &.ex_reserve {
    background: var(--color-secondary);
    > div {
     h3 {
      margin: auto;
      border-color: var(--color-primary);
      color: var(--color-primary);
      + p {
       margin: 1em auto;
       font-weight: 600;
       text-align: center;
       font-size: 1.5em;
       @media(max-width: 480px) {
        font-size: 5cqw;
        line-height: 1.8;
       }
      }
     }
     p:has(small) {
      margin: 0 auto 2em;
      text-align: center;
      font-size: .875em;
      @media(max-width: 480px) {
       font-size: 4cqw;
      }
     }
     div:has(button) {
      width: fit-content;
      margin: auto;
     }
    }
   }
   /* -- /ex_reserve --*/
   &.information {
    background: #fff;
    > div {
     > div.block_attention {
      margin: 2em auto;
      @media (max-width: 480px) {
       margin: 2em auto 1.5em;
      }
      &:nth-of-type(2) {
       @media (max-width: 480px) {
        margin: 1.5em auto 0;
       }
      }
     }
    }
   }
   /* -- /information --*/
  }
  /* -- /section --*/
  p.notes {
   margin: 0 0 .5em 1em;
   text-align: center;
  }
 }
 /* -- /main --*/
}
/*-- /@layer components --*/
@layer modal {
 /* modal spot */
 .modal {
  display: none;
  visibility: hidden;
  opacity: 0;
  position: fixed;
  z-index: 8887;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .5);
  transition: opacity 0.3s ease, translate .3s ease, visibility 0.3s ease;
  pointer-events: none;
  &.is-active {
   opacity: 1;
   visibility: visible;
   pointer-events: auto;
   transition: opacity 0.3s ease, translate .3s ease, visibility 0.3s ease;
   > .modal-content {
    transform: translate(-50%, -50%);
    transition: transform .5s;
    overflow-y: scroll;
   }
  }
 }
 body.modal-open {
  overflow: hidden;
 }
 .modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: 760px;
  width: 100%;
  height: auto;
  max-height: 92dvh;
  padding: 1em 2em;
  background: #fff;
  transform: translate(-50%, -45%);
  transition: transform .5s;
  @media(max-width: 896px) {
   width: 90%;
  }
  @media(max-width: 480px) {
   width: 94%;
   padding: 4% 4% 4%;
  }
  &:has(.entry_notes) {
   @media(max-width: 480px) {
    width: 94%;
    padding: 6% 6% 8%;
   }
  }
 }
 .modal-container {
  /*spot*/
  div.stamp {
   position: relative;
   &::after {
    position: absolute;
    bottom: 3%;
    right: 2%;
    display: block;
    content: "";
    width: 48px;
    height: 48px;
    background: url("../images/icon_stamp.svg") no-repeat center /contain;
    z-index: 5;
    @media(max-width: 480px) {
     bottom: 5%;
     right: 4%;
    }
   }
  }
  img {
   width: 100%;
   margin: 1% 0 0;
   padding: 6px;
   border: 2px solid var(--color-secondary);
   background-color: transparent;
   & + span:has(small) {
    display: block;
    text-align: right;
   }
  }
  p:has(+h4) {
   span {
    display: block;
    margin: 1em auto .5em;
    text-align: center;
    font-size: 110%;
   }
  }
  h4 {
   margin-block: 1em .5em;
   text-align: center;
   font-family: var(--sen-maru);
   font-weight: 700;
   font-size: 1.25em;
   color: var(--color-secondary);
   @media (max-width: 480px) {}
   + p {
    width: fit-content;
    margin: 0 auto 1.5em;
    text-align: justify;
    font-size: 1em;
   }
  }
  > div {
   &.address {
    margin-bottom: 1em;
    padding: 1em 0 0;
    border-top: 2px solid var(--color-secondary);
    border-bottom: 2px solid var(--color-secondary);
   }
  }
  dl, ul, ol, p {
   line-height: 1.7;
   font-size: 1em;
   @media(max-width: 480px) {
    font-size: 3.75cqw;
   }
  }
  dl {
   margin-block: 1.4em;
   div {
    margin-bottom: .5em;
    dd {
     padding-left: .5em;
     a {
      text-decoration: underline;
      font-weight: 700;
     }
    }
   }
  }
  p + p {
   margin-block: 1em;
  }
  p:has(a) {
   margin: 1em 0;
   a {
    display: inline-block;
    margin-left: .5em;
    text-decoration: underline;
    font-weight: 700;
    transition: color .3s;
    &:hover {
     color: var(--color-secondary);
     transition: color .3s;
    }
   }
   @media(max-width: 480px) {
    margin: .5em 0 1em;
    a:not(.g_map) {
     display: block;
    }
   }
  }
  /* modal entry_notes */
  > div.entry_notes {
   h4 {
    margin: 1em auto;
    text-align: center;
    font-family: var(--zen-maru);
    font-size: 1.5em;
    color: var(--color-secondary);
    letter-spacing: normal;
    @media(max-width: 480px) {
     margin: 0 auto 1.25em;
     font-size: min(5vw, 1.125em);
     span {
      display: inline-block;
     }
    }
   }
   h5 {
    margin-block: 1.5em .25em;
    text-align: left;
    font-family: var(--zen-maru);
    font-weight: 700;
    font-size: min(5vw, 1.125em);
    &.head {
     margin-block: 1.5em 1em;
     text-align: center;
    }
    &:first-of-type {
     margin-block-start: 0;
    }
   }
   ul {
    list-style: disc;
    padding-inline: 1.5em 0;
    li {
     margin-block: 0 .5em;
     word-break: break-all;
     a {
      text-decoration: underline;
     }
    }
   }
   dl {
    margin: 0;
    div {
     margin: 1.25em 0;
     dt {
      margin-block: 0 .5em;
      font-family: var(--zen-maru);
      font-weight: 700;
      font-size: 1.125em;
      &::before {
       content: "✦";
       margin-right: .5em;
       font-size: .86em;
      }
     }
     dd {
      padding: 0;
     }
     @media(max-width: 480px) {
      dt {
       font-size: min(5vw, 1.125em);
      }
     }
    }
   }
  }
 }
}
/*-- /@layer modal --*/
@layer utilities {
 button, .information details summary {
  appearance: none;
  position: relative;
  display: block;
  width: 100%;
  padding: 1em;
  background: #fff;
  box-shadow: 8px 8px 0 var(--color-tertiary);
  border: 2px solid var(--color-tertiary);
  text-align: center;
  font-weight: 700;
  font-size: 1em;
  color: currentColor;
  cursor: pointer;
  transition: all 0.3s;
  span {
   display: inline-block;
  }
  @media (max-width:896px) {}
  @media (max-width:480px) {
   box-shadow: 5px 5px 0 var(--color-tertiary);
  }
  a {
   display: block;
  }
  &.btn {
   width: 100%;
  }
  &.entry, &.login {
   background: var(--color-btn-bl);
   line-height: 1.3;
   letter-spacing: .08em;
   color: #fff;
   @media(any-hover: hover) {
    &:hover {
     filter: brightness(1.15);
     transition: all .3s;
    }
   }
   &::before, &::after {
    /* arrow */
    position: absolute;
    content: "";
    background-color: transparent;
    z-index: 5;
   }
   &::before {
    top: 50%;
    right: .86em;
    width: 14px;
    height: 14px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    translate: 0 -50%;
    rotate: 45deg;
   }
   &::after {
    top: 50%;
    right: .86em;
    width: 18px;
    height: 2px;
    border-top: 3px solid #fff;
    translate: 0 -50%;
   }
   @media(max-width: 480px) {
    &::before {
     width: 12px;
     height: 12px;
    }
    &::after {
     width: 16px;
    }
   }
  }
  &.soon {
   background: #bbb;
   @media(any-hover: hover) {
    &:hover {
     filter: unset;
     cursor: unset;
    }
    &::before, &::after {
     display: none;
    }
   }
   &:has(+p) {
    + p {
     display: none;
    }
   }
  }
  &.entry {
   margin: 0 auto;
   padding: .76em;
   font-size: 1.75em;
   @media(max-width: 896px) {
    font-size: 3.4cqw;
   }
   @media(max-width: 480px) {
    font-size: 5.6cqw;
   }
   a {
    small {
     font-size: 50%;
     @media(max-width: 480px) {
      display: block;
      margin: .5em 0 0;
      font-size: min(66%, 12px);
      line-height: 1.5;
     }
     @media(max-width: 375px) {
      padding-right: 2em;
     }
    }
   }
   &:has(+dl) {
    margin: 0 auto 2.29em;
    @media(max-width: 480px) {
     margin-bottom: 7cqw;
    }
   }
   &:has(+p) {
    margin: 0 auto .5em;
   }
   & + p {
    text-align: center;
    font-size: .875em;
   }
  }
  &.login {
   width: 300px;
   margin: 1em 0;
   padding: .4em;
   box-shadow: 5px 5px 0 var(--color-tertiary);
   font-size: 1.25em;
   a {
    span {
     font-size: .7em;
    }
   }
   @media(max-width: 480px) {
    width: 90%;
    margin: 1em auto 0;
   }
  }
  &.link {
   width: 270px;
   padding: .78em;
   box-shadow: 3px 3px 0 var(--color-tertiary);
   &::before, &::after {
    /* + */
    position: absolute;
    content: "";
    background-color: transparent;
    z-index: 5;
   }
   &::before {
    top: 50%;
    right: 1em;
    width: 12px;
    height: 12px;
    border-top: 2px solid var(--color-tertiary);
    border-right: 2px solid var(--color-tertiary);
    translate: 0 -50%;
    rotate: 45deg;
   }
   &::after {
    top: 50%;
    right: 1em;
    width: 16px;
    height: 2px;
    border-top: 2px solid var(--color-tertiary);
    translate: 0 -50%;
   }
   @media(any-hover: hover) {
    &:hover {
     background: var(--color-primary);
     transition: all .3s;
    }
   }
   @media(max-width: 480px) {
    font-size: 4.35cqw;
   }
  }
  &.modal-toggle, &.modal-close {
   margin: auto;
   font-weight: 700;
   font-size: 1.25em;
   color: var(--color-tertiary);
   &::before, &::after {
    /* + */
    content: "";
    position: absolute;
    top: 50%;
    translate: 0 -50%;
    display: inline-block;
    width: 14px;
    height: 2px;
    background-color: transparent;
    border-top: 2px solid var(--color-tertiary);
    transition: all .3s ease-out;
   }
   &::before {
    right: 1.5em;
   }
   &::after {
    right: 1.5em;
    rotate: 90deg;
   }
   span {
    display: inline-block;
   }
   @media(max-width: 480px) {
    font-size: 4.35cqw;
   }
  }
  &.modal-close {
   margin: 2em auto 1em;
   font-size: .875em;
   &::before {
    rotate: 45deg;
   }
   &::after {
    rotate: 135deg;
   }
  }
 }
 .stamp_spot button.modal-toggle, button.modal-close {
  width: 270px;
  padding: .7em;
  box-shadow: 3px 3px 0 var(--color-tertiary);
  font-family: var(--zen-maru);
  @media(any-hover: hover) {
   &:hover {
    background-color: var(--color-secondary);
    transition: all .3s;
   }
  }
 }
 .information .modal-toggle {
  /* 注意事項 */
  @media(any-hover: hover) {
   &:hover {
    background-color: var(--color-secondary);
    transition: all .3s;
   }
  }
 }
 .information details {
  /* 問い合わせ */
  background: #fff;
  summary {
   font-size: 1.25em;
   @media(any-hover: hover) {
    &:hover {
     background-color: var(--color-secondary);
     transition: all .3s;
    }
   }
   span {
    display: inline-block;
   }
   @media (max-width:896px) {}
   @media (max-width:480px) {
    font-size: 4.35cqw;
   }
   &::before, &::after {
    content: "";
    position: absolute;
    top: 50%;
    translate: 0 -50%;
    display: inline-block;
    width: 14px;
    height: 2px;
    background-color: transparent;
    border-top: 2px solid var(--color-tertiary);
    transition: all .3s ease-out;
   }
   &::before {
    right: 1.5em;
   }
   &::after {
    right: 1.5em;
    rotate: 90deg;
   }
  }
  > div {
   position: relative;
   padding: 3% 4%;
   border: 1px solid var(--color-tertiary);
   border-top: unset;
   box-shadow: 8px 8px 0 var(--color-tertiary);
   background: #fff;
   z-index: 5;
   p {
    text-box-trim: none;
   }
   .box_contact {
    padding: 10px;
    border: 2px solid var(--color-secondary);
    text-align: center;
    color: var(--color-secondary);
    p {
     margin-bottom: .25em;
     font-family: var(--zen-maru);
     font-weight: 700;
     font-size: 1.5em;
     letter-spacing: normal;
     &:last-of-type {
      margin-bottom: unset;
     }
     a {
      text-decoration: underline;
      font-size: 120%;
     }
     @media(max-width: 480px) {
      font-size: 1em;
     }
    }
    + dl {
     padding: 1em .5em;
     text-align: left;
     @media(max-width: 480px) {
      font-size: .875em;
     }
     dt {
      margin-bottom: .5em;
      font-family: var(--zen-maru);
      font-weight: 700;
      &::before {
       content: "✦ ";
      }
     }
     dd {
      margin: 0 0 1.2em;
      p {
       text-box-trim: none;
       margin-block: 0 1.2em;
       a {
        text-decoration: underline;
       }
      }
      ul {
       margin: 0 0 1em;
       list-style: disc;
       li {
        margin: 0 0 .5em 1.5em;
       }
      }
     }
    }
   }
  }
  &[open="true"] > summary {
   box-shadow: 8px 8px 0 var(--color-tertiary);
   &::before, &::after {
    transition: rotate .3s ease-out;
   }
   &::before {
    rotate: 45deg;
   }
   &::after {
    rotate: 135deg;
   }
  }
 }
 /* spot modal close */
 .modal-close {
  text-align: center;
  &:has(.btn_close) {
   text-align: right;
  }
 }
 .modal-close > button {
  &.btn_close {
   position: relative;
   display: inline-block;
   width: 30px;
   height: 30px;
   margin: 0;
   padding: 5px;
   background: none;
   box-shadow: unset;
   border: 1px solid #888;
   border-radius: 0;
   &::before, &::after {
    content: "";
    position: absolute;
    display: inline-block;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 3px;
    transform: none;
    background: #888;
    transition: all.3s;
   }
   &::before {
    transform: translate(-50%, -50%) rotate(45deg);
   }
   &::after {
    transform: translate(-50%, -50%) rotate(-45deg);
   }
   @media (any-hover: hover) {
    &:hover {
     cursor: pointer;
     transition: all.3s;
     &::before, &::after {
      background-color: var(--color-secondary);
     }
    }
   }
  }
 }
}
/* --@leyer utilties --*/