:root {
  --color-Yellow: #ffd700;
}

#main {
  position: relative;
}
#main::before {
  content: "";
  display: inline-block;
  background: url(../img/top/bg_event.webp) center top/cover repeat-y;
  width: 100vw;
  height: 110%;
  position: absolute;
  top: -10%;
  left: 0;
}

.ttl_section {
  background-color: #fffff5;
  background-image: url(../img/decoration/bg_deco-ttl_sp.webp);
  position: relative;
}
.ttl_section .parts {
  z-index: 10;
}
.ttl_section .parts.deco_parts1 {
  background: url(../img/decoration/bg_ttl_left_sp.webp) no-repeat center/contain;
  width: 107px;
  height: 169px;
  top: 89%;
  left: 0;
}
@media screen and (min-width: 1025px) {
  .ttl_section {
    background-image: url(../img/decoration/bg_deco-ttl_pc.webp);
  }
  .ttl_section .parts.deco_parts1 {
    background: url(../img/decoration/bg_ttl_left_pc.webp) no-repeat center/contain;
    width: 219px;
    height: 277px;
    top: 78%;
    left: 0;
  }
  .ttl_section .parts.deco_parts2 {
    background: url(../img/decoration/bg_ttl_right.webp) no-repeat center/contain;
    width: 240px;
    height: 230px;
    top: 0;
    left: auto;
    right: 0;
  }
  .ttl_section .ttl_desc {
    max-width: 820px;
  }
}

.page_ttl {
  position: relative;
  z-index: 0;
}
.page_ttl .parts {
  z-index: -1;
  top: auto;
}
.page_ttl .parts.deco_parts3 {
  background: url(../img/decoration/bg_page_ttl_left.webp) no-repeat center/contain;
  aspect-ratio: 231/171;
  width: 60%;
  bottom: -32%;
  left: -22%;
}
.page_ttl .parts.deco_parts4 {
  background: url(../img/decoration/bg_page_ttl_right.webp) no-repeat center/contain;
  aspect-ratio: 238/133;
  width: 50%;
  bottom: -6%;
  left: auto;
  right: -24%;
}
@media screen and (min-width: 1025px) {
  .page_ttl .parts.deco_parts3 {
    background: url(../img/decoration/bg_page_ttl_left.webp) no-repeat center/contain;
    aspect-ratio: 231/171;
    width: 20%;
    bottom: 20%;
    left: 22%;
  }
  .page_ttl .parts.deco_parts4 {
    background: url(../img/decoration/bg_page_ttl_right.webp) no-repeat center/contain;
    aspect-ratio: 238/133;
    width: 15%;
    bottom: 0%;
    left: auto;
    right: 25%;
  }
}

.cont_ttl {
  color: var(--color-Yellow);
  font-size: 1rem;
  font-weight: 900;
  text-align: center;
  line-height: 1.23;
  margin-bottom: 1.46rem;
}
@media screen and (min-width: 1025px) {
  .cont_ttl {
    font-size: 1.12rem;
  }
}
.cont_ttl span {
  display: block;
  font-size: 1.94rem;
  font-weight: 900;
  letter-spacing: 0.05em;
}
@media screen and (min-width: 1025px) {
  .cont_ttl span {
    font-size: 3.56rem;
  }
}

.schedule {
  background-color: #fffff5;
  padding: 3.66rem 0 2.66rem;
}
@media screen and (min-width: 1025px) {
  .schedule .event_data span:first-of-type {
    margin-left: 1rem;
  }
}
@media screen and (min-width: 1025px) {
  .schedule .deco_parts_sche {
    background: url(../img/decoration/sche_deco.webp) no-repeat center/contain;
    aspect-ratio: 500/360;
    width: 26%;
    top: 0;
    right: 0;
    z-index: 1;
  }
}

.bg_ttl {
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  background-color: #ffd200;
  border-radius: 100vmax;
  max-width: 170px;
  margin: 0 auto 1.2rem;
}

.event_data {
  font-size: 1.6rem;
  font-weight: 700;
  text-align: center;
  line-height: 1.25;
  letter-spacing: 0.05em;
  max-width: 85%;
  margin: auto;
}
.event_data span {
  display: inline-block;
  font-size: 1.75em;
  line-height: 1;
}
.event_data small {
  display: inline-block;
  font-size: 0.85em;
  padding-left: 3px;
}

.data_sub {
  font-size: 1.2rem;
  font-weight: 700;
  text-align: right;
  max-width: 85%;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.pet_note {
  margin-top: 2rem;
  text-align: center;
}
.pet_note a {
  border-bottom: 1px solid #000;
  position: relative;
}
.pet_note a::before, .pet_note a::after {
  content: "";
  position: absolute;
  background: url(../img/icon_foot.svg) no-repeat center/contain;
  width: 20px;
  height: 20px;
  top: 50%;
  translate: 0 -50%;
}
.pet_note a::before {
  left: -30px;
  rotate: -45deg;
}
.pet_note a::after {
  right: -30px;
}

.decoration::before {
  content: "";
  display: inline-block;
  background: url(../img/top/bg_event.webp) center top/cover repeat-y;
  width: 100vw;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.photo_spot {
  position: relative;
  padding: 80px 0 40px;
}
@media screen and (min-width: 1025px) {
  .photo_spot {
    padding: 92px 0;
  }
}
.photo_spot .img_area {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  width: 100%;
}
@media screen and (min-width: 1025px) {
  .photo_spot .img_area {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: baseline;
        -ms-flex-align: baseline;
            align-items: baseline;
  }
  .photo_spot .img_area:nth-child(even) {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
  }
}
.photo_spot .main_img_deco {
  position: relative;
  width: 100%;
}
@media screen and (min-width: 1025px) {
  .photo_spot .main_img_deco {
    width: 60%;
  }
}
.photo_spot .main_img {
  position: relative;
  height: 256px;
  margin-bottom: 20px;
  max-width: 95%;
}
@media screen and (min-width: 1025px) {
  .photo_spot .main_img {
    height: 552px;
    margin-bottom: 0px;
    max-width: 100%;
  }
}
.photo_spot .main_img::after {
  position: absolute;
  bottom: -0.4rem;
  left: 0;
  text-align: center;
  width: 100%;
  font-family: "Roboto", sans-serif;
  font-size: 2.46rem;
  font-weight: 900;
  line-height: 1;
  background: linear-gradient(30deg, rgb(224, 223, 0) 0%, rgb(255, 215, 0) 87%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
@media screen and (min-width: 1025px) {
  .photo_spot .main_img::after {
    font-size: 4.26rem;
    bottom: -0.65rem;
  }
}
.photo_spot:nth-child(even) .main_img_deco {
  margin: 0 0 0 auto;
}
.photo_spot:nth-child(even) .main_img {
  margin: 0 0 0 auto;
}
.photo_spot .sub_img {
  position: relative;
  width: 45%;
  margin: 0 20px 0 auto;
}
@media screen and (min-width: 1025px) {
  .photo_spot .sub_img {
    width: 30%;
    margin: 0 auto;
  }
}
.photo_spot .sub_img .img img {
  border-radius: 30px;
}
.photo_spot .photo {
  position: relative;
}
.photo_spot .photo::after {
  content: "";
  display: inline-block;
  width: 100%;
  height: 100%;
  background: linear-gradient(30deg, rgb(230, 230, 0) 5%, rgb(255, 235, 0) 100%);
  border-radius: 100vmax;
  position: absolute;
  bottom: -15px;
  right: -15px;
  z-index: -1;
  -webkit-filter: blur(10px);
          filter: blur(10px);
  mix-blend-mode: multiply;
}
@media screen and (min-width: 1025px) {
  .photo_spot .photo::after {
    bottom: -25px;
    right: -25px;
  }
}
.photo_spot .float_img .img {
  position: relative;
  z-index: 0;
}
@media screen and (min-width: 1025px) {
  .photo_spot .float_img {
    position: absolute;
  }
}
.photo_spot .txt_area {
  margin-top: 30px;
}
@media screen and (min-width: 1025px) {
  .photo_spot .txt_area {
    margin-top: 50px;
    width: 60%;
  }
}
.photo_spot .txt_wrap {
  max-width: 584px;
  margin: 0 auto;
  padding: 0 20px;
}
.photo_spot .txt_wrap .spot_ttl {
  font-size: 25px;
  text-align: center;
  font-weight: 700;
  margin-bottom: 10px;
}
@media screen and (min-width: 1025px) {
  .photo_spot .txt_wrap .spot_ttl {
    text-align: left;
  }
}
.photo_spot .txt_wrap .spot_txt {
  text-align: justify;
  letter-spacing: -0.03em;
}
@media screen and (min-width: 1025px) {
  .photo_spot .txt_wrap .spot_txt {
    letter-spacing: -0.015em;
  }
}
.photo_spot:nth-child(even) .txt_area {
  margin: 30px 0 0 auto;
}
.photo_spot.spot01 .float_img01 {
  max-width: 56%;
  margin: 0 0 20px 20px;
}
@media screen and (min-width: 1025px) {
  .photo_spot.spot01 .float_img01 {
    position: absolute;
    max-width: 23%;
    z-index: 1;
    top: -2%;
    right: 23%;
  }
}
.photo_spot.spot01 .float_img01 .photo::after {
  width: 95%;
  height: 95%;
}
.photo_spot.spot01 .float_img02 {
  max-width: 42%;
  margin-left: 20px;
}
@media screen and (min-width: 1025px) {
  .photo_spot.spot01 .float_img02 {
    position: absolute;
    max-width: 26%;
    top: 71%;
    right: 17%;
  }
}
.photo_spot.spot01 .float_img02 img {
  border-radius: 30px;
}
.photo_spot.spot01 .float_img02 .photo::after {
  border-radius: 30px;
}
.photo_spot.spot01 .main_img {
  background: url(../img/decoration/spot01_img01.webp) no-repeat center/cover;
  border-radius: 0 50px 50px 0;
}
@media screen and (min-width: 1025px) {
  .photo_spot.spot01 .main_img {
    border-radius: 0 30px 30px 0;
  }
}
.photo_spot.spot01 .main_img::after {
  content: "PHOTO SPOT1";
}
@media screen and (min-width: 1025px) {
  .photo_spot.spot02 .img_area {
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
}
.photo_spot.spot02 .sub_img {
  margin: 0 0 20px 0;
  width: 58%;
}
@media screen and (min-width: 1025px) {
  .photo_spot.spot02 .sub_img {
    width: 30%;
    margin: 0;
  }
}
.photo_spot.spot02 .sub_img .img img {
  border-radius: 0 30px 30px 0;
}
.photo_spot.spot02 .float_img01 {
  position: absolute;
  max-width: 42%;
  top: 0;
  right: 20px;
  z-index: 1;
}
@media screen and (min-width: 1025px) {
  .photo_spot.spot02 .float_img01 {
    position: absolute;
    max-width: 22%;
    top: 53%;
    left: 18%;
    z-index: 1;
  }
}
.photo_spot.spot02 .main_img {
  background: url(../img/decoration/spot02_img01.webp) no-repeat center/cover;
  border-radius: 50px 0 0 50px;
}
@media screen and (min-width: 1025px) {
  .photo_spot.spot02 .main_img {
    border-radius: 30px 0 0 30px;
  }
}
.photo_spot.spot02 .main_img::after {
  content: "PHOTO SPOT2";
}
.photo_spot.spot03 .img_area {
  padding-bottom: 200px;
}
@media screen and (min-width: 1025px) {
  .photo_spot.spot03 .img_area {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    padding-bottom: 0;
  }
}
.photo_spot.spot03 .sub_img {
  position: relative;
  width: 65%;
  margin: 0;
}
@media screen and (min-width: 1025px) {
  .photo_spot.spot03 .sub_img {
    width: 30%;
    margin: 0 auto;
  }
}
.photo_spot.spot03 .sub_img .img img {
  border-radius: 0 30px 30px 0;
}
@media screen and (min-width: 1025px) {
  .photo_spot.spot03 .sub_img .img img {
    border-radius: 30px;
  }
}
.photo_spot.spot03 .photo::after {
  border-radius: 30px;
}
.photo_spot.spot03 .float_img01 {
  position: absolute;
  max-width: 42%;
  top: 50%;
  right: -20px;
  z-index: 1;
}
@media screen and (min-width: 1025px) {
  .photo_spot.spot03 .float_img01 {
    position: absolute;
    max-width: 18%;
    top: 55%;
    right: 16.5%;
    z-index: 1;
  }
}
.photo_spot.spot03 .float_img01 img {
  border-radius: 30px;
}
.photo_spot.spot03 .main_img {
  background: url(../img/decoration/spot03_img01.webp) no-repeat center/cover;
  border-radius: 0 50px 50px 0;
}
.photo_spot.spot03 .main_img::after {
  content: "PHOTO SPOT3";
}
.photo_spot.spot04 .img_area {
  padding-top: 100px;
}
@media screen and (min-width: 1025px) {
  .photo_spot.spot04 .img_area {
    padding-top: 0;
  }
}
@media screen and (min-width: 1025px) {
  .photo_spot.spot04 .main_img_deco {
    width: 70%;
  }
}
.photo_spot.spot04 .main_img {
  background: url(../img/decoration/spot04_img01.webp) no-repeat center/cover;
  border-radius: 50px 0 0 50px;
}
@media screen and (min-width: 1025px) {
  .photo_spot.spot04 .main_img {
    height: 652px;
  }
}
.photo_spot.spot04 .main_img::after {
  content: "PHOTO SPOT4";
}
.photo_spot.spot04 .float_img01 {
  position: absolute;
  max-width: 50%;
  top: 3%;
  left: 2%;
  z-index: 1;
}
@media screen and (min-width: 1025px) {
  .photo_spot.spot04 .float_img01 {
    max-width: 26%;
    top: 10%;
    left: 5%;
    z-index: 1;
  }
}
@media screen and (min-width: 1025px) {
  .photo_spot.spot04 .txt_area {
    width: 80%;
  }
}
@media screen and (min-width: 1025px) {
  .photo_spot .deco_parts5 {
    background: url(../img/decoration/spot01_deco03_pc.webp) no-repeat center/contain;
    aspect-ratio: 500/353;
    width: 74%;
    left: auto;
    right: -25%;
    top: auto;
    bottom: -25%;
  }
}
.photo_spot .deco_parts6 {
  background: url(../img/decoration/spot01_deco01_sp.webp) no-repeat center/contain;
  aspect-ratio: 107/169;
  width: 15%;
  top: auto;
  bottom: -10%;
  left: 0;
}
@media screen and (min-width: 1025px) {
  .photo_spot .deco_parts6 {
    background: url(../img/decoration/spot01_deco01_pc.webp) no-repeat center/contain;
    aspect-ratio: 370/280;
    width: 22%;
    left: auto;
    right: -8%;
  }
}
@media screen and (min-width: 1025px) {
  .photo_spot .deco_parts7 {
    background: url(../img/decoration/spot01_deco02.webp) no-repeat center/contain;
    aspect-ratio: 200/108;
    width: 7%;
    top: auto;
    bottom: 3%;
    left: 5%;
  }
}
.photo_spot .deco_parts8 {
  background: url(../img/decoration/spot02_deco01.webp) no-repeat center/contain;
  aspect-ratio: 765/749;
  max-width: 140px;
  width: 100%;
  top: -10%;
  left: -10px;
  z-index: 10;
}
@media screen and (min-width: 1025px) {
  .photo_spot .deco_parts8 {
    max-width: 400px;
    top: -20%;
    left: -15%;
  }
}
.photo_spot .deco_parts9 {
  background: url(../img/decoration/spot03_deco01.webp) no-repeat center/contain;
  aspect-ratio: 453/488;
  width: 40%;
  top: -21%;
  left: -6%;
  z-index: 10;
}
@media screen and (min-width: 1025px) {
  .photo_spot .deco_parts9 {
    background-image: url(../img/decoration/spot03_deco01_pc.webp);
    background-position: left center;
    width: 23%;
    left: 0;
    top: -18;
  }
}
.photo_spot .deco_parts10 {
  background: url(../img/decoration/spot03_deco02.webp) no-repeat right bottom/contain;
  aspect-ratio: 860/843;
  width: 210px;
  bottom: 23%;
  left: -40px;
  z-index: 2;
}
@media screen and (min-width: 1025px) {
  .photo_spot .deco_parts10 {
    background: url(../img/decoration/spot03_deco02_pc.webp) no-repeat right bottom/contain;
    width: 310px;
    bottom: 35%;
    left: auto;
    right: 0;
  }
}
.photo_spot .deco_parts11 {
  background: url(../img/decoration/spot04_deco01.webp) no-repeat center/contain;
  aspect-ratio: 727/684;
  width: 180px;
  bottom: -28%;
  right: -45%;
}
@media screen and (min-width: 1025px) {
  .photo_spot .deco_parts11 {
    width: 307px;
    bottom: -45%;
    right: -15%;
  }
}
.photo_spot .deco_parts12 {
  background: url(../img/decoration/spot04_deco02.webp) no-repeat center/contain;
  aspect-ratio: 1/1;
  width: 116px;
  top: -50%;
  right: -5%;
}
@media screen and (min-width: 1025px) {
  .photo_spot .deco_parts12 {
    width: 223px;
    top: auto;
    bottom: -24%;
    right: 0;
  }
}

.map {
  padding: 170px 0 200px;
}
@media screen and (min-width: 1025px) {
  .map {
    padding: 188px 0 230px;
  }
}
.map .map_area {
  position: relative;
  z-index: 10;
}
.map .map_area .map_img {
  max-width: 330px;
  margin: 0 auto;
}
@media screen and (min-width: 1025px) {
  .map .map_area .map_img {
    max-width: 1066px;
  }
}
.map .parts1 {
  background: url(../img/decoration/map_parts_img01_sp.webp) center/cover no-repeat;
  width: 100%;
  height: 285px;
  top: 40px;
  left: 0;
}
@media screen and (min-width: 1025px) {
  .map .parts1 {
    background-image: url(../img/decoration/map_parts_img01_pc.webp);
    background-size: contain;
    background-position: center top;
    height: 50%;
    top: 0;
  }
}
.map .parts2 {
  background: url(../img/decoration/map_parts_img02_sp.webp) center/contain no-repeat;
  width: 200px;
  height: 285px;
  top: 70%;
  right: 0;
}
@media screen and (min-width: 1025px) {
  .map .parts2 {
    background-image: url(../img/decoration/map_parts_img02_pc.webp);
    width: 400px;
    height: 520px;
    top: auto;
    bottom: 0;
  }
}
.map .parts3 {
  background: url(../img/decoration/map_parts_img03_sp.webp) center/contain no-repeat;
  width: 140px;
  height: 148px;
  bottom: 20px;
  left: 0;
}
@media screen and (min-width: 1025px) {
  .map .parts3 {
    background-position: left bottom;
    width: 232px;
    height: 223px;
  }
}