/* =========================
   Reset / Base
========================= */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  background: #fff;
  color: #4F2C1E;
  line-height: 1.8;
}

img {
  max-width: 100%;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
}

section.hero {
  background-color: #dad2e7;
  padding-bottom: 100px;
}
.hero-image img {
  width: 100%;
}
.hero-gradation {
  background: linear-gradient(180deg, rgba(210, 196, 228, 0) 0%, #D6CBE6 47.54%, #DAD2E7 100%);
  width: 100%;
  height: 250px;
  position: relative;
  top: -125px;
  margin-bottom: -125px;
}
.contents-image {
  position: relative;
  z-index: 2;
}
.contents-image img {
  width: 100%;
}
.contents_01 {
  display: block;
}
.contents_02 {
  display: block;
  margin-top: 40px;
}
.container {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
.event .container {
  max-width: 840px;
}
section.map_spot {
  background-color: #485B8E;
  position: relative;
  padding: 120px 0 70px;
}
section.map_spot::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: url('../img/bg_star@2x_pc.png') 0 0 repeat;
  background-size: 1280px auto;
  mix-blend-mode: soft-light;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}
.map_spot .bg::before {
  content: "";
  display: block;
  width: 1180px;
  height: 630px;
  background: url('../img/bg_map@2x_pc.png') 0 0 no-repeat;
  background-size: 100% 100%;
  position: absolute;
  left: calc(50% - 590px);
  top: 45px;
  z-index: 1;
}
.map_spot .bg::after {
  content: "";
  display: block;
  width: 1180px;
  height: 547px;
  background: url('../img/bg_news@2x_pc.png') 0 0 no-repeat;
  background-size: 100% 100%;
  position: absolute;
  left: calc(50% - 590px);
  bottom: 72px;
  z-index: 1;
}
.title .picture-image img {
  width: 100%;
}
.map {
  position: relative;
}
.map .title {
  width: 239px;
  margin: auto;
}
.map .contents {
  margin-top: 24px;
}
.map .map_container {
  width: 840px;
  height: 480px;
  overflow: hidden;
  margin: auto;
  border: 4px solid #fff;
  box-sizing: content-box;
}
.map .map_container iframe {
  /*width: 840px;
  height: calc(400px + 68px);
  margin-top: -68px;*/
  border: 0;
}
.spot {
  margin-top: 100px;
}
.spot .title {
  width: 420px;
  margin: 0 auto;
}
.spot .contents {
  margin-top: 40px;
}
.grid_container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px 40px;
}
.spot_item {
  background: #fff;
  padding: 24px;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.spot_item img {
  width: 100%;
}
.spot_text {
  text-align: left;
}
.spot_footer {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.spot_term .spot_term_img {
  display: block;
}
.spot_coming_soon {
  width: 168px;
  padding: 20px 0;
}
.spot_detail_link {
  width: 224px;
  margin: auto;
}
.news {
  margin-top: 100px;
}
.news .title {
  width: 768px;
  margin: auto;
}
.news .contents {
  width: 580px;
  margin: 24px auto 0;
}
.news .contents {
  width: 100%;
}
.news .contents img {
  width: 100%;
}
.news .contents .picture-image {
  width: 526px;
  margin: 24px auto 0;
  display: block;
}
.news .contents .news_img {
  width: 580px;
  margin: 24px auto 0;
}
section.event {
  width: 100%;
/*  padding: 100px 0;*/
  padding: 100px;
  background: linear-gradient(180deg, #DAD0E6 0%, #B1C3F3 100%);
}
.event .picture-image {
  width: 380px;
  margin: 0 auto 40px;
  display: block;
}
.event .event_lists {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  margin: auto;
}
.event .event_item {
  background-color: #fff;
  border-radius: 12px;
  padding: 32px;
  width: 100%;
  display: flex;
  gap: 24px;
}
.event .event_item .event_img {
  width: 260px;
}
.event .event_item .event_img img {
  width: 100%;
}
.event .event_item .event_text {
  width: 492px;
}
.event .event_item .event_text img {
  width: 100%;
}
.event .event_item .event_coming_soon {
  width: 168px;
  margin: 58px auto;
}
.event .event_item .event_coming_soon img {
  width: 100%;
}
section.links {
  width: 100%;
  padding: 40px 0px;
  background: #DCD3E7;
}
.links .btn_links {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  gap: 24px;
}
.links .btn_links .link_item {
  background-color: #fff;
  border-radius: 12px;
  padding: 16px 32px;
}
.links .btn_links .link_item img {
  width: 160px;
}

section.footer {
  padding: 60px 0 20px;
}

.footer .container {
  padding-top: 0;
}

.footer .container .footer-img:not(:last-child) {
  margin-bottom: 80px;
}

.footer-img img {
  margin: 0 auto;
}

.footer-copyright {
  font-family: "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;;
  font-size: 14px;
  letter-spacing: -0.05em;
}

#totop {
  position: fixed;
  right: 32px;
  bottom: 32px;
  display: none;
  z-index: 9;
}
#totop:hover,
#totop:hover img,
#totop:hover img:hover {
  opacity: 1;
}
#totop .totop_01 {
  position: absolute;
  left: -16px;
  top: -48px;
  transition-duration: .2s;
}
#totop:hover .totop_01 {
  position: absolute;
  left: -16px;
  top: -58px;
}

@media screen and (max-width:780px) {
  body {
    padding-top: 0;
  }
  section.hero {
    padding-bottom: 64px;
  }
  .hero-gradation {
    margin-bottom: -180px;
  }
  .container {
    max-width: 91.79487179%;
  }
  .contents_01 {
    width: 86.59217877%;
    margin: auto;
  }
  .contents_02 {
    width: 100%;
    margin: 25px auto 0;
  }
  .event .container {
    max-width: 91.79487179%;
  }
  section.map_spot {
    padding: 40vw 0 46.15384615vw;
  }
  .map_spot .bg::before {
    content: "";
    display: block;
    width: 85.8974359vw;
    height: 176.92307692vw;
    background: url('../img/bg_map@2x_sp.png') 0 0 no-repeat;
    background-size: 100% 100%;
    position: absolute;
    left: calc(50% - (85.8974359vw / 2));
    top: 14.35897436vw;
    z-index: 1;
  }
  .map_spot .bg::after {
    content: "";
    display: block;
    width: 77.69230769vw;
    height: 23.07692308vw;
    background: url('../img/bg_news@2x_sp.png') 0 0 no-repeat;
    background-size: 100% 100%;
    position: absolute;
    left: calc(50% - (77.69230769vw / 2));
    bottom: 15.38461538vw;
    z-index: 1;
  }
  .map .title {
    width: 91.06145251%;
  }
  .map .map_container {
    width: 83.58974359%;
    height: auto;
    margin: 0 auto;
/*    aspect-ratio: 16 / 9;*/
/*    aspect-ratio: 16 / 22.6;*/
    aspect-ratio: 16 / 25.9141104293;
  }
  .map_container iframe {
    width: 100%;
    height: 100%;
    border: 0;
  }
  .spot {
    margin-top: 60px;
  }
  .spot .title {
    width: 100%;
    margin: 0 auto;
  }
  .spot .contents {
    margin-top: 16px;
  }
  .grid_container {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 16px;
  }
  .spot_item {
    padding: 24px 16px;
    gap: 16px;
  }

  .news {
    margin: 56px 16px 0;
  }
  .news .title {
/*    width: 100%;*/
    width: 110%;
    margin-left: -5%;
  }
  .news .contents .picture-image {
    width: 100%;
  }
  .news .contents .news_img {
    width: 100%;
  }
  section.event {
    padding: 64px 0;
  }
  .event .picture-image {
    width: 100%;
    margin-bottom: 16px;
  }
  .event .event_item {
    flex-direction: column;
    padding: 24px 16px;
  }
  .event .event_item .event_img {
    width: 100%;
  }
  .event .event_item .event_text {
    width: 100%;
  }
  /*.event .event_item .event_coming_soon {
    width: 100%;
    margin: 58px auto;
  }*/

  section.links {
    padding: 56px 16px;
  }
  .links .btn_links {
    flex-direction: column;
    align-items: center;
  }

  section.footer {
    padding: 0;
  }
  .footer .container {
    padding: 20px 0;
  }
  .footer .container .footer-img:not(:last-child) {
    margin-bottom: 50px;
  }
  .banner_footer_01 {
    width: 100%;
    height: auto;
  }

  #totop {
    right: 16px;
    bottom: 16px;
    z-index: 8;
  }
  #totop .totop_01 {
    width: 60px;
  }
  #totop .totop_02 {
    width: 61px;
  }
  #totop .totop_01 {
    position: absolute;
    left: -12px;
    top: -33px;
  }
  #totop:hover .totop_01 {
    position: absolute;
    left: -12px;
    top: -39px;
  }
}