/**
 * uaplus.css version 0.3.0
 */
@layer{*,*::after,*::before{box-sizing:border-box}:focus-visible{outline-offset:3px}html{-webkit-text-size-adjust:none;text-size-adjust:none}html{line-height:1.5}html{scrollbar-gutter:stable}h1{font-size:2em;margin-block:.67em}abbr[title]{cursor:help;text-decoration-line:underline;text-decoration-style:dotted}@media (forced-colors:active){mark{color:HighlightText;background-color:Highlight}}audio,iframe,img,svg,video{max-block-size:100%;max-inline-size:100%}fieldset{min-inline-size:0}label:has(+input:not([type="radio"],[type="checkbox"]),select,textarea){display:block}textarea:not([rows]){min-block-size:6em}button,input,select,textarea{font-family:inherit;font-size:inherit}[type="search"]{-webkit-appearance:textfield;appearance: textfield;}@supports (-webkit-touch-callout:none){[type="search"]{border:1px solid -apple-system-secondary-label;background-color:canvas}}input:where([type="tel"],[type="url"],[type="email"],[type="number"]):not(:placeholder-shown){direction:ltr}table{border-collapse:collapse;border:1px solid}th,td{border:1px solid;padding:.25em .5em;vertical-align:top}dialog::backdrop{background:oklch(0% 0 0 / .3)}dialog,[popover],dialog::backdrop{opacity:0;transition:opacity 150ms ease-out,display 150ms allow-discrete,overlay 150ms allow-discrete}dialog[open],:popover-open,dialog[open]::backdrop{opacity:1}@starting-style{dialog[open],:popover-open,dialog[open]::backdrop{opacity:0}}[hidden]:not([hidden="until-found"]){display:none!important}img{display:block}summary{cursor:default}iframe{border:none}@supports(position-area:block-end span-inline-end){[popover]{margin:0;position-area:block-end span-inline-end}}}


html {
  scroll-behavior: smooth;
}

.pc-only {
  @media screen and (width < 768px) {
    display: none !important;
  }
}

.sp-only {
  @media screen and (768px <= width) {
    display: none !important;
  }
}


body {
  margin: 0;
  font-family: YakuHanJP, "Zen Maru Gothic", sans-serif;
  font-weight: 400;
  font-size: clamp(0.813rem, 0.446rem + 1.09vw, 1.125rem);
  font-style: normal;
  text-align: justify;
}

h2 {
  display: flex;
  justify-content: center;
  padding-inline: 1rem;
}

main {
  overflow-x: hidden;
}

.medium {
  font-weight: 500;
}

.btn-wrap {
  padding: 2rem 0;
  display: flex;
  justify-content: center;
  gap: 1rem;
  &.pos-left {
    justify-content: flex-start;
  }
  @media screen and (width < 768px) {
    padding: 1rem 0;
  }
}

.btn {
  padding: 10px;
  span {
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.125rem 3.125rem 1.125rem 4.125rem;
    transition: all 0.1s ease-in-out;
    translate: 0 -10px;
    @media screen and (width < 768px) {
      padding: .5rem 1.5rem .5rem 2rem;
    }
  }
  @media (hover: hover) {
    &:hover {
      span {
        translate: 0 0;
      }
    }
  }
  @media (hover: none) {
    &:active {
      span {
        translate: 0 0;
      }
    }
  }
  &.round {
    span {
      border-radius: 5rem;
    }
  }
  &.large {
    max-width: 920px;
    width: 100%;
    span {
      padding: 2rem 4rem;
    }
  }
  &.small {
    width: fit-content;
    span {
      padding: 1rem 2rem;
      @media screen and (width < 768px) {
        padding: .5rem 1rem;
        img {
          height: 16px;
        }
      }
    }
  }
  
  &.blue {
    span {
      background-color: #2194D3;
      filter: drop-shadow(6px 10px 0 #0068B7);
      @media screen and (width < 768px) {
        filter: drop-shadow(3px 5px 0 #0068B7);
      }
    }
    @media (hover: hover) {
      &:hover {
        span {
          filter: drop-shadow(0 0 0 #0068B7);
        }
      }
    }
    @media (hover: none) {
      &:active {
        span {
          filter: drop-shadow(0 0 0 #0068B7);
        }
      }
    }
  }
  &.yellow {
    span {
      background-color: #FFF56E;
      filter: drop-shadow(6px 10px 0 #F8B62D);
      @media screen and (width < 768px) {
        filter: drop-shadow(3px 5px 0 #F8B62D);
      }
    }
    @media (hover: hover) {
      &:hover {
        span {
          filter: drop-shadow(0 0 0 #F8B62D);
        }
      }
    }
    @media (hover: none) {
      &:active {
        span {
          filter: drop-shadow(0 0 0 #F8B62D);
        }
      }
    }
  }
  &.orange {
    span {
      background-color: #EC682A;
      filter: drop-shadow(6px 10px 0 #E8380D);
      @media screen and (width < 768px) {
        filter: drop-shadow(3px 5px 0 #E8380D);
      }
    }
    @media (hover: hover) {
      &:hover {
        span {
          filter: drop-shadow(0 0 0 #E8380D);
        }
      }
    }
    @media (hover: none) {
      &:active {
        span {
          filter: drop-shadow(0 0 0 #E8380D);
        }
      }
    }
  }
  &.brown {
    span {
      background-color: #A6795D;
      filter: drop-shadow(6px 10px 0 #75553E);
      @media screen and (width < 768px) {
        filter: drop-shadow(3px 5px 0 #75553E);
      }
    }
    @media (hover: hover) {
      &:hover {
        span {
          filter: drop-shadow(0 0 0 #75553E);
        }
      }
    }
    @media (hover: none) {
      &:active {
        span {
          filter: drop-shadow(0 0 0 #75553E);
        }
      }
    }
  }
}


/* ----------------------------------------
   Hero Slider
---------------------------------------- */

.hero-area {
  position: relative;
  z-index: 1;
}

.hero-slider {
  max-height: 700px;
  @media screen and (width < 768px) {
    height: auto;
    aspect-ratio: 15 / 11;
  }
}

.swiper-wrapper {
  max-height: 700px;
}

.hero-slider-item {
  height: 100%;
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;

  }
}

@keyframes hero-slide-fadeout {
  /* 90%  { opacity: 1; }
  100% { opacity: 0; } */
}

.swiper .swiper-slide {
	height: auto;
}

.swiper .swiper-slide-item {
	height: 100%;
}

.hero-slider .swiper-slide-active {
  animation: hero-slide-fadeout 3s ease-in forwards;
}

header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 42px 20px;
  @media screen and (width < 768px) {
    padding: 14px;
  }
  .logo {
    position: absolute;
    left: 38px;
    top: 50%;
    translate: 0 -50%;
    max-width: 154px;
    width: 15.2vw;
    @media screen and (width < 768px) {
      left: 2.1333333333vw;
    }
  }

  .lp-title {
    margin: 0;
    max-width: 586px;
    width: 56vw;
  }
}

.change-contents {
  max-width: calc(100vw - 2rem);
  margin-inline: auto;
  .change-title  {
    margin-bottom: 0.5rem;
    & + p {
      margin: 0;
      font-size: clamp(0.875rem, 0.404rem + 1.4vw, 1.625rem);
    }
  }
}

.circle-contents {
  overflow: hidden;
  .circle-top {
    border-radius: 100vw 100vw 0 0 / 300px 300px 0 0;
    margin: 0 -200px;
    padding: 65px 232px;
    min-height: 300px;
    text-align: center;
    @media screen and (width < 768px) {
      border-radius: 100vw 100vw 0 0 / 200px 200px 0 0;
      margin: 0 -100px;
      padding: 2rem 1rem 4rem;
    }
    h3 {
      margin-top: 2rem;
      max-width: 66.6666666667vw;
      margin-inline: auto;
    }
    
  }
}

.lp-description {
  position: relative;
  margin-block-start: -100px;
  text-align: center;
  z-index: 2;
  @media screen and (width < 768px) {
    margin-block-start: -50px;
  }
  .circle-top {
    padding-top: 135px;
    background: #fff url(../img/bg-hero_pc.avif) no-repeat center 50px / 1191px 594px;
    @media screen and (width < 768px) {
      background: #fff url(../img/bg-hero_sp.avif) no-repeat center 220px / 94.7vw auto;
      padding-top: 70px;
    }
    > div {
      max-width: calc(100vw - 2rem);
      margin-inline: auto;
    }
  }
  h2 {
    margin-block: 0 50px;
    @media screen and (width < 768px) {
      margin-block: 0 27px;
    }
  }
  img {
    margin-inline: auto;
  }
  p {
    text-align: center;
    max-width: 33em;
    margin-inline: auto;
    line-height: 2;
  }
  .list-safes {
    list-style: none;
    padding: 0;
    margin: 50px 0 0;
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    @media screen and (width < 768px) {
      flex-direction: column;
      gap: 1rem;
      width: 58.6666666667vw;
      margin-inline: auto;
      translate: -8.1818181818% 0;
      img {
        width: 100%;
      }
    }
  }
  &::before {
    content: '';
    display: block;
    width: 307px;
    max-width: 23.2vw;
    aspect-ratio: 614 / 359;
    background: url(../img/trees-left.avif) no-repeat center center / contain;
    position: absolute;
    bottom: 0;
    left: 0;
    translate:0 10%;
    z-index: 0;
  }
  &::after {
    content: '';
    display: block;
    width: 324px;
    max-width: 24.3vw;
    aspect-ratio: 162 / 101;
    background: url(../img/trees-right.avif) no-repeat center center / contain;
    position: absolute;
    bottom: 0;
    right: 0;
    translate:0 10%;
    z-index: 0;
  }
}

.data-list {
  max-width: 56vw;
  padding-top: 2rem;
  margin: 2rem auto 0;
  position: relative;
  display: flex;
  justify-content: center;
  gap: 12px 1.75rem;
  @media screen and (width < 768px) {
    gap: 1rem;
  }
  &::before {
    content: '';
    display: block;
    width: 100%;
    height: 28px;
    background: url(../img/triangle.svg) no-repeat center center / contain;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: 0 auto auto;
  }
  dt {
    display: flex;
    justify-content: center;
    @media screen and (width < 768px) {
      height: 16px;
    }
  }
  dd {
    margin: 18px 0 0;
    padding: 0 10px 5px;
    background: linear-gradient(transparent 70%, #FFDF53 30%);
  }
}

.anxiety {
  position: relative;
  z-index: 1;
  padding: 78px 18px 40px;
  background: #3CB37A url(../img/bg-green.avif) no-repeat center center / 1335px auto;
  @media screen and (width < 768px) {
    padding: 1.5rem 18px;
  }
}

.contents-title {
  margin-top: 0;
  margin-inline: auto;
  display: flex;
  justify-self: center;
  @media screen and (width < 768px) {
    margin-bottom: 10px;
  }
}

.anxiety-contents {
  background-color: #fff;
  border-radius: 150px;
  padding: 60px 140px 90px;
  max-width: 970px;
  margin: 0 auto 38px;
  @media screen and (width < 768px) {
    border-radius: 56px;
    padding: 1.5rem;
    margin: 0 auto 1.5rem;
  }
  .list-anxiety {
    width: 90%;
    list-style: none;
    padding: 0;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    img {
      margin-inline: auto;
    }
    li {
      &.anxiety-2 {
        margin-right: -30px;
      }
    }
    @media screen and (width < 768px) {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      li {
        width: 70%;
        &:nth-child(even) {
          margin-left: auto;
        }
        &.anxiety-2, &.anxiety-3 {
          width: 80%;
        }
        &.anxiety-2 {
          margin-top: -.9rem;
        }
        &.anxiety-4 {
          margin-top: -.9rem;
        }
      }
    }
  }
  
  .anxiety-description {
    margin-block: 1rem 1.5rem;
    text-align: center;
    font-size: clamp(0.875rem, 0.299rem + 1.52vw, 1.25rem);
    max-width: 23em;
    margin-inline: auto;
  }
}

.list-anxiety-safety {
  display: flex;
  flex-direction: column;
  gap: 3.75rem;
  @media screen and (width < 768px) {
    gap: 0;
  }
  article {
    padding: 2rem 0;
    @media screen and (width < 768px) {
      padding: 1rem 0;
    }
    @media screen and (768px <= width) {
      border-radius: 5px;
      border-width: 2px;
      border-style: solid;
      position: relative;
      &:nth-child(odd) {
        .voice {
          flex-direction: row-reverse;
          margin-inline: 60px 50px;
        }
        /* .voice-text {
          &::before {
            scale: -1 1;
            margin-inline: auto -1.25rem;
          }
          &::after {
            scale: 1;
            margin-inline: auto -1.25rem;
          }
        } */
      }
    }
    &.anxiety-safety-item-1 {
      border-color: #F18B00;
      h4 {
        color: #F18B00;
        &::after {
          background-color: #F18B00;
        }
      }
      @media screen and (width < 768px) {
        figcaption {
          color: #F18B00;
        }
      }

    }
    &.anxiety-safety-item-2 {
      border-color: #EA5E8B;
      h4 {
        color: #EA5E8B;
        &::after {
          background-color: #EA5E8B;
        }
      }
      @media screen and (width < 768px) {
        figcaption {
          color: #EA5E8B;
        }
      }
    }
    &.anxiety-safety-item-3 {
      border-color: #85C023;
      h4 {
        color: #85C023;
        &::after {
          background-color: #85C023;
        }
      }
      /* @media screen and (768px <= width) {
        p {
          max-width: 21em;
        }
      } */
      @media screen and (width < 768px) {
        figcaption {
          color: #85C023;
        }
      }
    }
  }
  .anxiety-safety-title {
    margin: 0;
    display: flex;
    justify-content: center;
    display: flex;
    align-items: stretch;
  }
  .anxiety-safety-no {
    @media screen and (width < 768px) {
      display: none;
    }
    @media screen and (768px <= width) {
      position: absolute;
      top: 0;
      left: 0;
      translate: -50% -30%;
    }
  }
  .list-anxiety-safety-item {
    list-style: none;
    padding: 0;
    margin: 30px 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1em;
    @media screen and (width < 768px) {
      margin: 1rem 0 0;
      gap: 0.5em;
    }
    li {
      @media screen and (width < 768px) {
        height: 42px;
      }
    }
  }
  .voice {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    margin-inline: 50px 60px;
    @media screen and (width < 768px) {
      flex-direction: column;
      gap: .5rem;
      margin-inline: 0;
    }
    .voice-fig {
      margin-inline: 0;
      margin-bottom: 0;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      @media screen and (width >= 768px) {
        width: 142px;
      }
      img {
        max-width: 27.2vw;
        @media screen and (width < 768px) {
          width: 86px;
        }
      }
      figcaption {
        width: 100%;
        margin-inline: auto;
        margin-block-start: -10px;
        padding: 0.5em .5em;
        position: relative;
        line-height: 1.3;
        @media screen and (768px <= width) {
          background-color: #7F4F21;
          color: #fff;
          font-size: 0.8125rem;
        }
        @media screen and (width < 768px) {
          font-size: 0.8125rem;
        }
      }
      @media screen and (width < 768px) {
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
      }
    }
    .voice-text {
      position: relative;
      flex: 1;
      margin-bottom: 1rem;
      /* display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center; */
      /* @media screen and (768px <= width) {
        &::before, &::after {
          content: '';
          display: block;
          width: 93px;
          height: 42px;
          background: url(../img/dash.svg) no-repeat center center / contain;
          margin-inline: -1.25rem auto;
        }
        &::before {
          margin-block-end: -1rem;
        }
        &::after {
          scale: -1 1;
        }
      } */
    }
    h4 {
      /* font-size: 1.3125rem; */
      font-size: clamp(0.813rem, 0.468rem + 1.02vw, 1.125rem);
      margin: 0 0 0.5rem;
      font-weight: 400;
      display: inline-flex;
      flex-direction: column;
      &::after {
        content: '';
        display: inline-block;
        width: 100%;
        height: 2px;
        border-radius: 2px;
      }
    }
    p {
      margin: 0;
      /* font-size: 0.875rem; */
      font-size: clamp(0.813rem, 0.468rem + 1.02vw, 1.125rem);
      /* @media screen and (768px <= width) {
        max-width: 18em;
      } */
    }
  } 
}

.program {
  padding: 100px 18px 30px;
  @media screen and (width < 768px) {
    padding: 1.5rem 18px 30px;
  }
  details {
    padding-top: 42px;
    max-width: 880px;
    margin: 0 auto 60px;
    border-radius: 48px;
    position: relative;
    > * {
      position: relative;
    }
    @media screen and (width < 768px) {
      padding-top: 0;
      margin: 20px auto 0;
      &:not([open]) {
        background: none !important;
      }
      &[open] {
        border-radius: 1rem;
      }
    }
  }
  summary {
    list-style-type: none;
    display: flex;
    justify-content: center;
    padding: 2rem 0 1rem;
    
    &:not(.blue) {
      @media screen and (width < 768px) {
        /* height: 38px; */
        width: 84.8vw;
        margin-inline: auto;
        translate: 0 -50%;
        span {
          width: 100%;
          img {
            width: 100%;
          }
        }
      }
    }
    padding: 0;
  }
  @media (min-width: 768px) {
    details[data-no-toggle] summary {
      cursor: default;
      pointer-events: none;
    }
  }
  .program-contents {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* .contents-title {
      margin-bottom: 50px;
    } */
    p {
      margin: 2rem 0 0;
      display: flex;
      justify-content: center;
      @media screen and (width < 768px) {
        margin-top: 0;
        img {
          height: 18px;
        }
      }
      
    }
    margin-block-start: 1.5rem;
    .illust {
      display: block;
      position: absolute;
      @media screen and (width < 768px) {
        display: none !important;
      }
    }
    .program-day1-bg-1 {
      top: 2%;
      right: -11%;
      z-index: 0;
    }
    .program-day1-bg-2 {
      top: 40%;
      left: -16%;
      z-index: 0;
    }
    .program-day1-bg-3 {
      bottom: 8%;
      left: -11.5%;
      z-index: 0;
    }
    .program-day1-bg-4 {
      bottom: -3%;
      right: -15%;
      z-index: 0;
    }
    .program-day2-bg-1 {
      top: 6%;
      right: 6%;
      z-index: 0;
    }
    .program-day2-bg-2 {
      top: 30%;
      right: -16%;
      z-index: 0;
    }
    .program-day2-bg-3 {
      bottom: 17%;
      left: -20%;
      z-index: 0;
    }
    .program-day2-bg-4 {
      bottom: -2.5%;
      right: -2.5%;
      z-index: 0;
    }
    .program-day3-bg-1 {
      top: 7%;
      right: -21%;
      z-index: 0;
    }
    .program-day3-bg-2 {
      top: 35%;
      left: -12%;
      z-index: 0;
    }
    .program-day3-bg-3 {
      bottom: 10%;
      left: -17%;
      z-index: 0;
    }
    .program-day3-bg-4 {
      bottom: 5%;
      right: -18%;
      z-index: 0;
    }
  }
  .program-schedule {
    display: block;
    margin-top: 1.5rem;
    @media screen and (width < 768px) {
      width: calc(100vw - 36px);
      img {
        width: 100vw;
        max-width: 100vw;
        translate: -18px 0 !important;
      }
      
      /* width: 100vw; */
    }
  }
  .program-day1 {
    background-color: #FACD91;
    @media screen and (width < 768px) {
      summary {
        filter: drop-shadow(8px 5px 0 #EB5200);
      }
    }
  }
  .program-day2 {
    background-color: #F8CAD5;
    @media screen and (width < 768px) {
      summary {
        filter: drop-shadow(8px 5px 0 #E0225B);
      }
      .program-schedule {
        padding-bottom: 20px;
      }
    }
  }
  .program-day3 {
    background-color: #C8DF97;
    @media screen and (width < 768px) {
      summary {
        filter: drop-shadow(8px 5px 0 #2F8C15);
      }
    }
  }
  details {
    summary {
      transition: filter 0.3s ease-in-out;
    }
    &[open] {
      summary {
        filter: drop-shadow(0 0 0 #E0225B) !important;
      }
    }
  }
}

.wave-top {
  mask: 
    radial-gradient(2.24em at 50% 3em,#000 99%,#0000 101%) calc(50% - 2em) 0/4em 100%,
    radial-gradient(2.24em at 50% -2em,#0000 99%,#000 101%) 50% 1em/4em 100% repeat-x;
}

.village {
  background: #F3F0E8;
  padding-block: 7rem 3rem;
  @media screen and (width < 768px) {
    padding-block: 4rem 3rem;
  }
}
.village-contents {
  padding-inline: 1rem;
  .contents-title {
    max-width: 58.6666666667vw;
  }
  .village-description {
    text-align: center;
    font-size: clamp(0.813rem, 0.299rem + 1.52vw, 1.25rem);
    max-width: 34em;
    margin-inline: auto;
  }
}

.area-map {
  max-width: 940px;
  margin: 54px auto;
  position: relative;
  @media screen and (width < 768px) {
    margin: 2rem auto;
  }
}

.equipment-note {
  text-align: center;
  margin: auto;
  span {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    &::after {
      content: '';
      display: inline-block;
      width: 100%;
      height: 2px;
      border-radius: 2px;
      background-color: #4FB233;
    }
  }
  
}
.list-equipment {
  width: 80vw;
  list-style: none;
  margin: 2rem auto;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 3px;
  li {
    &:nth-child(even) {
      button {
        border-radius: 0 40px 40px 0;
        flex-direction: row-reverse;
      }
    }
    &:nth-child(odd) {
      button {
        border-radius: 40px 0 0 40px;
      }
    }
  }
  button {
    background: #4fb233;
    color: #fff;
    font-weight: 500;
    width: 100%;
    font-size: 0.8125rem;
    padding-inline: 6px;
    border: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-align: left;
    line-height: 1.04;
    height: 44px;
    img {
      width: 32px;
    }
    span {
      margin-right: auto;
    }
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    translate: 0 -20px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

.dialog {
  padding: 0;
  border: none;
  border-radius: 16px;
  max-width: min(90vw, 890px);
  width: 100%;
  background: none;
  &::backdrop {
    background: rgb(243 240 232 / 0.7);
    backdrop-filter: blur(4px);
  }
  &[open] {
    animation: fadeInDown 0.3s ease-out both;
  }
  .dialog-container {
    padding: 18px;
    position: relative;
  }
  .closeButton {
    position: absolute;
    top: 16px;
    right: 0;
    background: none;
    border: none;
    cursor: pointer;
    @media screen and (width < 768px) {
      top: 3px;
      right: 6px;
    }
    
    svg g {
      fill: var(--dialog-color, #000);
    }
    svg path[stroke] {
      stroke: var(--dialog-color, #000);
    }
    svg {
      @media screen and (width < 768px) {
        width: 32px;
      }
    }
  }
  .dialog-inner {
    background-color: var(--dialog-color, #000);
    margin: 16px 18px 0 0;
    padding: 18px;
    border-radius: 34px;
    max-width: 890px;
    width: 100%;
    @media screen and (width < 768px) {
      padding: 6px;
      border-radius: 22px;
    }
  }
  .dialog-content {
    background-color: #fff;
    padding: 60px;
    border-radius: 16px;
    @media screen and (width < 768px) {
      padding: 2rem .5rem;
    }
  }
  .dialog-content-title {
    display: flex;
    justify-content: center;
    margin: 0;
    @media screen and (width < 768px) {
      height: 20px;
    }
  }
  .dialog-content-text {
    text-align: center;
    font-size: clamp(0.813rem, 0.299rem + 1.52vw, 1.25rem);
  }

  .dialog-content-fig {
    margin: 1.5rem auto 0;
    display: flex;
    gap: 1.5rem;
    max-width: 62.6666666667vw;
    align-items: center;
    justify-content: center;
    @media screen and (width < 768px) {
      flex-direction: column;
      margin: 0 auto;
      gap: 1rem;
    }
    img {
      @media screen and (width >= 768px) {
        flex: 1;
      }
    }
  }
  
}

.list-marker {
  list-style: none;
  padding: 0;
  margin: 0;
  li {
    position: absolute;
  }
  button {
    background: none;
    border: none;
    cursor: pointer;
    &:hover {
      opacity: 0.7;
    }
  }
  img {
    width: 38px;
    height: 47px;
    object-fit: contain;
    display: block;
  }

  #marker-entrance {
    left: 52%;
    top: 71.5%;
  }
  #marker-a {
    left: 42%;
    top: 69%;
  }
  #marker-b {
    left: 38%;
    top: 55.5%;
  }
  #marker-c {
    left: 36%;
    top: 28%;
  }
  #marker-d {
    left: 44%;
    top: 28%;
  }
  #marker-e {
    left: 54%;
    top: 29.5%;
  }
  #marker-1 {
    left: 46.5%;
    top: 59%;
  }
  #marker-2 {
    left: 47.5%;
    top: 53%;
  }
  #marker-3 {
    left: 65%;
    top: 46%;
  }
  #marker-tent {
    left: 65.5%;
    top: 33%;
  }
  #marker-play {
    left: 49.5%;
    top: 41%;
  }
  #marker-fire {
    left: 35.5%;
    top: 42%;
  }
  #marker-cook-1 {
    left: 58%;
    top: 71%;
  }
  #marker-cook-2 {
    left: 42%;
    top: 50%;
  }
  #marker-cook-3 {
    left: 34.6%;
    top: 50%;
  }
  #marker-view-1 {
    left: 56%;
    top: 65.5%;
  }
  #marker-view-2 {
    left: 71%;
    top: 48.5%;
  }
  #marker-admin {
    left: 58.5%;
    top: 58%;
  }
  #marker-bath {
    left: 56%;
    top: 51.5%;
  }
  #marker-wc-1 {
    left: 60%;
    top: 52%;
  }
  #marker-wc-2 {
    left: 64%;
    top: 41%;
  }
}


.gallery {
  margin-block-start: -50px;
  /* --mask:
  radial-gradient(3.35em at 50% 4.5em,#000 99%,#0000 101%) calc(50% - 3em) 0/6em 100%,
  radial-gradient(3.35em at 50% -3em,#0000 99%,#000 101%) 50% 1.5em/6em 100% repeat-x;
-webkit-mask: var(--mask);
        mask: var(--mask); */
        mask: 
    radial-gradient(2.24em at 50% 3em,#000 99%,#0000 101%) calc(50% - 2em) 0/4em 100%,
    radial-gradient(2.24em at 50% -2em,#0000 99%,#000 101%) 50% 1em/4em 100% repeat-x;
    
  @media screen and (width < 768px) {
    mask: 
    radial-gradient(26.83px at 50% 36px,#000 99%,#0000 101%) calc(50% - 24px) 0/48px 100%,
    radial-gradient(26.83px at 50% -24px,#0000 99%,#000 101%) 50% 12px/48px 100% repeat-x;
  }
}

.list-gallery {
  margin: 0;
  overflow: hidden;
}

.gallery-track {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  will-change: transform;
}

.gallery-slide {
  flex-shrink: 0;
  width: 40%;
  @media screen and (width < 768px) {
    width: 50%;
  }
  aspect-ratio: 558 / 302;
  img {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
}

.staff {
  margin-block-start: -50px;
  padding-block: 10rem 20rem;
  background-color: #FFF9AE;
  margin-block-start: -50px;
  /* --mask:
    radial-gradient(3.35em at 50% 4.5em,#000 99%,#0000 101%) calc(50% - 3em) 0/6em 100%,
    radial-gradient(3.35em at 50% -3em,#0000 99%,#000 101%) 50% 1.5em/6em 100% repeat-x;
  -webkit-mask: var(--mask);
          mask: var(--mask); */
          mask: 
    radial-gradient(2.24em at 50% 3em,#000 99%,#0000 101%) calc(50% - 2em) 0/4em 100%,
    radial-gradient(2.24em at 50% -2em,#0000 99%,#000 101%) 50% 1em/4em 100% repeat-x;
      
  @media screen and (width < 768px) {
    padding: 4rem 40px 7rem;
    margin-block-start: -1rem;
    mask: 
    radial-gradient(26.83px at 50% 36px,#000 99%,#0000 101%) calc(50% - 24px) 0/48px 100%,
    radial-gradient(26.83px at 50% -24px,#0000 99%,#000 101%) 50% 12px/48px 100% repeat-x;

  }
}

.staff-contents {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 754px;
  margin-inline: auto;
  
  .staff-title {
    margin: 0;
    text-align: center;
  }
  figure {
    margin: 60px 0 40px;
    @media screen and (width < 768px) {
      margin: 30px 0 20px;
    }
  }
  p {
    margin: 0;
  }
}

.change {
  position: relative;
  margin-block-start: -14rem;
  position: relative;
  @media screen and (width < 768px) {
    margin-block-start: -3rem;
  }
  &::before, &::after {
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    max-width: 40vw;
    width: 427px;
    aspect-ratio: 427 / 162;
  }
  &::before {
    background: url(../img/mt-left.avif) no-repeat left bottom / contain;
    left: 0;
  }
  &::after {
    background: url(../img/mt-right.avif) no-repeat right bottom / contain;
    right: 0;
  }
  .circle-top {
    margin-bottom: 0;
    background-color: #D4E7BB;
  }
  .change-title {
    display: flex;
    justify-content: center;
    @media screen and (width < 768px) {
      height: 36px;
    }
  }
  .list-change {
    max-width: 1000px;
    list-style: none;
    margin: 3rem auto;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    @media screen and (width < 768px) {
      margin-top: 2rem;
      grid-template-columns: 1fr;
      gap: 2rem;
    }
    
    li {
      position: relative;
      text-align: left;
      display: flex;
      align-items: flex-end;
      &:nth-child(odd) {
        flex-direction: row-reverse;
        .note_wrap {
          margin-inline: -2.5rem 0;
        }
      }
    }
    figure {
      width: 145px;
      margin: 0;
      position: relative;
      z-index: 1;
      @media screen and (width < 768px) {
        width: 126px;
        translate: 0 .5rem;
      }
    }
    p {
      margin: 0;
      letter-spacing: 0.04em;
    }
    .note_wrap {
      box-shadow: 3.2px 3.2px 6.4px 0 rgba(168, 212, 164, 0.75);
      max-width: 380px;
      background-color: #fff;
      padding: 1rem 2rem 2rem;
      border-radius: 0.5rem;
      flex: 1;
      margin-inline: 0 -2.5rem;
    }
    .note {
      font-size: clamp(0.875rem, 0.508rem + 1.09vw, 1.188rem);
      background-image: linear-gradient(
      90deg,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,0) 50%,
      #ffff 50%,
      #ffff 50%
    ), linear-gradient(
      180deg,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,0) 97%,
      #3CB37A 97%,
      #3CB37A 100%
    );
  background-size:
    8px 100%,
    100% 2em;
  line-height:2;

    }
  }
}

.purpose {
  background-color: #F39800;
  padding: 100px 1rem;
  @media screen and (width < 768px) {
    padding-top: 30px;
  }
  .purpose-contents {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 90px 2.5rem;
    position: relative;
    max-width: 1002px;
    margin-inline: auto;
    background: url(../img/purpose-bg.avif) no-repeat center center / 100% 100%;
    @media screen and (width < 768px) {
      padding: 3rem 2.5rem;
    }
    h2 {
      display: flex;
      justify-content: center;
      margin: 0;
      padding-inline: 0;
    }
    p {
      font-size: clamp(0.813rem, 0.152rem + 1.96vw, 1.375rem);
      line-height: 2;
      text-align: center;
      max-width: 27em;
      margin-block: 0.5rem 0;
    }
    figure {
      position: absolute;
      bottom: -50px;
      @media screen and (width < 768px) {
        bottom: -80px;
      }
    }
    .fig-cen {
      max-width: 18.4vw;
      left: 3%;
      @media screen and (width < 768px) {
        left: 0;
      }
    }
    .fig-ral {
      max-width: 16vw;
      right: 3%;
      @media screen and (width < 768px) {
        right: 0;
      }
    }
  }
}

.faq {
  position: relative;
  background-color: #C0DDF4;
  padding: 100px 2rem 60px;
  @media screen and (width < 768px) {
    padding: 50px 2rem 30px;
  }
  &::before, &::after {
    content: '';
    display: block;
    width: 100%;
    height: 3px;
    background: url(../img/faq-bg.svg) repeat-x center center / auto 100%;
    position: absolute;
    left: 0;
    @media screen and (width < 768px) {
      height: 1px;
    }
  }
  &::before {
    top: 1rem;
  }
  &::after {
    bottom: 1rem;
  }

  .faq-title {
    margin: 0 auto;
    display: flex;
    justify-content: center;
    max-width: 53.3333333333vw;

  }
  .list-faq {
    max-width: 990px;
    margin: 5em auto 4.375em;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: start;
    gap: 2.375rem 3rem;
    @media screen and (width < 768px) {
      margin: 1rem auto 2rem;
      grid-template-columns: 1fr;
      gap: 1.5rem;
      width: 70vw;
      margin-inline: auto;
      .btn {
        max-width: 70vw !important;
        width: 100%;
        span {
          padding: 0.5rem 0.5rem !important;

        }
        img {
          height: 1rem;
        }
      }
    }
    
  }
  details {
    position: relative;
    &[open] {
      z-index: 10;
    }
  }
  .btn {
    padding: 0;
    list-style-type: none;
    position: relative;
    z-index: 3;
    max-width: 66.1333333333vw;
  }
  .faq-a {
    width: calc(100% - 20px);
    position: absolute;
    background-color: #fff;
    top: 2rem;
    left: 10px;
    z-index: 2;
    padding: 4rem 3rem 2rem 2rem;
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    &::before {
      content: '';
      display: block;
      background: url(../img/faq-a.svg) no-repeat center center / contain;
      width: 1.5em;
      aspect-ratio: 23 / 17;
      translate: 0 5px;
      @media screen and (width < 540px) {
        width: 13px;
      }
    }
    @media screen and (width < 768px) {
      padding: 2rem 1.5rem 1.5rem 1rem;
      width: calc(100% - 10px);
      top: 1rem;
      left: 5px;
    }
    p {
      flex: 1;
      margin: 0;
      font-size: clamp(0.75rem, 0.31rem + 1.3vw, 1.125rem);
      font-weight: 500;
    }
  }
}

.dekita {
  padding: 3rem 1rem 5rem;
  background-image: linear-gradient(0deg, transparent 35px, #FAEE00 36px),linear-gradient(90deg,  transparent 35px, #FAEE00 36px);
  background-color: #BEDB8E;
  background-size: 36px 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  @media screen and (width < 768px) {
    padding: 1rem 1rem;
  }
  .dekita-contents {
    position: relative;
    figure {
      margin-inline: 0;
    }
    .btn-wrap {
      position: absolute;
      top: 67%;
      left: 50%;
      translate: -50% 0;
      max-width: 80vw;
      width: 62.8%;
      padding: 0;
      @media screen and (width < 768px) {
        top: 60%;
        width: 82.2857142857%;
      }
    }
  }
}

.project {
  padding: 90px 1rem 50px;
  @media screen and (width >= 768px) {
    background: #D1ECFB url(../img/project-bg_pc.avif) no-repeat center center / auto 100%;
  }
  @media screen and (width < 768px) {
    background: #D1ECFB url(../img/project-bg_sp.avif) repeat-y center top / 100% auto;
    padding: 1.75rem 50px 0;
  }
  .project-contents {
    max-width: 855px;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    @media screen and (width < 768px) {
      width: 74.6666666667vw;
      .project-title, p {
        max-width: 68vw;
        margin-inline: auto;
      }
      .project-title {
        max-width: 74.6666666667vw;
        margin-block: 0;
      }
      p {
        margin-top: 0.5rem;
        line-height: 1.64;
      }
    }
  }
  
  p {
    max-width: 44em;
    line-height: 1.92;
  }
  .list-project {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }
  .project-1 {
    @media screen and (width >= 768px) {
      background: url(../img/project-bg-1_pc.avif) no-repeat center center / 100% 100%;
    }
    @media screen and (width < 768px) {
      background: url(../img/project-bg-1_sp.avif) no-repeat center center / 100% 100%;
    }
  }
  .project-2 {
    @media screen and (width >= 768px) {
      background: url(../img/project-bg-2_pc.avif) no-repeat center center / 100% 100%;
    }
    @media screen and (width < 768px) {
      background: url(../img/project-bg-2_sp.avif) no-repeat center center / 100% 100%;
    }
  }
  .project-3 {
    @media screen and (width >= 768px) {
      background: url(../img/project-bg-3_pc.avif) no-repeat center center / 100% 100%;
    }
    @media screen and (width < 768px) {
      background: url(../img/project-bg-3_sp.avif) no-repeat center center / 100% 100%;
    }
  }
  .project-4 {
    @media screen and (width >= 768px) {
      background: url(../img/project-bg-4_pc.avif) no-repeat center center / 100% 100%;
    }
    @media screen and (width < 768px) {
      background: url(../img/project-bg-4_sp.avif) no-repeat center center / 100% 100%;
    }
  }
}

.info {
  padding: 3rem 1rem 5rem;
  background-image: linear-gradient(0deg, transparent 35px, #FAEE00 36px),linear-gradient(90deg,  transparent 35px, #FAEE00 36px);
  background-color: #BEDB8E;
  background-size: 36px 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 1rem;
  @media screen and (width < 768px) {
    padding: 1.5rem;

  }
  .info-title {
    padding-inline: 0;
  }
  .info-contents {
    position: relative;
    background-color: #F2F7E2;
    border-radius: 144px;
    padding: 70px 100px 50px;
    max-width: 970px;
    margin-inline: auto;
    @media screen and (width < 768px) {
      border-radius: 50px;
      padding: 20px;
      
    }
  }
  h2 {
    display: flex;
    justify-content: center;
    margin: 0;
  }
  
  p {
    text-align: center;
    font-size: clamp(0.813rem, 0.299rem + 1.52vw, 1.25rem);
  }
  figure {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin: 2rem 0 0;
    @media screen and (width < 768px) {
      gap: 1rem;
      img {
        width: calc(50% - 0.5rem);
      }
    }
  }
  button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem 0;
    border-bottom: 2px solid #75553E;
    color: #000;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: center;
    line-height: 1;
    font-weight: 500;
    &::after {
      content: '';
      display: block;
      width: 20px;
      height: 12px;
      background: url(../img/arrow-down.svg) no-repeat center center / contain;
      translate: 0 2px;
    }
  }
}

.info-detail {
  display: none;
  opacity: 0;
  transition: opacity 0.4s ease;
  h3 {
    margin-block: 3rem 1.5rem;
    @media screen and (width < 768px) {
      margin-block: 1.5rem 1rem;
      height: 12px;
    }
  }
}
.info-detail-contents {
  background-color: #fff;
  border-radius: 20px;
  padding: 1rem 2rem;
  font-size: clamp(0.813rem, 0.299rem + 1.52vw, 1.25rem);
  @media screen and (width < 768px) {
    padding: 1rem;
  }
  p {
    text-align: left;
    margin: 0;
  }
  dl {
    display: table;
    margin: 0;
    width: 100%;
    >div {
      display: table-row;
      & + div {
        background: url(../img/dash-2.svg) repeat-x center top;
        @media screen and (width < 768px) {
          background-size: auto 1px;
        }
      }
      dt, dd {
        display: table-cell;
        padding: 1.5rem;
        vertical-align: top;
        @media screen and (width < 768px) {
          padding: .5rem;
          font-size: 11px;
        }
      }
      dt {
        padding-top: 1.75rem;
        @media screen and (width < 768px) {
          width: 64px;
          padding-top: 0.75rem;
          padding-left: 0;
          img {
            width: auto;
            height: 12px;
          }
        }
      }
      dd {
        width: auto;
      }
    }
  }
}


.fig-cen, .fig-ral {
  &[style*="visibility: visible;"] {
    .metronome {
      animation: metronome steps(2) 1s;
      animation-iteration-count: 5;
    }
  }
}



@keyframes metronome {
  0% {
    rotate: 10deg;
  }

  100% {
    rotate: -10deg;
  }
}

@keyframes details-fadein {
  from { opacity: 0; translate: 0 -8px; }
  to   { opacity: 1; translate: 0 0; }
}

details[open] > :not(summary) {
  animation: details-fadein 0.4s ease forwards;
}

.note-contents {
  max-width: 926px;
  width: 100%;
  margin-inline: auto;
  &[open] {
    summary {
      span {
        translate: 0 0;
        filter: drop-shadow(0 0 0 #0068B7) !important;
      }
    }
  }
  summary {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 0;
    span {
      width: 100%;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 1.125rem 3.125rem 1.125rem 4.125rem;
      transition: all 0.1s ease-in-out;
      translate: 0 -10px;
    }
    @media (hover: hover) {
      &:hover {
        span {
          translate: 0 0;
        }
      }
    }
    @media (hover: none) {
      &:active {
        span {
          translate: 0 0;
        }
      }
    }
    &.blue {
      @media screen and (width < 768px) {
        width: 80vw;
        margin-inline: auto;
      }
      span {
        background-color: #2194D3;
        filter: drop-shadow(10px 6px 0 #0068B7);
        padding: 9px 3.125rem 9px 4.125rem;
        img {
          min-height: 18px;
        }
      }
      @media (hover: hover) {
        &:hover {
          span {
            filter: drop-shadow(0 0 0 #0068B7);
          }
        }
      }
      @media (hover: none) {
        &:active {
          span {
            filter: drop-shadow(0 0 0 #0068B7);
          }
        }
      }
    }
  }
}

.program-note {
  position: relative;
  z-index: 1;
  margin-top: -4px;
  width: 100%;
  background-color: #DDEDF9;
  padding: 3rem 2rem;
  @media screen and (width < 768px) {
    padding: 1.5rem 1rem;
  }
  .list-note {
    font-size: clamp(0.813rem, 0.592rem + 0.65vw, 1rem);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem 3.375rem;
    @media screen and (width < 768px) {
      grid-template-columns: 1fr;
      gap: 1rem;
    }
    ul {
      margin: 0;
      li {
        margin-block: 0.5rem;
      }
    }
  }
  .note-about {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    h3 {
      max-width: 53.8666666667vw;
      margin: 0;
    }
    p {
      margin: 0;
    }
  }
  .note-list {
    position: relative;
    display: flex;
    flex-direction: column;
    figure {
      margin: 0;
      display: flex;
      justify-content: center;
      position: relative;
      z-index: 2;
      @media screen and (width < 768px) {
        height: 179px;
      }
    }
    li {
      position: relative;
    }
  }
  .note-list-text {
    position: relative;
    z-index: 1;
    flex: 1;
    background-color: #fff;
    margin-top: -2rem;
    padding: 70px 1.5rem 2rem;
    @media screen and (width < 768px) {
      padding-top: 40px;
    }
    h3 {
      margin: 0 auto 1rem;
      display: flex;
      justify-content: center;
    }
    .with-arrow {
      padding-left: 1.3rem;
      list-style-image: url(../img/note-arrow.svg);
    }
  }
}

.to-top {
  margin-left: auto;
  display: block;
  width: 46px;
  position: absolute;
  bottom: -.5rem;
  right: -.5rem;
  span {
    transition: all 0.1s ease-in-out;
    background-color: #EC682A;
    filter: drop-shadow(4px 5px 0 #F18900);

    @media screen and (width < 768px) {
      filter: drop-shadow(2px 4px 0 #F18900);
    }
  }
  @media (hover: hover) {
    &:hover {
      span {
        filter: drop-shadow(0 0 0 #F18900);
      }
    }
  }
  @media (hover: none) {
    &:active {
      span {
        filter: drop-shadow(0 0 0 #F18900);
      }
    }
  }
}

.note-click {
  text-align: center;
  margin-block: 1rem 1.5rem;
  translate: 0 -50%;
}
.program {
  .note-click {
    color: #eb5200;
  }
}

.faq {
  .note-click {
    margin-bottom: 0;
    color: #0064b1;
  }
}