/* reset default style */
.rwd-header {
  position: relative !important;
}

.contents {
  overflow: visible !important;
}

html,
body {
  overflow: smooth;
}

main {
  padding-bottom: 0 !important;
}

.main {
  max-width: 100vw;
}

.main_content {
  position: relative;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-feature-settings: "palt";
  font-weight: 500;
  z-index: 1;
}

.main_content a {
  transition: .3s;
}

@media screen and (min-width:768px) {

  .main_content,
  .main_content h1,
  .main_content h2 {
    font-size: 6.9px;
  }
}

@media screen and (max-width:767px) {

  .main_content,
  .main_content h1,
  .main_content h2 {
    font-size: 1.38vw;
  }

  .main {
    overflow: hidden;
  }
}

.main_content img {
  display: block;
  max-width: 100%;
  height: auto;
}

.main_content p {
  letter-spacing: 0;
  font-weight: 500;
}

.main_content a {
  display: block;
  text-decoration: none;
}

.main_content h2 {
  position: relative;
}

.main_content .sp {
  display: none !important;
}

@media screen and (max-width: 500px) {
  .main_content .pc {
    display: none !important;
  }

  .main_content .sp {
    display: block !important;
  }
}

@media screen and (min-width:768px) {
  .pc_content {
    font-size: 10px;
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100%;
    z-index: 1;
    overflow: hidden;
    background-color: #cbe6f4;
  }

  .main_content .pc_bgitem_wrap {
    position: relative;
    height: 100%;
  }

  /* pc_bg_item */
  .pc_bgitem {
    position: absolute;
  }

  .pc_bgitem_wrap .fv_logo_txt {
    max-width: 21.5em;
    width: 13vw;
    top: 22%;
    left: 3%;
    z-index: 1;
  }

  .pc_bgitem_wrap .fv_logo {
    max-width: 41em;
    width: 23vw;
    top: 32%;
    left: 7%;
    z-index: 1;
  }

  .pc_bgitem_wrap .fv_btnwrap {
    position: absolute;
    width: 18vw;
    right: 5%;
    top: 29%;
    z-index: 1;
  }

  .fv_btnwrap_box {
    position: relative;
    display: flex;
    gap: 3em;
    flex-direction: column;
    align-items: center;
  }

  .pc_bgitem_wrap .item01 {
    width: 20.7em;
  }

  .pc_bgitem_wrap .item02,
  .pc_bgitem_wrap .item03 {
    cursor: pointer;
    transition: .3s;
  }

  .pc_bgitem_wrap .join_btn {
    position: relative;
  }

  .pc_bgitem_wrap .item02 {
    width: 32em;
    margin-top: -1.5rem;
  }

  .pc_bgitem_wrap .item02:hover {
    opacity: .8;
  }

  .pc_bgitem_wrap .item03 {
    width: 29.6em;
  }

  .pc_bgitem_wrap .item02:hover,
  .pc_bgitem_wrap .item03:hover {
    filter: brightness(0.7);
  }

  @keyframes jump {
    0% {
      transform: translateY(0);
    }

    5% {
      transform: translateY(-10px);
    }

    10% {
      transform: translateY(0px);
    }

    15% {
      transform: translateY(-10px);
    }

    20% {
      transform: translateY(0);
    }

    100% {
      transform: translateY(0);
    }
  }
}

body.modal-open .pc_bgitem_wrap .item04 {
  display: none;
}

.pc_bgitem_wrap .item05 {
  position: absolute;
  top: 18%;
  width: 44vw;
  left: -3%;
}

.pc_bgitem_wrap .item06 {
  position: absolute;
  top: 18%;
  width: 44vw;
  right: 0;
  z-index: 0;
}

/* hover animation */
.hover_btn {
  transition-duration: 0.3s;
}

.hover_btn:hover {
  transform: scale(1.03);
  filter: brightness(140%);
}

@media screen and (max-width:1200px) {
  .pc_bgitem {
    display: none !important;
  }
}

.sp_content {
  /* animation: showTop 2s linear both; */
  animation-delay: .5s;
  background-color: #fff;
  overflow: hidden;
}

body.modal-open .sp_content::before {
  content: "";
  position: absolute;
  z-index: 10;
  display: block;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #cbe6f4;
}


@media screen and (min-width:768px) {
  .sp_content {
    position: sticky;
    margin: auto;
    max-width: 500px;
    margin-top: -100vh;
    z-index: 2;
  }
}

@media screen and (max-width:767px) {
  .sp_content {
    max-width: max-content;
  }
}

/* ==============================
  fv
  ============================== */
.fv {
  position: relative;
  overflow: hidden;
  background-color: #f4dac1;
}

.fv_ttl {
  position: absolute;
  top: 24.5%;
  left: 0;
  right: 0;
  margin: auto;
  width: 58em;
  opacity: 0;
  z-index: 1;
}

.fv_ttl.active {
  transform: rotate(-90deg);
  /* 初期位置：反時計回りに90度回転 */
  animation: rotateFadeIn 1s ease-out forwards;
}

@keyframes rotateFadeIn {
  from {
    opacity: 0;
    transform: rotate(-30deg);
  }

  to {
    opacity: 1;
    transform: rotate(0deg);
    /* 時計回りに回転 */
  }
}

.fv_ttl_item01 {
  position: absolute;
  top: 27%;
  left: 14%;
  width: 13.2em;
  opacity: 0;
  z-index: 1;
}

.fv_ttl_item01.active {
  animation: FadeIn 1s ease-out 1s forwards;
}

.fv_ttl_item02 {
  position: absolute;
  top: 50%;
  right: 11%;
  width: 9.6em;
  opacity: 0;
  z-index: 1;
}

.fv_ttl_item02.active {
  animation: FadeIn 1s ease-out 1.3s forwards;
}

@keyframes FadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}


.fv_bg {
  opacity: 0;
}

.fv_bg.active {
  animation: blurIn 1.3s ease-out 1.7s forwards;
}

@keyframes blurIn {
  0% {
    opacity: 0;
    filter: blur(10px);
  }

  100% {
    opacity: 1;
    filter: blur(0);
  }
}

/* ==============================
  spot
  ============================== */
.spot {
  position: relative;
  background-image: url(../img/spot_bg.webp);
  background-size: contain;
  background-repeat: no-repeat;
  padding-top: 3.5em;
  height: 263em;
}

.spot_ttl {
  width: 62.2em;
  margin: auto;
}

/* ~~~~~~~~~~~ myakumyaku ~~~~~~~~~~~ */
.spot .myakumyaku {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: end;
  gap: 2em;
  top: 7.8%;
  right: 11%;
}

.spot .myakumyaku .img01 {
  width: 15em;
  transform: translateX(140px);
  opacity: 0;
}

.spot .myakumyaku .img01.active {
  opacity: 1;
  animation: bounceInRight 1.1s ease-out forwards, jump 3.5s ease-out 2s infinite;
}

.spot .myakumyaku .img02 {
  width: 11.8em;
}

@keyframes bounceInRight {
  0% {
    opacity: 0;
    transform: translateX(200px) translateY(0);
  }

  25% {
    opacity: 1;
    transform: translateX(140px) translateY(-15%);
    animation-timing-function: ease-out;
  }

  45% {
    transform: translateX(80px) translateY(0);
    animation-timing-function: ease-in;
  }

  65% {
    transform: translateX(40px) translateY(-10%);
    animation-timing-function: ease-out;
  }

  85% {
    transform: translateX(0px) translateY(0);
    animation-timing-function: ease-in;
  }

  100% {
    transform: translateX(0px) translateY(0);
  }
}


/* モーダルを開くボタン */
.modal__trigger .spot_item {
  position: absolute;
}

/* ~~~~~~~~~~~ osaka btn ~~~~~~~~~~~ */
.modal__trigger_osaka {
  margin-left: 10%;
  margin-top: 4%;
}

.modal__trigger_osaka .spot_item01 {
  width: 9.2em;
  top: 0%;
}


/* ~~~~~~~~~~~ hokuriku btn ~~~~~~~~~~~ */
.modal__trigger_hokuriku {
  margin-left: 37%;
  margin-top: 3%;
}

.modal__trigger_hokuriku .btn {
  position: relative;
  z-index: 1;
}

.modal__trigger_hokuriku .spot_item01 {
  width: 5.5em;
  top: 9%;
  right: 6%;
  z-index: 1;
}

/* ~~~~~~~~~~~ sanin btn ~~~~~~~~~~~ */
.modal__trigger_sanin {
  margin-left: 6%;
  margin-top: 1%;
}

.modal__trigger_sanin .spot_item01 {
  width: 10em;
  top: 4%;
  left: 8%;
}

/* ~~~~~~~~~~~ wakayama btn ~~~~~~~~~~~ */
.modal__trigger_wakayama {
  margin-left: 29%;
  margin-top: 2%;
}

.modal__trigger_wakayama .spot_item01 {
  width: 27em;
  top: 61%;
  left: -40%;
  transform: translateX(-200px);
  opacity: 0;
}

.modal__trigger_wakayama .spot_item01.active {
  opacity: 1;
  animation: stepInLeft 1.1s ease-out forwards;
}

@keyframes stepInLeft {
  0% {
    opacity: 0;
    transform: translateX(-100px) rotate(0deg);
  }

  10% {
    opacity: 1;
    transform: translateX(-80px) rotate(-2deg);
  }

  20% {
    transform: translateX(-80px) rotate(2deg);
  }

  30% {
    transform: translateX(-60px) rotate(-2deg);
  }

  40% {
    transform: translateX(-60px) rotate(2deg);
  }

  50% {
    transform: translateX(-40px) rotate(-2deg);
  }

  60% {
    transform: translateX(-40px) rotate(2deg);
  }

  70% {
    transform: translateX(-20px) rotate(-2deg);
  }

  80% {
    transform: translateX(-20px) rotate(2deg);
  }

  90% {
    transform: translateX(-5px) rotate(-2deg);
  }

  100% {
    transform: translateX(0) rotate(0deg);
  }
}


.spot_link-btn-wrap {
  margin-top: 10rem;
}

.spot_txt {
  width: 46.3em;
  margin: 0 auto 2em;
}

.spot_link-btn {
  display: flex;
  flex-direction: column;
  gap: 2em;
}

.spot_link-btn a {
  width: 59em;
  margin: auto;
}


/* ============= modal ============= */
/* モーダルを開くボタン */
.modal__trigger {
  position: relative;
  width: 41em;
  cursor: pointer;
}

.modal__trigger:hover .btn {
  animation: hoverZoomBounce .5s ease-out forwards;
}

@keyframes hoverZoomBounce {
  0% {
    transform: scale(1);
  }

  30% {
    transform: scale(1.1);
  }

  60% {
    transform: scale(0.97);
  }

  100% {
    transform: scale(1.05);
  }
}

/* modal */
.modal_item {
  font-size: 7px;
  font-family: "Zen Kaku Gothic New", sans-serif;
}

/* モーダル本体 */
.modal__wrapper {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 1000;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: rgba(57, 57, 57, 0.2);
  backdrop-filter: blur(.2rem);
}

.modal__container {
  position: absolute;
  top: 15.5%;
  left: 50%;
  transform: translate(-50%);
  width: 67.4em;
  text-align: center;
}

.modal__inner {
  position: relative;
  max-height: 80vh;
  overflow-x: hidden;
  background: #fff;
  border-radius: 2em;
  overflow-y: auto;
}

.modal__inner::-webkit-scrollbar {
  display: none;
}

/* モーダルを閉じるボタン */
.modal__close {
  position: absolute;
  position: fixed;
  top: 2em;
  right: 3em;
  width: 7em;
  height: 7em;
  cursor: pointer;
  transition: opacity .6s;
  z-index: 1;
}

.modal__close:hover {
  opacity: .6;
}

.modal__content .modal__main {
  position: relative;
}

.modal__content .modal__main a {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  bottom: 3.5em;
  width: 61em;
}

.scroll {
  overflow-y: scroll;
}

@media screen and (max-width:750px) {
  .modal_item {
    font-size: 1.33vw;
  }

  .modal__layer {
    width: 100%;
  }

  .modal__container {
    top: 10%;
  }

  .modal__inner {
    max-height: 80vh;
    /* max-height: 74.5vh; */
  }
}


/* ==============================
  entry
  ============================== */
.entry {
  position: relative;
  background-image: url(../img/entry_bg.webp);
  background-size: cover;
  padding-top: 18em;
  padding-bottom: 6em;
}

.entry .entry_btn {
  width: 51.6em;
  margin: 0 auto;
}

.entry .entry_btn:hover {
  animation: hoverZoomBounce .5s ease-out forwards;
}

.entry_txt {
  width: 46.3em;
}

.entry_link-btn-wrap {
  margin-top: 8rem;
}

.entry_txt {
  width: 46.3em;
  margin: 1em auto 3em;
}

.entry_link-btn {
  display: flex;
  flex-direction: column;
  gap: 2em;
}

.entry_link-btn a {
  width: 59em;
  margin: auto;
}

/* ~~~~~~~~~~~ myakumyaku ~~~~~~~~~~~ */
.entry .myakumyaku {
  position: absolute;
  top: 41%;
  left: 7%;
}

.entry .myakumyaku .img01 {
  width: 17em;
  transform: translateX(-200px);
  opacity: 0;
}

.entry .myakumyaku .img01.active {
  opacity: 1;
  animation: bounceInLeft 1.1s ease-out forwards, jump 3.5s ease-out 2s infinite;
}

@keyframes bounceInLeft {
  0% {
    opacity: 0;
    transform: translateX(-200px) translateY(0);
  }

  25% {
    opacity: 1;
    transform: translateX(-140px) translateY(-15%);
    animation-timing-function: ease-out;
  }

  45% {
    transform: translateX(-80px) translateY(0);
    animation-timing-function: ease-in;
  }

  65% {
    transform: translateX(-40px) translateY(-10%);
    animation-timing-function: ease-out;
  }

  85% {
    transform: translateX(0px) translateY(0);
    animation-timing-function: ease-in;
  }

  100% {
    transform: translateX(0px) translateY(0);
  }
}

.entry .myakumyaku .img02 {
  width: 20em;
  margin-top: -5em;
  margin-left: 13em;
}


/* ==============================
  participate
  ============================== */
.participate {
  background-color: #fffcee;
  padding: 6em 0 6.5em;
}

.participate_ttl {
  width: 19em;
  margin: auto;
}

.pdf_btn {
  width: 52.6em;
  margin: 3em auto 0;
}


.splide {
  width: 65em !important;
  margin: 4em auto 0;
  padding: 0 0 2em;
  background-color: #fff;
  border: .1em solid;
  border-radius: 4em;
  opacity: 0;
}

.title.active,
.splide.active {
  animation: fadein 1.3s;
  opacity: 1;
}

.splide__slide {
  margin: auto;
}

.splide__slide p {
  font-size: 1.8em;
  text-align: center;
}

.splide__slide .title {
  width: auto;
  opacity: 1;
}

.splide__slide .main_img {
  position: relative;
  width: auto;
  height: 67em;
  margin: auto;
  padding-bottom: 1.5em;
}

.splide__slide .line {
  height: 1px;
  background-color: #000;
  margin: 0 auto 4em;
}

/* yazirusi */
.splide__arrow {
  background: none !important;
  opacity: 1 !important;
}

.button {
  height: 5em;
  transition: .2s;
  width: 9.8em;
}

.button::before {
  background-repeat: no-repeat;
  background-size: contain;
  bottom: 0;
  content: "";
  height: 4em;
  width: 4em;
  margin: auto;
  position: absolute;
  top: 0;
}

.prev::before {
  background-image: url(../img/participate_slide__btn.webp);
  left: -2.5em;
}

.next::before {
  background-image: url(../img/participate_slide__btn.webp);
  transform: rotate(180deg);
  right: -2.5em;
}


/* ==============================
  link_wrap
  ============================== */
.link_list {
  display: flex;
  flex-direction: column;
  justify-self: center;
  gap: 3em;
  margin: 3.5em auto;
}

.link_list a {
  padding: 0 3em;
  transition: .3s;
}

.link_list a:hover {
  opacity: .7;
}


/* ==============================
  event_wrap
  ============================== */
.event_txt {
  width: 64.7em;
  margin: 3.5em auto 0;
}

.event_wrap a {
  padding: 0 3em;
  margin: 2em auto 3.5em;
  transition: .3s;
}

.event_wrap a:hover {
  opacity: .7;
}