/* ***** content ***** */
.tit_area {
  position: relative;
  background: #f9e7e7;
}
.tit_area h1 {
  z-index: 1;
  position: relative;
  margin: 0 auto;
  padding-top: 110px;
  width: 760px;
  text-align: center;
}
.tit_area h1 img {
  display: inline-block;
  opacity: 0;
  transform: translateY(-60px);
}
.tit_area h1 img:nth-child(2) {
  z-index: 2;
  position: relative;
  margin: -40px 0 -5px;
}
.tit_area h1 img:nth-child(3) {
  margin-top: -50px;
}
.tit_area h1 img.action {
  opacity: 1;
  transform: translateY(0);
  -webkit-animation: fall 1s ease-in-out forwards, bounce 1.3s ease-in-out;
          animation: fall 1s ease-in-out forwards, bounce 1.3s ease-in-out;
}

/* action */
@-webkit-keyframes fall {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fall {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes bounce {
  0% {
    transform: translateY(-60px);
    -webkit-animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
            animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  20% {
    transform: translateY(20px);
    -webkit-animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
            animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
  40% {
    transform: translateY(-30px);
    -webkit-animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
            animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  60% {
    transform: translateY(-10px);
    -webkit-animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
            animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
  80%, 100% {
    transform: translateY(0);
  }
}
@keyframes bounce {
  0% {
    transform: translateY(-60px);
    -webkit-animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
            animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  20% {
    transform: translateY(20px);
    -webkit-animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
            animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
  40% {
    transform: translateY(-30px);
    -webkit-animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
            animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  60% {
    transform: translateY(-10px);
    -webkit-animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
            animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
  80%, 100% {
    transform: translateY(0);
  }
}
.con_area {
  position: relative;
  top: -200px;
  padding: 270px 0 95px;
  text-align: center;
  background: #d4a8f2 url("/images/event/240711/bg_top.png") center top no-repeat;
}
.con_area .con01 {
  margin-bottom: 50px;
}
.con_area .con02 {
  position: relative;
  text-align: center;
  background: url("/images/event/240711/con_bg.png") center repeat-y;
}
.con_area .con02:before, .con_area .con02:after {
  content: "";
  position: absolute;
  left: 0px;
  display: inline-block;
  width: 100%;
}
.con_area .con02:before {
  top: 0px;
  height: 102px;
  background: url("/images/event/240711/con_bg_top.png") center top no-repeat;
}
.con_area .con02:after {
  bottom: -1px;
  height: 116px;
  background: url("/images/event/240711/con_bg_bot.png") center bottom no-repeat;
}
.con_area .con02 p {
  position: relative;
  padding: 102px 0 0;
}
.con_area .con02 p a {
  position: absolute;
  top: 26%;
  left: 50%;
  transform: translateX(-50%);
}
.con_area .con02 p a:hover {
  -webkit-animation: rotateShake01 3.5s ease infinite;
          animation: rotateShake01 3.5s ease infinite;
}
.con_area .con02 .btn_group {
  z-index: 2;
  position: relative;
  margin-top: 50px;
  padding-bottom: 116px;
}
.con_area .con02 .btn_group a + a {
  display: inline-block;
  margin-left: 25px;
}
.con_area .con02 .btn_group a:hover {
  -webkit-animation: rotateShake02 3.5s ease infinite;
          animation: rotateShake02 3.5s ease infinite;
}

/* action */
@-webkit-keyframes rotateShake01 {
  0%, 100% {
    transform: translateX(-50%) rotate(0deg);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-50%) rotate(-2deg);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(-50%) rotate(2deg);
  }
}
@keyframes rotateShake01 {
  0%, 100% {
    transform: translateX(-50%) rotate(0deg);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-50%) rotate(-2deg);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(-50%) rotate(2deg);
  }
}
@-webkit-keyframes rotateShake02 {
  0%, 100% {
    transform: rotate(0deg);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: rotate(-2deg);
  }
  20%, 40%, 60%, 80% {
    transform: rotate(2deg);
  }
}
@keyframes rotateShake02 {
  0%, 100% {
    transform: rotate(0deg);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: rotate(-2deg);
  }
  20%, 40%, 60%, 80% {
    transform: rotate(2deg);
  }
}
.notice {
  margin-top: -200px;
  padding: 90px 0;
  text-align: center;
  background: #64149b;
}

@media (max-width: 1300px) {
  .tit_area h1 {
    padding-top: 8vw;
    width: 75%;
  }
  .tit_area h1 img:nth-child(2) {
    margin: -3vw 0 0;
  }
  .tit_area h1 img:nth-child(3) {
    margin: -5vw 0 0;
  }
  .con_area {
    top: -13vw;
    padding: 21vw 0 8vw;
    background-size: 100% auto;
  }
  .con_area .con01 {
    padding: 0 3vw;
    margin-bottom: 6vw;
  }
  .con_area .con02 {
    background-size: 100% auto;
  }
  .con_area .con02:before, .con_area .con02:after {
    background-size: 100% auto;
  }
  .con_area .con02 p {
    padding: 10vw 9vw 0;
  }
  .con_area .con02 p a {
    top: 26.5%;
    width: 51%;
  }
  .con_area .con02 .btn_group {
    margin-top: 4vw;
    padding: 0 9vw 10vw;
  }
  .con_area .con02 .btn_group a {
    width: 67%;
  }
  .con_area .con02 .btn_group a + a {
    margin: 2% 0 0;
  }
  .notice {
    margin-top: -13vw;
    padding: 5vw 0 5vw 4vw;
  }
}