.contents{
  position: relative;
}

/*Main Visual*/

.hero{
  position: relative;
  z-index: 1;
}
.hero__wrapper{
  width: 100%;
  height: 170vw;
  background: linear-gradient(
    180deg, 
    var(--wp--preset--color--base) 0%, 
    var(--wp--preset--color--base) 45%,
    var(--wp--preset--color--base-2) 45%,
    var(--wp--preset--color--base-2) 100%
  );
  overflow-x: clip;
  position: relative;
}
@media (737px <= width) {
  .hero__wrapper{
    height: 56.5vw;
    background: linear-gradient(
      180deg, 
      var(--wp--preset--color--base) 0%, 
      var(--wp--preset--color--base) 70%,
      var(--wp--preset--color--base-2) 70%,
      var(--wp--preset--color--base-2) 100%
    );
  }
}
.hero__movie{
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
  .image__back--cloud{
    width: 115vw;
    position: absolute;
    top: 13.5vw;
    left: -30vw;
    z-index: 1;
  }
  .image__back--ground{
    width: 115%;
    position: absolute;
    top: 60vw;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
  }
  .image__back--bird{
    width: 4.2vw;
    position: absolute;
    top: 18.5vw;
    right: 25vw;
    z-index: 2;
    animation: ani-pulse 1s steps(1) 3s infinite alternate;
  }
  .image__mountain{
    width: 100%;
    position: absolute;
    top: 48.5vw;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
  }
  .image__lake{
    width: 32.5vw;
    position: absolute;
    top: 99.5vw;
    left: 35vw;
    z-index: 5;
  }
}
@media (737px <= width) {
  .hero__movie{
    .image__back--cloud{
      width: 82.5vw;
      top: -6.875vw;
      left: -11.5vw;
    }
    .image__back--ground{
      width: 100%;
      top: 25vw;
      left: 50%;
      transform: translateX(-50%);
    }
    .image__back--bird{
      width: 2vw;
      top: 9.7vw;
      right: 22.25vw;
    }
    .image__mountain{
      width: 100%;
      top: 15vw;
      left: 50%;
      transform: translateX(-50%);
    }
    .image__lake{
      width: 20.5vw;
      top: 31vw;
      left: 3vw;
    }
  }
}
.hero__main{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  .catch--sp{
    width: 20vw;
    position: absolute;
    top: 28.5%;
    right: 15vw;
    transform: translateY(-55%);
    z-index: 10;
  }
  .main-visual{
    margin-top: 42.75%;
    margin-inline: auto;
    width: 77.8vw;
    position: relative;
  }
  .main-visual__slider{
    height: ;
  }
  .main-visual__slider>li{
    height: auto;
  }
  .main-visual__slider>li>figure{
    -webkit-mask-image: url("../images/common/shape-lens.svg");
    mask-image: url("../images/common/shape-lens.svg");
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    aspect-ratio: 667 / 443;
    overflow: hidden;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }
  }
  .mv__image--sun{
    width: 10vw;
    position: absolute;
    top: -4.5%;
    left: 9.8%;
    animation: ani-rotate 1.2s steps(2, end) 3.2s infinite alternate;
  }
  .mv__image--tree01{
    width: 5.3vw;
    position: absolute;
    bottom: -5%;
    left: 61%;
  }
  .mv__image--tree02{
    width: 10vw;
    position: absolute;
    bottom: -3%;
    right: 18%;
  }
}
@media (width < 737px) {
  .catch--pc{
    display: none;
  }
  .mv__image--leaf{
    display: none;
  }
}
@media (737px <= width) {
  .hero__main{
    align-content: center;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    .catch--pc{
      width: 7.2vw;
      position: absolute;
      top: 50%;
      right: 12.15vw;
      transform: translateY(-55%);
    }
    .catch--sp{
      display: none;
    }
    .main-visual{
      margin-top: 3vw;
      margin-inline: auto;
      width: 49vw;
      position: relative;
    }
    .mv__image--sun{
      width: 6.7vw;
      position: absolute;
      top: -1.8vw;
      left: 0;
    }
    .mv__image--tree01{
      width: 3vw;
      position: absolute;
      bottom: -1.5vw;
      left: 59%;
    }
    .mv__image--tree02{
      width: 5.8vw;
      position: absolute;
      bottom: -2.5vw;
      right: -2.2vw;
    }
    .mv__image--leaf{
      width: 5.8vw;
      position: absolute;
      bottom: 4.5vw;
      right: -2.2vw;
    }
  }
}

/* li を absolute で重ねると ul の内容高さが 0 になるため、figure と同じ比率で確保する */
.main-visual__slider{
  position: relative;
  width: 100%;
  aspect-ratio: 667 / 443;
  list-style: none;
  margin: 0;
  padding: 0;
  &>li{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
}
.hero__front{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 30;
  .image__mountain--left{
    width: 86vw;
    position: absolute;
    bottom: 52vw;
    right: 63vw;
    z-index: 20;
  }
  .image__mountain--right{
    width: 100vw;
    position: absolute;
    bottom: 42vw;
    left: 42.5vw;
    z-index: 20;
  }
  .image__leaf-top{
    width: 12.5vw;
    position: absolute;
    top: -1vw;
    left: 38%;
    z-index: 40;
  }
  .image__leaf-left{
    width: 18.5vw;
    position: absolute;
    top: 47.5%;
    left: -5.5vw;
    z-index: 40;
  }
  .image__leaf-right{
    width: 34vw;
    position: absolute;
    top: 47.5%;
    right: -21.5%;
    z-index: 40;
  }
  .hero__lead{
    padding-right: 10%;
    color: var(--wp--preset--color--accent-3);
    font-size: 4.5vw;
    font-weight: var(--font-weight--bold);
    line-height: 1.7;
    position: absolute;
    bottom: 1em;
    left: 10%;
    z-index: 50;
  }
  .image__people{
    position: absolute;
  }
  .people01{
    top: 40%;
    right: 1.5%;
    z-index: 1;
  }
  .athletic{
    top: 42%;
    left: -1.5%;
    z-index: 1;
  }
  .people02{
    top: 67%;
    left: 30%;
    z-index: 100;
  }
  .people03{
    top: 50%;
    left: 20%;
    z-index: 1;
  }
  .jitensha{
    bottom: -3%;
    right: 5%;
    z-index: 100;
  }
  @media (737px <= width) {
    height: 100%;
    .image__mountain--left{
      width: 67.5vw;
      position: absolute;
      bottom: -3.8vw;
      right: 44vw;
      z-index: 20;
    }
    .image__mountain--right{
      width: 83.5vw;
      bottom: -11vw;
      left: 47.5vw;
    }
    .image__leaf-top{
      width: 7.5%;
      top: -2.5vw;
      left: 26%;
    }
    .image__leaf-left{
      width: 12.5%;
      top: 65%;
      left: -5.5vw;
    }
    .image__leaf-right{
      width: 22.5%;
      top: 65%;
      right: -10%;
    }
    .hero__lead{
      width: 28em;
      color: var(--wp--preset--color--contrast-on-dark);
      font-size: 1.25em;
      bottom: 1.5em;
      left: 11.5vw;
      transition: color .3s ease-in;
      &.is-scroll{
        color: var(--wp--preset--color--accent-3);
      }
    }
    .people01{
      top: 57.5%;
      right: 8.5%;
    }
    .athletic{
      top: 60%;
      left: 12.5%;
    }
    .people02{
      top: 105%;
      left: 35%;
      z-index: 100;
    }
    .people03{
      top: 78%;
      left: 58%;
    }
    .jitensha{
      bottom: -25%;
      right: 40%;
    }
  }
  @media (737px <= width < 1280px) {
    .image__leaf-top{
      top: 0;
    }
  }
}

/*----------------
Event
----------------*/
/*Event*/
.top__event{
  padding-top: calc(var(--wp--preset--spacing--40) * 2);
  background: var(--wp--preset--color--base-2);
  @media (737px <= width) {
    padding-top: calc(var(--wp--preset--spacing--40) * 5);
  }
  h2{
    margin-left: 10%;
    margin-bottom: calc(var(--wp--preset--spacing--40) * 1);
    color: var(--wp--preset--color--accent-1);
    font-size: var(--font-size--title--x-large);
    font-weight: var(--font-weight--extrabold);
    letter-spacing: var(--letter-spacing--medium);
    @media (737px <= width) {
      margin-left: 16%;
    }
  }
}
.event__list{
  &>li{
    position: relative;
  }
  .item__event-date__wrapper{
    width: 100%;
    aspect-ratio: 5/1;
    overflow: clip;
  }
  .item__event-date{
    font-size: var(--font-size--medium);
    font-weight: var(--font-weight--bold);
    text{
      fill: var(--wp--preset--color--accent-1);
    }
    .is-number{
      font-size: 2em;
    }
    /* event_date 内の数字・ピリオドのみ拡大（[tt5_event_arc] の tspan） */
    .event-date-numerals{
      font-size: 2em;
    }
  }
  .item__image{
    margin-top: -0.75em;
    background: var(--wp--preset--color--base-3) url(../images/common/img_noimg.png) no-repeat center center;
    background-size: auto 100%;
    -webkit-mask-image: url("../images/common/shape-lens.svg");
    mask-image: url("../images/common/shape-lens.svg");
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    aspect-ratio: 667 / 443;
    overflow: hidden;
    transition: background .3s ease-in;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }
    @media (737px <= width) {
      margin-top: -1.5em;
    }
  }
  .item__box{
    margin-top: 1em;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .item__text{
    flex: 0 0 78.5%;
  }
  h3{
    font-size: var(--font-size--medium);
  }
  h3 a{
    padding: 0.25em;
    display: inline;
    background-color: var(--wp--preset--color--base);
    font-weight: var(--font-weight--bold);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    line-height: var(--line-height--wide);
    &::after{
      content: "";
      display: block;
      width: 100%;
      height: 100%;
      z-index: 1;
      position: absolute;
      top: 0;
      left: 0;
    }
  }
  .item__button .item__link,
  .item__link{
    img, svg{
      width: 4em;
      height: 4em;
    }
  }
  .item__date{
    color: var(--wp--preset--color--contrast);
    font-size: var(--font-size--small);
    font-weight: var(--font-weight--bold);
  }
  &>li:hover{
    .item__image{
      background-size: auto 103%;
    }
    .item__image img{
      transform: rotate(2deg) scale(1.035);
    }
    .c-btn-icon-circle{
      transform: scale(1.4);
    }
  }
}

/* Splide arrows: use btn-icon.svg inline */
.js-event-splide .splide__arrow{
  width: 5em;
  height: 5em;
  background: transparent;
  opacity: 1;
  outline: none;
  &:hover{
    opacity: 1;
  }
}
.js-event-splide .splide__arrow:disabled{
  opacity: 0.35;
}
.js-event-splide .splide__arrow svg{
  width: 100%;
  height: 100%;
  .c-btn-icon-outline{
    fill: var(--wp--preset--color--base-2);
    opacity: 1;
  }
  .c-btn-icon-circle {
    fill: var(--wp--preset--color--accent-3);
  }
  .c-btn-icon-arrow {
    fill: none;
    stroke: var(  --wp--preset--color--contrast-on-dark);
  }
  &:hover{
    .c-btn-icon-circle {
      transform: scale(1.45);
    }
  }
}
.js-event-splide .splide__arrow--prev{
  left: 5%;
  top: 40%;
  @media (737px <= width < 1024px) {
    left: 3.5%;
    top: 45%;
  }
  @media (1024px <= width) {
    left: 5%;
    top: 45%;
  }
}
.js-event-splide .splide__arrow--next{
  right: 5%;
  top: 40%;
  @media (737px <= width < 1024px) {
    right: 3.5%;
    top: 45%;
  }
  @media (1024px <= width) {
    right: 5%;
    top: 45%;
  }
}

.js-event-splide .splide__arrow.tt5-splide-arrow--prev svg{
  transform: rotate(180deg);
}
/* ≤3件: ループなし・トラック左寄せ（front-page-splide.js の type:slide / focus:0 と併用） */
.js-event-splide.tt5-splide--short .splide__list{
  justify-content: flex-start;
}

/* Noposts Area*/
.top__event .noposts-area{
  margin: auto;
  width: var(--inner-width);
  .item__text{
    font-size: 1.125em;
  }
  @media (width < 737px) {
    .button_insta-link{
      margin: auto;
      text-align: center;
    }
  }
  @media (737px <= width) {
    justify-content: center;
    .item__text{
      flex: 0 0 32em;
    }
    .item__button{
      flex: 0 0 15em;
    }
  }
  .button__insta-link{
    &::before{
      content: "";
      display: inline-block;
      width: 1em;
      height: 1em;
      background: url(../images/common/icon-instagram.svg) no-repeat center center;
      background-size: contain;
    }
  }
}

/*-------------------
park-map Area
-------------------*/
.park-map{
  @media (width < 737px) {
    padding-top: calc(var(--wp--preset--spacing--40) * 4);
  }
  @media (737px <= width < 1280px) {
    padding-top: calc(var(--wp--preset--spacing--40) * 3.5);
  }
}
.park-map__container{
  padding: 6.5em 0 7.5em 0;
  background-image: 
  url(../images/map_back01.svg),
  url(../images/map_back02.svg),
  linear-gradient(
    180deg, 
    var(--wp--preset--color--base-2) 0%, 
    var(--wp--preset--color--base-2) 8%,
    var(--wp--preset--color--base-3) 8%,
    var(--wp--preset--color--base-3) calc(100% - 4.5em),
    var(--wp--preset--color--base) calc(100% - 4.5em),
    var(--wp--preset--color--base) 100%
  );
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: center top, right 32.5% bottom, center top;
  background-size: 100% auto, 175% auto, auto;
  position: relative;
  z-index: 3;
}
.park-map__title{
  color: var(--wp--preset--color--accent-1);
  font-size: var(--font-size--title--x-large);
  font-weight: var(--font-weight--extrabold);
  writing-mode: vertical-rl;
  position: absolute;
  top: -2.5em;
  right: 17.5%;
}
@media (width < 737px) {
  .map-image{
    margin: auto;
    width: 82.5%;
  }
}
@media (737px <= width) {
  .park-map__container{
    padding: 25vw 0 12.5vw 0;
    background-image: 
    url(../images/map_back01.svg),
    url(../images/map_back02.svg),
    linear-gradient(
      180deg, 
      var(--wp--preset--color--base-2) 0%, 
      var(--wp--preset--color--base-2) 22%,
      var(--wp--preset--color--base-3) 22%,
      var(--wp--preset--color--base-3) 80%,
      var(--wp--preset--color--base) 80%,
      var(--wp--preset--color--base) 100%
    );
    background-position: center top, center bottom, center top;
    background-size: 100% auto, 100% auto, auto;
  }
  .park-map__title{
    top: -1.5em;
    right: 22.5%;
  }
  .park-map__main{
    display: flex;
    justify-content: space-between;
  }
  .map-image{
    flex: 0 0 47.5%;
    margin-top: 0;
    margin-left: 6.25%;
  }
}
@media (1280px <= width) {
  .park-map__title{
    top: 6.1vw;
  }
}
.park-map__float{
  .park-map__float__mountain{
    width: 30vw;
    position: absolute;
    top: 2.5vw;
    left: 0;
    z-index: 1;
  }
  .park-map__float__tree{
    width: 2.25em;
    position: absolute;
    top: 5.75em;
    left: 25%;
    z-index: 2;
  }
  .park-map__float__tree2{
    width: 2.25em;
    position: absolute;
    top: 5.75em;
    left: 38.5%;
    z-index: 2;
  }
  .park-map__float__people01{
    position: absolute;
    bottom: 1.5em;
    left: 40%;
  }
  @media (737px <= width) {
    .park-map__float__tree{
      width: 4.1vw;
      top: 25.25vw;
      left: 23.75vw;
    }
    .park-map__float__tree2{
      display: none;
    }
    .park-map__float__people01{
      bottom: 1.5vw;
      left: 55%;
    }
  }
}
/*news area*/
.news{
  margin-top: 4.5em;
  margin-inline: 10%;
  position: relative;
  h2{
    color: var(--wp--preset--color--accent-1);
    font-size: var(--font-size--xx-large);
    font-weight: var(--font-weight--extrabold);
  }
  @media (737px <= width) {
    margin-top: auto;
    margin-right: 6.25%;
    margin-left: auto;
    margin-bottom: 6.5vw !important;
    flex: 0 0 35%;
  }
  @media (1280px <= width) {
    flex: 0 0 27.5%;
  }
}
.wp-block-buttons.news__archive-button{
  display: flex;
  justify-content: center;
  @media (737px <= width) {
    justify-content: flex-end;
  }
}
.news-list{
  margin-top: 1em;
  .list__item{
    width: 100%;
    padding: 1em;
    border-top: var(--wp--preset--color--base-2) 3px dotted;
  }
  li:last-child{
    border-bottom: var(--wp--preset--color--base-2) 3px dotted;
  }
  .list__date{
    display: inline-block;
    padding: 0 0.5em;
    padding-block: 1em;
    border-radius: 0.75em;
    color: var(--wp--preset--color--accent-2);
    background-color: var(--wp--preset--color--base);
    font-size: var(--font-size--small);
    font-weight: var(--font-weight--bold);
    line-height: 0;
  }
  .item__title{
    margin-top: 0.5em;
    min-width: 0;
    font-size: var(--font-size--large);
    line-height: var(--line-height--short);
    a{
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
  }
}
.news-list{
  li{
    position: relative;
  }
  .item__title-wrap{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.375em;
    width: 100%;
    min-width: 0;
    margin-top: 0.5em;
  }
  .wp-block-post-title{
    flex: 0 0 calc(100% - 3.5em);
    min-width: 0;
    margin-top: 0;
  }
  .wp-block-post-title a::after{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
  }
  .item__title-icon{
    flex: 0 0 3em;
  }
  .c-btn-icon{
    width: 3em;
    height: 3em;
    display: block;
  }
  li:hover{
    .c-btn-icon-circle {
      transform: scale(1.45);
    }
  }
}
.park-map__float__bird01{
  width: 2.5em;
  position: absolute;
  top: -2.5em;
  right: 10%;
}
.park-map__float__bird02{
  width: 1.25em;
  position: absolute;
  top: -1.5em;
  right: 0;
}
@media (737px <= width) {
  .park-map__float__bird01{
    width: 2.6vw;
    position: absolute;
    top: -5.5vw;
    right: 3vw;
  }
  .park-map__float__bird02{
    width: 1.25vw;
    position: absolute;
    top: -4vw;
    right: 0;
  }
}
/*--------------------
About Section
--------------------*/
.top__about{
  /*padding-top: calc(var(--wp--preset--spacing--40) * 2);*/
  background-color: var(--wp--preset--color--base);
  position: relative;
}
@media (width < 737px) {
  .about__summary{
    z-index: 5;
  }
  .about__features{
    z-index: 3;
  }
  .about__float{
    z-index: 1;
  }
}
@media (737px <= width) {
  .about__summary{
    z-index: 3;
  }
  .about__features{
    z-index: 3;
  }
  .about__float{
    z-index: 1;
  }
}

/*Summary*/
.about__summary{
  .about__summary__container{
    padding-top: 1vw;
    padding-inline: 6.25vw;
    padding-bottom: calc(2.5vw - 2.5em);
  }
  .about__title{
    color: var(--wp--preset--color--accent-1);
    font-size: var(--font-size--title--large);
    font-weight: var(--font-weight--extrabold);
  }
  .about__lead{
    margin-top: 1em;
    font-size: var(--font-size--large);
    font-weight: var(--font-weight--bold);
  }
  @media (width < 737px) {
    height: 42.5em;
    align-content: center;
    position: relative;
    .about__summary__container{
      margin: 6.25% !important;
      padding: 7.5%;
      border-radius: 3em;
      background: rgba(255,255,255, 0.7);
    }
  }
  @media (737px <= width < 1280px) {
    .about__lead{
      max-width: 36em;
    }
  }
  @media (1280px <= width) {
    .about__lead{
      max-width: 44em;
      font-size: var(--font-size--x-large);
    }
  }
}
/*features*/
.about__features{
  width: 100%;
  overflow-x: clip;
}
.about__features__upper{
  padding-top: 2.5em;
  background-image: url(../images/about_road-upper.png);
  background-repeat: no-repeat;
  background-position: left 10em;
  background-size: 175% auto;
  padding-bottom: 5vw;
  position: relative;
  .el-deco{
    .deco__item{
      position: absolute;
      z-index: 3;
    }
    .deco-people01{
      top: -5%;
      left: 5.75%;
    }
  }
  @media (737px <= width < 1280px) {
    padding-top: calc(var(--wp--preset--spacing--40) * 3);
  }
  @media (737px <= width) {
    background-position: center 10vw;
    background-size: 100% auto;
    .el-deco{
      .deco-people01{
        top: 38%;
        left: 87.5%;
      }
    }
  }
}
.about__features__lower{
  padding-bottom: 60%;
  background-image: url(../images/about_road-lower.png);
  background-repeat: no-repeat;
  background-position: center bottom -10px;
  background-size: 175% auto;
  position: relative;
  .el-deco{
    .deco__item{
      position: absolute;
      z-index: 3;
    }
    .deco-mountain{
      width: 65vw;
      bottom: 30%;
      left: -10%;
    }
    .deco-people02{
      bottom: 18%;
      left: 20%;
    }
    .deco-people03{
      bottom: 5%;
      right: 38%;
    }
  }
  @media (737px <= width) {
    padding-bottom: 30.25vw;
    background-size: 100% auto;
    .el-deco{
      .deco-mountain{
        width: 37.5vw;
        bottom: 30%;
        left: -10%;
      }
      .deco-people02{
        bottom: 24%;
        left: 36.5%;
      }
      .deco-people03{
        bottom: 5%;
        right: 38%;
      }
    }
  }
}
.about__item{
  position: relative;
  .item__textbox{
    padding: 1.75em 2.5em;
    border-radius: 2.5em;
    background: var(--wp--preset--color--base-3);
    font-size: var(--font-size--medium);
    font-weight: var(--font-weight--bold);
    letter-spacing: var(--letter-spacing--reset);
    position: relative;
    @media (540px <= width) {
      width: 24em;
    }
  }
  h3{
    width: 100%;
    text-align: center;
    position: absolute;
    top: -2.75em;
    left: 0;
  }
  h3 img{
    margin: auto;
    height: 3.5em;
    width: auto;
  }
  .item__image{
    position: absolute;
  }
}

@media (width < 540px) {
  .about__item{
    width: 75%;
    h3{
      top: -2em;
    }
    h3 img{
      height: 3em;
    }
  }
  .about__item.study{
    margin-top: 4em;
    margin-left: 6.25%;
    .item__image{
      width: 10em;
      bottom: -5em;
      right: -5em;
    }
  }
  .about__item.play{
    margin-top: 12.5em;
    margin-left: auto;
    margin-right: 6.25%;
    h3{
      margin-left: 1.5em;
    }
    .item__image{
      width: 10em;
      top: -7.5em;
      left: -5em;
    }
  }
  .about__item.community{
    margin-top: 6em;
    margin-left: 6.25%;
    .item__textbox{
      margin-inline: auto;
    }
    .item__image{
      width: 12em;
      bottom: -5.5em;
      right: -19.5%;
    }
  }
}
@media (540px <= width < 737px) {
  .about__item{
    .item__textbox{
      padding: 2.5em 3em;
      max-width: 67.5%;
      font-size: var(--font-size--large);
    }
  }
  .about__item.study{
    margin-top: 3.5em;
    margin-left: 6.25vw;
    .item__image{
      width: 12.5em;
      bottom: -3em;
      right: -10em;
    }
  }
  .about__item.play{
    margin-top: 9.5em;
    margin-right: 6.75vw;
    .item__textbox{
      margin-left: auto;
      margin-right: 0;
    }
    .item__image{
      width: 12.5em;
      bottom: 3em;
      left: -10em;
    }
  }
  .about__item.community{
    margin-top: 6.5em;
    margin-left: 6.25vw;
    .item__image{
      width: 14em;
      bottom: -3em;
      right: -10.5em;
    }
  }
}
@media (737px <= width) {
  .about__item{
    h3{
      top: -2em;
    }
    .item__textbox{
      padding: 2.5em 4em;
      font-size: var(--font-size--large);
    }
  }
  .about__item.study{
    margin-top: 6vw;
    margin-left: 23.5vw;
    .item__image{
      width: 19.5vw;
      bottom: -9vw;
      left: -16.25vw;
    }
  }
  .about__item.play{
    margin-top: 9.5vw;
    margin-right: 6.75vw;
    .item__textbox{
      margin-left: auto;
      margin-right: 0;
    }
    .item__image{
      width: 19.5vw;
      bottom: 2.5vw;
      left: -16.25vw;
    }
  }
  .about__item.community{
    margin-top: 4vw;
    margin-left: 7vw;
    .item__textbox{
      margin-inline: auto;
    }
    .item__image{
      width: 22.5vw;
      bottom: -3.75vw;
      left: -19.5vw;
    }
  }
}
/*float*/
.about__float{
  width: 100%;
  height: 100%;
  overflow-x: clip;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  /*layout for SP*/
  @media (width < 737px) {
    width: 100%;
    height: 45em;
    position: absolute;
    top: 0;
    left: 0;
  }
  /*Image style*/
  .s-square{
    -webkit-mask-image: url("../images/shape-square.svg");
    mask-image: url("../images/shape-square.svg");

    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;

    aspect-ratio: 1 / 1;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  .s-circle{
    -webkit-mask-image: url("../images/shape-circle.svg");
    mask-image: url("../images/shape-circle.svg");

    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;

    aspect-ratio: 174 / 173;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  .bg-photo{
    position: absolute;
  }
  .bg-photo01{
    width: 27.5%;
    top: 5%;
    right: 7.5%;
  }
  .bg-photo02{
    width: 18%;
    top: 35%;
    left: 25%;
  }
  .bg-photo03{
    width: 32%;
    top: 17.5%;
    left: -5%;
  }
  .bg-photo04{
    width: 65%;
    bottom: 9%;
    right: -22.5%;
  }
  .bg-photo05{
    width: 22.5%;
    bottom: 10.5%;
    right: 50%;
  }
  @media (737px <= width) {
    .bg-photo01{
      width: 20vw;
      top: 15%;
      right: 12.5%;
    }
    .bg-photo02{
      width: 12.5vw;
      top: 44%;
      left: 25%;
    }
    .bg-photo03{
      width: 20vw;
      top: 51%;
      left: 0;
    }
    .bg-photo04{
      width: 44.75vw;
      height: 44vw;
      bottom: 6.5%;
      right: -16.5%;
    }
    .bg-photo05{
      width: 12.5vw;
      bottom: 11.5%;
      right: 32.5%;
    }
  }
}
/*------------------
Gallery Section
------------------*/
.top__gallery{
  padding-block: calc(var(--wp--preset--spacing--40) * 2);
  background: var(--wp--preset--color--base);
  overflow-x: clip;
  h2{
    margin-left: 10%;
    color: var(--wp--preset--color--accent-1);
    font-size: var(--font-size--title--large);
    font-weight: var(--font-weight--extrabold);
    @media (737px <= width) {
      margin-left: 5em;
      font-size: var(--font-size--xx-large);
    }
  }
}
.gallery__list{
  margin-top: calc(var(--wp--preset--spacing--40) * 1);
  width: 100%;
  box-sizing: border-box;
  &>li{
    position: relative;
    flex-basis: auto;
  }
  .item__image{
    background: var(--wp--preset--color--base-3) url(../images/common/img_noimg.png) no-repeat center center;
    background-size: auto 100%;
    -webkit-mask-image: url("../images/common/shape-lens.svg");
    mask-image: url("../images/common/shape-lens.svg");
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    aspect-ratio: 667 / 443;
    overflow: hidden;
    transition: background .3s ease-in;

    img{
      width: 100%;
      transition: transform 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }
  }
  .item__text{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .item__date{
    margin-top: 0.75em;
    color: var(--wp--preset--color--accent-1);
    font-size: var(--font-size--small);
    font-weight: var(--font-weight--bold);
  }
  h3{
    font-size: var(--font-size--medium);
    font-weight: var(--font-weight--bold);
    line-height: var(--line-height--medium);
  }
  h3>a::after{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
  }
  &>li:hover{
    .item__image{
      background-size: auto 103%;
    }
    .item__image img{
      transform: rotate(2deg) scale(1.035);
    }
  }
}
.top__gallery__noresult{
  margin-left: 10%;
  width: var(--inner-width);
  font-size: var(--font-size--large);
}
/* Splide arrows: use btn-icon.svg inline */
.js-gallery-splide .splide__arrow{
  width: 2.75em;
  height: 2.75em;
  background: transparent;
  opacity: 1;
  outline: none;
  &:hover{
    opacity: 1;
  }
  @media (737px <= width < 1024px) {
    width: 3.25em;
    height: 3.25em;
  }
  @media (1024px <= width) {
    width: 3.5em;
    height: 3.5em;
  }
}
.js-gallery-splide .splide__arrow:disabled{
  opacity: 0.35;
}
.js-gallery-splide .splide__arrow svg{
  width: 100%;
  height: 100%;
  .c-btn-icon-outline{
    fill: var(--wp--preset--color--base);
    opacity: 1;
  }
  .c-btn-icon-circle {
    fill: var(--wp--preset--color--accent-3);
  }
  .c-btn-icon-arrow {
    fill: none;
    stroke: var(  --wp--preset--color--contrast-on-dark);
  }
  &:hover{
    .c-btn-icon-circle {
      transform: scale(1.45);
    }
  }
}
.js-gallery-splide .splide__arrow--prev{
  left: 10%;
  top: 35%;
  @media (737px <= width < 1024px) {
    left: 7.5%;
    top: 30%;
  }
  @media (1024px <= width) {
    left: 5.75%;
    top: 35%;
  }
}
.js-gallery-splide .splide__arrow--next{
  right: 10%;
  top: 35%;
  @media (737px <= width < 1024px) {
    right: 7.5%;
    top: 30%;
  }
  @media (1024px <= width) {
    right: 5.75%;
    top: 35%;
  }
}
.js-gallery-splide .splide__arrow.tt5-splide-arrow--prev svg{
  transform: rotate(180deg);
}
.js-gallery-splide.tt5-splide--short .splide__list{
  justify-content: flex-start;
}
/*access*/
.top__access{
  padding-top: 10em;
  padding-bottom: var(--wp--preset--spacing--40);
  background-image: 
  url(../images/bg-access-cloud.png),
  linear-gradient(
    180deg, 
    var(--wp--preset--color--base) 0%, 
    var(--wp--preset--color--base) 15em,
    var(--wp--preset--color--base-3) 15em,
    var(--wp--preset--color--base-3) 100%
  );
  background-repeat: no-repeat, no-repeat;
  background-position: center top, center top;
  background-size: 100% auto, 100% auto;
  overflow-x: clip;
  position: relative;
  @media (737px <= width) {
    padding-top: 18.25vw;
    background-image: 
    url(../images/bg-access-cloud.png),
    linear-gradient(
      180deg, 
      var(--wp--preset--color--base) 0%, 
      var(--wp--preset--color--base) 30em,
      var(--wp--preset--color--base-3) 30em,
      var(--wp--preset--color--base-3) 100%
    );
  }
  @media (1280px <= width) {
    background-image: 
    url(../images/bg-access-cloud.png),
    linear-gradient(
      180deg, 
      var(--wp--preset--color--base) 0%, 
      var(--wp--preset--color--base) 40em,
      var(--wp--preset--color--base-3) 40em,
      var(--wp--preset--color--base-3) 100%
    );
  }
  h2{
    color: var(--wp--preset--color--accent-1);
    font-size: var(--font-size--title--x-large);
    font-weight: var(--font-weight--extrabold);
    line-height: var(--line-height--medium);
  }
  h3{
    margin-top: 1em;
    font-size: var(--font-size--xx-large);
    font-weight: var(--font-weight--extrabold);
  }
  h4{
    margin-top: 1.75em;
    font-size: var(--font-size--x-large);
    font-weight: var(--font-weight--bold);
  }
}
.top__access__wrapper{
  margin: auto;
  width: 82.5%;
  display: flex;
  justify-content: space-between;
  @media (width < 737px) {
    flex-direction: column;
  }
  @media (1280px <= width) {
    width: 87.5%;
    align-items: flex-end;
  }
}
.access__map h2.is-sp{
  margin-bottom: 0.5em;
  @media (1280px <= width) {
    display: none;
  }
}
.access__map__clip{
  overflow: hidden;
  -webkit-mask-image: url("../images/shape-oval.svg");
  mask-image: url("../images/shape-oval.svg");
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  aspect-ratio: 566 / 378;
  width: 100%;
  object-fit: cover;
  iframe{
    width: 100%;
    height: 180%;
    border: none;
    transform: translateY(-20%);
  }
}
.access__info{
  font-size: var(--font-size--large);
}
.access__textbox{
  @media (width < 737px) {
    margin-top: 1.5em;
    margin-right: -1em;
  }
  @media (width < 1280px) {
    h2.is-pc{
      display: none;
    }
  }
}
@media (737px <= width < 1280px) {
  .access__map{
    flex: 0 0 47%;
  }
  .access__textbox{
    flex: 0 0 45%;
  }
}
@media (1280px <= width) {
  .access__map{
    flex: 0 0 46%;
  }
  .access__textbox{
    flex: 0 0 42%;
  }
}
.access__button{
  margin-top: var(--wp--preset--spacing--20);
}
.access__button .wp-block-buttons>.wp-block-button{
  margin-block: 0;
}
/*decoration parts*/
.top__access{
  .el-deco{
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
  .deco__item{
    position: absolute;
  }
  .deco-sun{
    width: 14vw;
    top: 6.25vw;
    left: 17.25vw;
  }
  .deco-leaf--left{
    width: 15vw;
    top: 9vw;
    left: -1.75vw;
  }
  .deco-leaf--right{
    width: 30vw;
    top: 4vw;
    right: -4vw;
  }
  @media (737px <= width) {
    .deco-sun{
      width: 7vw;
    }
    .deco-leaf--left{
      width: 8.75vw;
    }
    .deco-leaf--right{
      width: 17vw;
    }
  }
}