@charset "UTF-8";
/* CSS Document wakutetsu2025 style.css*/ :root {
 --c_bl: rgba(0, 104, 183, 1);
 --c_gn: rgba(126, 191, 65, 1);
 --c_or: rgb(255, 136, 0);
 --c_dbl: #003d76;
}
*, *::before, *::after {
 box-sizing: border-box;
}
header.header {
 div {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 30px;
  position: relative;
  z-index: 5;
 }
}
section div.has_btn {
 width: auto;
 max-width: 960px;
 margin: 40px auto;
 text-align: center;
 @media (max-width: 896px) {
  margin-block: 20px;
 }
 @media (max-width:480px) {
  margin-block: 1.5em;
  padding-inline: 5%;
 }
 p.btn {
  a {
   display: block;
   position: relative;
   color: #fff;
   line-height: 1.4;
   small {
    display: block;
    margin-block: 1em 0;
    font-size: 1.4rem;
    @media (max-width: 480px) {
     font-size: 1.2rem;
    }
   }
   &::after {
    content: "";
    width: 30px;
    height: 30px;
    position: absolute;
    top: 50%;
    right: 30px;
    display: inline-block;
    background: url(../../common/images/circle-chevron-right-white.svg) center center / contain no-repeat;
    translate: 0 -50%;
    @media (max-width: 480px) {
     width: 22px;
     height: 22px;
     right: 15px;
    }
   }
  }
  &.or a {
   padding: 20px 70px;
   background: #FF6722;
   border-radius: calc(1px / 0);
   font-size: 2.8rem;
   @media (max-width: 896px) {
    padding: 15px 50px;
    font-size: 2rem;
   }
   @media (max-width: 480px) {
    font-size: 1.8rem;
   }
   &::after {}
  }
  & + p:has(small) {
   margin-block: .5em 0;
  }
  &.bl a {
   width: 60%;
   margin-inline: auto;
   padding: 20px 70px;
   background: #003d76;
   border-radius: calc(1px / 0);
   font-weight: 700;
   font-size: 2.2rem;
   @media (max-width: 480px) {
    width: 100%;
    padding: 16px 26px;
    font-size: 1.4rem;
   }
   &::after {}
  }
  &.bl.arw_dwn a::after {
   rotate: 90deg;
  }
  &.soon a {
   padding: 20px 70px;
   background: #999;
   border-radius: calc(1px / 0);
   font-size: 2.8rem;
   @media (max-width: 896px) {
    padding: 15px 50px;
    font-size: 2rem;
   }
   @media (max-width: 480px) {
    font-size: 1.8rem;
   }
   &::after {
    content: none;
   }
   &:hover {
    opacity: 1;
   }
  }
 }
}
header.global {
 div.mv {
  width: 100%;
  img {
   width: 100%;
  }
 }
}
div.entry_btn {
 position: fixed;
 right: 2.5%;
 z-index: 100;
 @media(min-width: 1400px) {
  top: 40vw;
 }
 @media(max-width: 1399px) {
  top: 32vw;
 }
 @media(max-width: 480px) {
  top: 70vw;
 }
 a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 140px;
  height: 140px;
  background-color: #FF6722;
  border: 3px solid #fff;
  border-radius: calc(1px / 0);
  text-align: center;
  font-size: 1.8rem;
  color: #fff;
  + span {
   position: absolute;
   display: flex;
   justify-content: center;
   align-items: center;
   top: -1.2rem;
   right: 0;
   width: 30px;
   height: 30px;
   background: #fff;
   border: 1px solid #FF6722;
   border-radius: calc(1px/ 0);
   padding: 5px;
   font-size: 1.4rem;
   color: #FF6722;
  }
  @media(max-width: 896px) {
   width: 110px;
   height: 110px;
   font-size: 1.6rem;
  }
  @media(max-width: 480px) {
   width: 90px;
   height: 90px;
   font-size: 1.4rem;
  }
  @media(any-hover: hover) {
   &:hover {
    background-color: #FF8149;
    opacity: 1;
   }
  }
 }
}
main {
 section {
  & > div {
   width: 100%;
   max-width: 960px;
   height: 100%;
   margin: auto;
   @media (max-width: 896px) {
    padding-inline: 6%;
   }
   @media (max-width:480px) {
    padding-inline: 5%;
   }
   h3 {
    padding: .5em;
    background: var(--c_bl);
    border-radius: 7px;
    text-align: center;
    font-weight: 700;
    font-size: 2.4rem;
    color: #fff;
    letter-spacing: .1em;
    span {
     display: inline-block;
    }
    @media(max-width: 896px) {
     font-size: 2.25rem;
    }
    @media (max-width: 480px) {
     padding: .4em;
     font-size: 1.7rem;
    }
    + p {
     width: fit-content;
     margin: 1em auto 0;
     text-align: center;
     font-size: 2.2rem;
     small {
      font-size: 1.7rem;
     }
     @media (max-width: 480px) {
      padding-inline: .5em;
      text-align: left;
      font-size: 1.6rem;
      small {
       font-size: 1.4rem;
      }
     }
    }
   }
  }
  &.lead {
   h2 {
    width: fit-content;
    margin: 40px auto;
    font-weight: 600;
    font-size: 3rem;
    color: #023C74;
    line-height: 2;
    mark {
     background: yellow;
    }
    @media (max-width: 480px) {
     margin-block: auto 25px;
     font-size: 1.8rem;
    }
   }
  }
  &.youtuber {
   div {
    h3 {}
    > div {
     display: flex;
     justify-content: space-evenly;
     margin-block: 30px;
     @media(max-width: 480px) {
      flex-direction: column;
     }
     > div {
      flex-wrap: wrap;
      width: 48%;
      margin-block: 0 1em;
      @media(max-width: 896px) {
       flex-wrap: nowrap;
       flex-direction: column;
       justify-content: flex-start;
      }
      @media(max-width: 480px) {
       width: 100%;
      }
      &:nth-of-type(2) {
       @media(max-width: 480px) {
        margin-block-start: 2em;
       }
      }
      div {
       width: 50%;
       margin: 0;
       object-fit: contain;
       align-self: flex-start;
       @media(max-width: 896px) {
        width: 100%;
        padding: 0;
       }
       img {
        display: block;
        object-fit: contain;
       }
      }
      p {
       width: 45%;
       padding-block: 0;
       text-align: justify;
       word-break: break-all;
       @media(max-width: 896px) {
        flex-grow: 1;
        width: 100%;
        padding: 1em;
       }
      }
      ul {
       align-self: flex-end;
       display: flex;
       justify-content: center;
       gap: 2em;
       width: 100%;
       margin: 2.5em auto 0;
       @media(max-width: 896px) {
        margin-block: 1em;
       }
       li a {
        padding: .5em 1.5em;
        border: 1px solid var(--c_dbl);
        border-radius: calc(1px / 0);
        @media(any-hover: hover) {
         &:hover {
          background: #cce6f5;
         }
        }
       }
      }
     }
    }
   }
  }
  &.benefits {
   padding-block: 50px 20px;
   background: #cce6f5;
   @media (max-width: 480px) {
    padding-block: 2em 1em;
   }
   > div {
    max-width: 960px;
    h3 {}
    > div.list {
     display: flex;
     justify-content: space-evenly;
     flex-wrap: wrap;
     gap: 2%;
     margin-block: 2.5em;
     @media(max-width: 480px) {
      margin-block: 1.5em;
     }
     > div {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: calc(96% / 2);
      margin-block: 0 1em;
      padding: 1em .5em;
      border: 1px solid #003d76;
      background: #fff;
      @media(max-width: 480px) {
       padding-block: 1em;
      }
      h4 {
       flex-grow: 1;
       display: flex;
       justify-content: center;
       align-items: center;
       gap: 1em;
       padding-inline: .5em;
       text-align: center;
       font-weight: bold;
       font-size: 1.7rem;
       color: var(--c_or);
       -webkit-text-stroke: .2em #fff;
       paint-order: stroke;
       &:first-child {
        align-items: flex-end;
       }
       @media (max-width: 480px) {
        font-size: 1rem;
       }
       &::before, &::after {
        content: "";
        position: relative;
        display: inline-block;
        width: 6px;
        height: 2em;
        background-color: var(--c_or);
        border: 2px solid #fff;
       }
       &::before {
        rotate: -35deg;
       }
       &::after {
        rotate: 35deg;
       }
      }
      h5 {
       margin-block: .5em;
       background: #003d76;
       text-align: center;
       font-weight: bold;
       font-size: 2.4rem;
       color: #fff;
       span {
        display: inline-block;
       }
       @media (max-width: 480px) {
        font-size: 1.5rem;
       }
       & + p {
        width: fit-content;
        margin: .5em auto 1em;
        font-size: 1.6rem;
        @media (max-width: 480px) {
         font-size: 1.2rem;
        }
       }
      }
      div {
       position: relative;
       padding-block: 0;
       @media (max-width: 480px) {
        padding-block: 34px 0;
       }
       p {
        position: absolute;
        top: 0;
        left: 2%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100px;
        height: 100px;
        padding: 0 0 .3em;
        background-color: #FFF100;
        border-radius: calc(1px / 0);
        text-align: center;
        font-weight: 400;
        font-size: 2.2rem;
        line-height: 1.1;
        color: var(--c_or);
        filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.3));
        font-size: 1.6rem;
        z-index: 10;
        b {
         font-size: 3.2rem;
        }
        @media (max-width: 480px) {
         width: 60px;
         height: 60px;
         font-size: 1.3rem;
         b {
          font-size: 1.8rem;
         }
        }
       }
       div {
        object-fit: contain;
        object-position: center;
        img {
         width: 100%;
         height: 100%;
         margin-block: 1em;
         aspect-ratio: 4 / 3;
         @media(max-width: 480px) {
          margin-block: 1em .25em;
         }
        }
       }
      }
      &:nth-of-type(1) {
       p {
        left: 0;
       }
      }
      &:nth-of-type(2) {}
      &:nth-of-type(3) {}
     }
    }
   }
  }
  &.entry {
   margin-block: 60px;
   @media (max-width: 480px) {
    margin-block: 2em;
   }
   > div {
    h3 {}
    ol {
     margin: 2.5em auto 0;
     list-style: none;
     > li {
      width: calc(100%);
      margin-block: 0;
      &:first-of-type > div > div:nth-of-type(2) {
       text-align: center;
      }
      > div {
       display: flex;
       justify-content: space-between;
       align-items: center;
       gap: 50px;
       padding: 50px;
       border: 1px solid #003d76;
       border-radius: 15px;
       @media(max-width: 480px) {
        padding: 1.5em;
        flex-direction: column;
        gap: 1em;
       }
       > div:nth-of-type(1) {
        img {
         width: 100%;
         max-width: 140px;
         @media(max-width: 480px) {
          max-width: 80px;
         }
        }
       }
       > div:nth-of-type(2) {
        width: 76%;
        @media(max-width: 480px) {
         width: 100%;
        }
        h4 {
         font-weight: 700;
         font-size: 2.2rem;
         color: #0081cc;
         span {
          font-size: 1.8rem;
         }
         @media(max-width: 480px) {
          font-size: 1.6rem;
          span {
           display: block;
           font-size: 1.4rem;
          }
         }
        }
        h5 {
         align-self: flex-start;
         margin-block: .5em .25em;
         font-weight: 700;
         font-size: 2.2rem;
         color: darkorange;
         @media(max-width: 480px) {
          font-size: 1.6rem;
         }
        }
        p {
         text-align: justify;
         font-size: 2.2rem;
         font-weight: 700;
         color: #0081cc;
         small {
          font-weight: normal;
          font-size: 1.4rem;
          color: #333;
         }
         @media (max-width: 480px) {
          font-size: 1.4rem;
         }
         &.login_btn a {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          width: 300px;
          margin: 1em auto;
          padding: .3em 1em;
          background: #fff100;
          border: 1px solid var(--c_dbl);
          border-radius: calc(1px / 0);
          font-size: 2rem;
          color: var(--c_dbl);
          span {
           font-size: 1.4rem;
          }
          @media(max-width: 480px) {
           width: 90%;
           font-size: 1.6rem;
          }
         }
         &.soon a {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          width: 300px;
          margin: 1em auto;
          padding: .7em 1em;
          background: #999;
          border-radius: calc(1px / 0);
          font-size: 2rem;
          color: #fff;
          @media(max-width: 480px) {
           width: 90%;
           font-size: 1.6rem;
          }
          &:hover {
           opacity: 1;
          }
         }
        }
        dl {
         width: 100%;
         div {
          margin-block: 0 .5em;
          dt {
           font-weight: 700;
           font-size: 2rem;
           @media(max-width: 480px) {
            font-size: 1.6rem;
           }
           &::before {
            content: "■ "
           }
          }
          dd {}
         }
        }
        ul {
         li {
          margin-block: .25em;
          font-size: 2rem;
          @media(max-width: 480px) {
           font-size: 1.4rem;
          }
          &:before {
           content: "■ "
          }
         }
        }
       }
      }
      &::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: #003d76;
       @media (max-width: 480px) {
        height: calc(20px / 2 * tan(60deg));
        width: 20px;
        top: 50%;
       }
      }
      &:last-of-type::after {
       display: none;
      }
     }
    }
    p:has(strong) {
     width: fit-content;
     margin-block: 0 1.5em;
     margin-inline: auto;
     background: #fff100;
     padding: .2em .7em;
     font-size: 2.6rem;
     @media (max-width: 480px) {
      font-size: 1.7rem;
     }
    }
    div:has(.btn) {
     margin-block-end: 0;
    }
   }
  }
  &.stamp_spot {
   margin-block: 60px;
   background: #cce6f5;
   @media (max-width: 480px) {
    margin-block: 0;
   }
   > div {
    padding-block: 50px 20px;
    @media (max-width: 480px) {
     padding-block: 2em 1em;
    }
    .spot_map {
     .area_map {
      margin-block: 2.5em 4em;
      @media (max-width: 480px) {
       margin-block: 2em;
      }
      &.map_ pc {}
      &.map_sp {
       display: none;
       @media(max-width: 480px) {
        display: block;
       }
      }
     }
    }
    .spot_point {
     > div {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 4%;
      margin-block: 2.5em 1em;
      @media (max-width: 480px) {
       margin-block: 2em 0;
      }
      > div {
       width: calc(96% / 2);
       z-index: 1;
       @media (max-width: 480px) {
        width: 100%;
       }
       img {
        min-width: 100%;
        aspect-ratio: 4 / 3;
        border: 8px solid #fff;
        border-radius: 6px;
        object-fit: cover;
       }
       h4 {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-block: 1em .5em;
        font-weight: 600;
        font-size: 2.2rem;
        @media (max-width: 480px) {
         margin: 1em auto .3em;
         font-size: 1.6rem;
        }
        + p {
         width: fit-content;
         margin-inline: auto;
         font-size: 1em;
        }
       }
       button {
        appearance: none;
        position: relative;
        display: block;
        width: 100%;
        max-width: 80%;
        margin: 1.5em auto 2.5em;
        padding: .6em;
        border: none;
        border-radius: calc(1px / 0);
        font-weight: 600;
        font-size: 1.7rem;
        color: #fff;
        transition: opacity .3s;
        @media (hover: hover) {
         &:hover {
          cursor: pointer;
          opacity: .8;
          transition: opacity .3s;
         }
        }
        @media (max-width:480px) {
         padding: .8em;
         font-size: 1.4rem;
        }
        &::before {
         content: "";
         display: inline-block;
         width: 22px;
         height: 22px;
         background: url(../../common/images/circle-chevron-right-white.svg) center center / contain no-repeat;
         position: absolute;
         right: 15px;
         top: 50%;
         translate: 0 -50%;
         rotate: 90deg;
         @media (max-width: 480px) {
          width: 20px;
          height: 20px;
         }
        }
       }
      }
     }
    }
    /*-- ↓area_color --*/
    #along {
     h3 {
      background: var(--c_bl);
     }
     > div > div {
      img {
       border-color: var(--c_bl);
      }
      h4 {
       &::before {
        border-color: var(--c_bl);
        color: var(--c_bl);
       }
       + p a {
        background: #0068b7;
       }
      }
      button {
       background: #0068b7;
      }
     }
    }
    #guest {
     h3 {
      background: var(--c_or);
      span {
       display: inline-block;
      }
     }
     > div > div {
      img {
       border-color: var(--c_or);
      }
      h4 {
       &::before {
        border-color: var(--c_or);
        color: var(--c_or);
       }
       + p a {
        background: var(--c_or);
       }
      }
      button {
       background: var(--c_or);
      }
     }
    }
    #station {
     h3 {
      background: var(--c_gn);
      span {
       display: inline-block;
      }
     }
     > div > div {
      img {
       border-color: var(--c_gn);
      }
      h4 {
       &::before {
        border-color: var(--c_gn);
        color: var(--c_or);
       }
       + p a {
        background: var(--c_gn);
       }
      }
      button {
       background: var(--c_gn);
      }
     }
    }
   }
   p.attention {
    width: fit-content;
    margin-inline: auto;
    font-size: clamp(1.4rem, 1.6rem, 1.8rem);
   }
   ul.attention {
    width: fit-content;
    margin-inline: auto;
    padding-inline: 1.5em 0;
    font-size: clamp(1.4rem, 1.6rem, 1.8rem);
    li {
     list-style: disc;
    }
   }
   p.panel {
    margin: 1em;
    img {
     display: block;
     max-wisth: 430px;
     margin-inline: auto;
     border: 10px solid #fff;
     @media(max-width: 480px) {}
    }
   }
  }
  &.prize {
   > div {
    counter-reset: prize_number 0;
    @media (max-width: 480px) {
     padding-block: 2em;
    }
    > div {
     position: relative;
     /*border: 1px solid #003d76;*/
     border: 1px solid #0081cc;
     padding: 30px 40px 30px;
     /*background: #003d76;*/
     background: #0081cc;
     color: #fff;
     margin-block: 30px 0;
     @media (max-width: 480px) {
      margin-block: 2em 0;
      padding: 5% 4% 7%;
     }
     &#prize_notes {
      margin-block: 0;
      padding: 0 1em 1em;
      background: #fff;
      border: none;
      color: var(--c_dbl);
      h5 {
       margin-block: 2em 1em;
       font-weight: bold;
       text-align: center;
      }
      &::before, &::after {
       display: none;
      }
      ul {
       list-style: disc;
       padding-inline: 2em 0;
       li {}
      }
     }
     &::before {
      content: "";
      display: inline-block;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 80px 80px 0 0;
      border-color: #fff transparent transparent transparent;
      position: absolute;
      top: 0;
      left: 0;
      @media (max-width: 480px) {
       border-width: 60px 60px 0 0;
      }
     }
     &::after {
      counter-increment: prize_number 1;
      content: counter(prize_number) " ";
      font-size: 3rem;
      font-weight: 600;
      font-family: 'Jost', sans-serif;
      color: #003d76;
      position: absolute;
      top: 2px;
      left: 12px;
      @media (max-width: 480px) {
       font-size: 1.8em;
       top: -2px;
       left: 12px;
      }
     }
     h4:nth-of-type(1) {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 25px;
      margin-block: 0 1em;
      text-align: center;
      font-weight: 600;
      font-size: 2rem;
      line-height: 1.2;
      @media (max-width: 480px) {
       font-size: 1.7rem;
       gap: 20px;
      }
      @media (max-width:375px) {
       font-size: 1.42rem;
      }
      span {
       span {
        padding-inline: .2em;
        font-size: 1.5em;
       }
      }
      br {
       display: none;
       @media(max-width: 480px) {
        display: block;
       }
      }
      &::before, &::after {
       content: "";
       position: relative;
       bottom: -.2em;
       display: inline-block;
       width: 2px;
       height: 2em;
       background: #fff;
      }
      &::before {
       rotate: -40deg;
      }
      &::after {
       rotate: 40deg;
      }
     }
     h4:nth-of-type(2) {
      text-align: center;
      font-size: 2.2rem;
      font-weight: 700;
      color: #fff100;
      line-height: 1.5;
      @media (max-width: 896px) {
       padding-top: 5px;
      }
      @media (max-width:480px) {
       font-size: 1.64rem;
      }
      span {
       display: block;
       font-size: 2.8rem;
       @media (max-width: 480px) {
        font-size: 2rem;
       }
      }
     }
     div.prize_item {
      position: relative;
      figure {
       width: 70%;
       margin: 2em auto;
       @media (max-width: 480px) {
        width: 90%;
        margin-block: 0 1em;
       }
       img {
        width: 100%;
       }
       figcaption {
        width: fit-content;
        margin: 1.5em auto;
        @media (max-width: 480px) {
         margin-block: 1em;
        }
       }
      }
      .number {
       position: absolute;
       top: 0;
       left: 0;
       display: flex;
       justify-content: center;
       align-items: center;
       width: 160px;
       height: 100px;
       padding: 0 0 .3em;
       background: url(../images/fukidashi.svg) no-repeat center / contain;
       border-radius: calc(1px / 0);
       text-align: center;
       font-weight: 700;
       font-size: 2.2rem;
       line-height: 1.3;
       color: #003d76;
       filter: drop-shadow(2px 3px 1px rgba(0, 0, 0, 0.3));
       @media (max-width: 480px) {
        word-spacing: 120px;
        height: calc(12000px / 160);
        font-size: 1.6rem;
        line-height: 1.2;
       }
      }
     }
     dl {
      margin-block: 30px 0;
      div {
       display: flex;
       align-items: flex-start;
       gap: 10px 20px;
       margin-top: 1em;
       @media (max-width: 896px) {
        gap: 8px 15px;
       }
       @media (max-width:480px) {
        flex-direction: column;
       }
       dt {
        text-align: center;
        flex-shrink: 0;
        box-sizing: border-box;
        width: 140px;
        padding: .2em;
        background: #fff;
        color: #003d76;
        font-size: 1.6rem;
        font-weight: 600;
        @media (max-width: 896px) {
         width: 110px;
         font-size: 1.4rem;
        }
       }
       dd {
        padding: .2em;
        line-height: 1.8;
        font-size: 1.6rem;
        @media (max-width: 480px) {
         width: 100%;
         font-size: 1.4rem;
        }
       }
      }
     }
     ul.notes {
      margin-block: 2em;
      li {
       position: relative;
       margin-bottom: .3em;
       padding-left: 1.2em;
       font-size: 1.4rem;
       &::after {
        position: absolute;
        left: 0;
        content: "※";
        display: block;
       }
      }
     }
     &#prize01 {
      div.prize_item {
       padding-block: 80px 0;
       .number {
        top: 24px;
        left: 10%;
        @media(max-width: 896px) {
         top: 15px;
         left: -4%;
        }
        @media (max-width: 480px) {
         top: 10px;
         left: -8%;
        }
       }
      }
     }
     &#prize02 {
      div.prize_item {
       padding-block: 80px 0;
       .number {
        top: 24px;
        left: 10%;
        @media(max-width: 896px) {
         top: 15px;
         left: -4%;
        }
        @media (max-width: 480px) {
         top: 10px;
         left: -8%;
        }
       }
      }
     }
     &#prize03 {
      div.prize_item {
       padding-block: 80px 0;
       .number {
        top: 24px;
        left: 10%;
        @media(max-width: 896px) {
         top: 15px;
         left: -4%;
        }
        @media (max-width: 480px) {
         top: 10px;
         left: -8%;
        }
       }
      }
     }
     &#prize04 {
      div.prize_item {
       padding-block: 80px 0;
       .number {
        top: 30px;
        left: 8%;
        @media (max-width: 480px) {
         top: 10px;
         left: -8%;
        }
       }
      }
     }
    }
   }
  }
  &.information {
   > div {
    .block_attention {
     margin: 40px;
     color: #0081cc;
     @media (max-width: 480px) {
      margin: 2em auto;
     }
     p.btn_atn a {
      cursor: pointer;
      display: block;
      text-align: center;
      box-sizing: border-box;
      padding: 15px 50px;
      font-size: 2rem;
      font-weight: 600;
      line-height: 1.4;
      position: relative;
      list-style: none;
      border: 1px solid #0081cc;
      &::before, &::after {
       content: "";
       position: absolute;
       top: 50%;
       translate: 0 -50%;
       display: inline-block;
       background: #0081cc;
       transition: all .3s ease-out;
      }
      &::before {
       right: 28px;
       width: 4px;
       height: 20px;
      }
      &::after {
       right: 20px;
       width: 20px;
       height: 4px;
      }
     }
     button {
      appearance: none;
      cursor: pointer;
      display: block;
      text-align: center;
      width: 100%;
      padding: 15px 50px;
      background: #fff;
      font-size: 2rem;
      font-weight: 600;
      line-height: 1.4;
      position: relative;
      list-style: none;
      border: 1px solid #0081cc;
      color: currentColor;
      transition: all 0.3s;
      span {
       display: inline-block;
      }
      @media (max-width:896px) {
       font-size: 1.6rem;
      }
      @media (max-width:480px) {
       padding: 12px 55px;
       font-size: 1.4rem;
      }
      &::before, &::after {
       content: "";
       position: absolute;
       top: 50%;
       translate: 0 -50%;
       display: inline-block;
       background: #0081cc;
       transition: all .3s ease-out;
      }
      &::before {
       right: 28px;
       width: 4px;
       height: 20px;
      }
      &::after {
       right: 20px;
       width: 20px;
       height: 4px;
      }
     }
     & details {
      margin: 0 0 20px;
      background: #fff;
      border: 1px solid #0081cc;
      summary {
       cursor: pointer;
       display: block;
       text-align: center;
       box-sizing: border-box;
       padding: 15px 50px;
       font-size: 2rem;
       font-weight: 600;
       line-height: 1.4;
       position: relative;
       list-style: none;
       span {
        display: inline-block;
       }
       @media (max-width:896px) {
        font-size: 1.6rem;
       }
       @media (max-width:480px) {
        padding: 12px 55px;
        font-size: 1.4rem;
       }
       &::before, &::after {
        content: "";
        position: absolute;
        top: 50%;
        translate: 0 -50%;
        display: inline-block;
        background: #0081cc;
        transition: all .3s ease-out;
       }
       &::before {
        right: 28px;
        width: 4px;
        height: 20px;
       }
       &::after {
        right: 20px;
        width: 20px;
        height: 4px;
       }
      }
      div {
       padding: 3% 4%;
       border-top: 1px solid #0081cc;
       p {
        text-box-trim: none;
       }
       .box_contact {
        padding: 10px;
        border: 2px solid #0081cc;
        text-align: center;
        font-size: 1.8rem;
        + dl {
         padding: 1em;
         text-align: left;
         dt {
          margin-bottom: .5em;
          font-weight: 700;
          &::before {
           content: "■ ";
          }
         }
         dd {
          margin: 0 0 1.2em;
          p {
           text-box-trim: none;
           margin-block: 0 1.2em;
          }
          ul {
           list-style: disc;
           li {
            margin: 0 0 .5em 1.5em;
           }
          }
         }
        }
       }
      }
     }
    }
   }
  }
  &.banner {
   > div {
    @media (max-width: 480px) {
     margin-block: 2em 0;
    }
    ul {
     li {
      a img {
       display: block;
       margin: 0 0 4%;
      }
     }
     & + p {
      margin-block: 2.5em 1em;
      color: inherit;
      @media (max-width: 896px) {
       font-size: 1.4rem;
      }
      @media (max-width:480px) {
       font-size: 1.2rem;
      }
     }
    }
   }
  }
  ul.notes {
   margin-block: 2em;
   li {
    position: relative;
    margin-bottom: .3em;
    padding-left: 1.2em;
    font-size: 1.4rem;
    &::after {
     position: absolute;
     left: 0;
     content: "※";
     display: block;
    }
   }
  }
 }
}
/* modal */
.modal {
 display: none;
 visibility: hidden;
 opacity: 0;
 position: fixed;
 z-index: 8887;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 overflow: auto;
 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: 600px;
 width: 100%;
 height: auto;
 max-height: 86dvh;
 padding: 2em;
 background: rgba(255, 255, 255, 1);
 border-radius: 7px;
 transform: translate(-50%, -45%);
 transition: transform .5s;
 @media(max-width: 480px) {
  padding: 6% 4% 8%;
 }
}
.modal-container {
 /*spot*/
 img {
  width: 100%;
  display: block;
  border: 8px solid #fff;
  border-radius: 6px;
  &.along {
   border-color: var(--c_bl);
  }
  &.guest {
   border-color: var(--c_or);
  }
  &.station {
   border-color: var(--c_gn);
  }
 }
 h4 {
  margin-block: 1.2em 1em;
  text-align: center;
  font-weight: bold;
  font-size: 2rem;
  @media (max-width: 480px) {
   font-size: 1.6rem;
  }
  &:has(+p) {
   margin-block-end: .5em;
  }
  + p {
   width: fit-content;
   margin-block: 0 2em;
   margin-inline: auto;
  }
 }
 > div {
  padding-inline: .5em;
 }
 dl, ul, ol, p {
  font-size: 1.4rem;
 }
 dl {
  margin-block: 1.4em;
 }
 p:has(a) {
  margin: 1em 0;
  a {
   text-decoration: underline;
  }
 }
 /* entry_notes */
 > div.entry_notes {
  font-size: clamp(1.2rem, 1.4rem, 1.6rem);
  text-align: left;
  h4 {
   text-align: center;
   font-size: clamp(1.4rem, 1.6rem, 1.8rem);
  }
  h5 {
   margin-block: 1.5em .25em;
   font-weight: bold;
   &.head {
    margin-block: 1.5em 1em;
    text-align: center;
   }
   &:first-of-type {
    margin-block-start: 0;
   }
  }
  p {
   margin-block: 0 1em;
  }
  ul {
   list-style: disc;
   padding-inline: 1.5em 0;
   li {
    margin-block: 0 .5em;
   }
  }
  dl {
   margin: 0;
   div {
    margin-block: 0 1em;
    dt {
     margin-block: 0 .5em;
     &::before {
      content: "■ "
     }
    }
    dd {
     dl dt {
      &::before {
       content: "";
       margin-block: 0 .25em;
      }
     }
    }
   }
  }
 }
}
.modal-close {
 text-align: center;
 &:has(.btn_close) {
  text-align: right;
 }
}
.modal-close span {
 display: inline-block;
 width: 180px;
 margin-block: 2em 0;
 padding: .5em;
 border-radius: calc(1px / 0);
 background: var(--c_bl);
 text-align: center;
 font-size: min(1.4rem, 1.6rem);
 color: #fff;
 transition: opacity .3s;
 &.btn_close {
  position: relative;
  width: 30px;
  height: 30px;
  margin: 0;
  padding: 5px;
  background: none;
  border: 1px solid #666;
  border-radius: 0;
  &::before, &::after {
   content: "";
   position: absolute;
   display: inline-block;
   top: 50%;
   left: 50%;
   width: 30px;
   height: 3px;
   background: #333;
  }
  &::before {
   transform: translate(-50%, -50%) rotate(45deg);
  }
  &::after {
   transform: translate(-50%, -50%) rotate(-45deg);
  }
 }
 @media (hover: hover) {
  &:hover {
   opacity: .8;
   cursor: pointer;
   transition: opacity .3s;
  }
 }
}