@charset "UTF-8";

html{
  scroll-padding-top:176.465px;
  scroll-behavior: smooth;
}

body {
  background: url(../img/background.png?202401) repeat;
  /* background: linear-gradient(90deg, rgba(255,255,255,1) 50%, rgba(232,224,242,1) 50%) repeat; */
  background-size: 5em;
  background-position: center top;
}

.sec-01,
.sec-02,
.sec-03,
.sec-04,
.sec-05,
.sec-06,
.sec-07,
.sec-08,
.sec-09,
.sec-10,
.sec-11,
.sec-12,
.sec-13,
.event-note,
.sec-event__note,
.campain-ouchieawase {
  margin-bottom: 6rem;
}

.btn{
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}


section img {
  pointer-events: none;
}

.hidden{
  display: none;
}

/* ----------------------------------- */

header {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 768px;
  background-image: url(../img/header.png);
  background-size: 100% auto;
  background-repeat: no-repeat;
  height: 9rem;
  z-index: 999;
  display: flex;
  background-color: #ea5e00;
}

.header-logo {
  width: 20rem;
  cursor: pointer;
}

.header-pagelink1,
.header-pagelink2,
.header-pagelink3 {
  flex-grow: 1;
  cursor: pointer;
}
.header-access {
  cursor: pointer;
}

.event-link{
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  width: 89.333%;
}


/* ---------------- .sec-yoyaku ------------------- */
.sec-yoyaku_event-link{
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  width: 100%;
}

.sec-yoyaku{
  background-color: #E3F8FF;
  padding: 6rem;
}

.sec-yoyaku_event{
  width: 102.8%;
  left: -2.8%;
}

.sec-calendar{
  padding: 6rem 0;
}

.sec-omikuji{
  position: relative;
  width: 103.4%;
  left: -1.5%;
}

.sec-omikuji_event .btn{
  bottom: 5.6%;
  left: 50%;
  width: 90%;
}

/* 

.sec-yoyaku_event div{
  width: 88%;
  padding-bottom: 6rem;
  margin: 0 auto;
}

.sec-yoyaku_event .campain-kengakuyoyaku{
  width: 91.8%;
  padding-right: 1.9rem;
}

.last-manth .sec-yoyaku_event-01 .sec-yoyaku_event-link{
  top: 82.5%;
}

.sec-yoyaku_event-01 .sec-yoyaku_event-link{
  top: 82.5%;
}

.campain-yoyaku{
  position: relative;
}

.sec-yoyaku__event-link{
  position: absolute;
  bottom: 4.2%;
} */

/* .comingsoon::after{
  content: 'Coming soon';
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 100%;
  height: calc(100% - 6rem);
  color: #fff;
  font-weight: bold;
  background-color: rgba(0, 0, 0, 0.5);
  font-size: 4rem;
}

.comingsoon-banner{
  opacity: 0;
  pointer-events: none;
} */


/* ---------------- .sec-01 ------------------- */

/* ---------------- .sec-02 ------------------- */

/* ---------------- .sec-03 ------------------- */
.sec-02 .btn{
  bottom: 1.5%;
  width: 90%;
}

/* ---------------- .sec-04 ------------------- */

/* ---------------- .sec-05 ------------------- */

/* ---------------- .sec-06 ------------------- */

/* ---------------- .sec-07 ------------------- */

/* ---------------- .sec-08 ------------------- */

/* ---------------- .sec-09 ------------------- */

/* ---------------- .sec-10 ------------------- */

/* ---------------- .sec-11 ------------------- */

/* ---------------- .sec-12 ------------------- */

/* ---------------- .sec-13 ------------------- */


/* ---------------- .event-note ------------------- */

.event-note{
  padding: 0 4rem;
}

.event-area {
  /* cursor: pointer; */
  width: 100%;
  /* margin-bottom: 6rem; */
    border-radius: 2.5rem;
    overflow: hidden;
}

.event-btn {
  position: relative;
}

.event-btn img {
  display: block;
}

.event-btn .open {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  -webkit-transition: opacity 0.3s ease-out;
  transition: opacity 0.3s ease-out;
  opacity: 0;
}

.event-btn img.rev {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  opacity: 0;
}

.event-btn.show .open {
  opacity: 1;
}

.event-inner {
  -webkit-transition: height 0.3s ease-out;
  transition: height 0.3s ease-out;
  background-color: #FFDCDC;
  /* height: 0; */
  overflow: hidden;
}

.event-area .event-text {
  display: inline-block;
  /* font-size: 1.7em; */
  position: relative;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  line-height: 1.3;
  /* padding: 2.25rem 5.93rem 2.86rem; */
  padding: 2.25rem 3rem 2.86rem;
}

.event-area .event-text p {
  font-size: 2rem;
  text-indent: -1em;
  padding-left: 1em;
  font-feature-settings: "palt" 1;
  line-height: 1.35;
}

/* ----------------------------------- */

.sec-yoyaku_event-01{
  margin-bottom: 6rem;
}

/* ----------------------------------- */

.sec-info {
  width: 67rem;
  margin: 0 auto;
  margin-bottom: 6rem;
}

/* ----------------------------------- */

.sec-info__line {
  margin-bottom: 6rem;
}

.sec-info__line-link {
  position: absolute;
  bottom: 12.5%;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  width: 83.5%;
}

/* ----------------------------------- */

.sec-info__qsa {
  margin-bottom: 6rem;
}
/* ----------------------------------- */

.sec-info__stamp {
  margin-bottom: 6rem;
}
/* ----------------------------------- */

.sec-info__ticket {
  margin: 0 -6%;
  margin-bottom: 6rem;
}

/* ----------------------------------- */

.sec-info__news {
  position: relative;
  /* margin-bottom: 6rem; */
}
/* ----------------------------------- */

.sec-sns {
  /* margin-bottom: 6rem; */
  position: relative;
}

.sec-sns__instagram {
  position: absolute;
  top: 51.25%;
  left: 33%;
  width: 12.4rem;
}

.sec-sns__twitter {
  position: absolute;
  top: 51.25%;
  left: 52%;
  width: 12.4rem;
}

/* ----------------------------------- */

.sec-info-yoyaku__event-link{
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  width: 83.58208955%;
}

.sec-info-yoyaku__event{
  background-color: #fffbe9;
  padding-top: 6rem;
}

.sec-info-yoyaku__event div{
  width: 89.5%;
  margin: 0 auto;
  padding-bottom: 6rem;
}

.last-manth .sec-info-yoyaku__event-01 .sec-info-yoyaku__event-link{
  top: 82.5%;
}
.last-manth .sec-info-yoyaku__event-02 .sec-info-yoyaku__event{
  top: 83%;
}
.sec-info-yoyaku__event-01 .sec-info-yoyaku__event-link{
  top: 80%;
}
.sec-info-yoyaku__event-02 .sec-info-yoyaku__event-link{
  top: 82.5%;
}
.sec-info-yoyaku__event-03 .sec-info-yoyaku__event-link{
  top: 83%;
}
/* ----------------------------------- */

.sec-access {
  margin-bottom: 6rem;
}

.sec-access__kaijoyoyaku {
  width: 67rem;
  margin: 0 auto 6rem;
}

.sec-access__info {
  margin-bottom: 6rem;
}

.sec-access__kaijo {
  width: 67rem;
  margin: 0 auto;
}

/* ----------------------------------- */

.sec-map__map iframe {
  display: block;
  width: 89.33%;
  margin: 0 auto;
  height: 44.4rem;
}

/* ----------------------------------- */

footer {
  padding: 4.7rem 0 23rem;
  font-weight: 500;
}

.footer-info {
  margin-bottom: 3rem;
}

.copyright {
  width: 57.1%;
  margin: 0 auto;
}

.back-fff{
  background-color: #fff;
  position: relative;
}

.back-fff::after{
  content: "";
  display: block;
  position: absolute;
  bottom: 100%;
  width: 100%;
  height: 6rem;
  background-color: #fff;
}

/* --------------------------------- */
.page-top__box{
  width: 100%;
  max-width: 768px;
  position: fixed;
  bottom: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  z-index: 10;
}

.page-top{
  position: fixed;
  right: 2rem;
  bottom: 18rem;
  width: 10rem;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease-out;
}

.page-top.show{
  opacity: 1;
  pointer-events: auto;
}

/* --------------------------------- */

/* .campaign {
  width: 100%;
  max-width: 768px;
  position: fixed;
  bottom: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

.campaign-inner {
  width: 100%;
}

.close-btn {
  position: absolute;
  top: -0.5%;
  right: 0;
  width: 13%;
  cursor: pointer;
  transition: opacity 0.3s ease-out;
  opacity: 0;
}

.close-btn.show{
  opacity: 1;
} */

/* --------------------------------- */

/* .main{
  padding-bottom: 19rem;
} */

a {
  display: block;
}

@media screen and (min-width: 769px) {
  a:hover,
  .slot-banner:hover{
    animation: blink_animation 0.6s ease-out;
  }

  .slot-banner,
  .page-top{
    cursor: pointer;
  }


  .sec-01 a:hover{
    animation: none;
  }

  /* .campaign:hover{
    animation: blink_animation 0.6s ease-out;
  } */
}

/* --------------------------------- */

@media screen and (max-width: 768px) {
  html{
    scroll-padding-top:23.521142857142856vw;
  }
  /* body {
    background-size: 5.4rem;
    background-position: center -1rem;
  } */

  header {
    height: 4.5rem;
  }

  .header-logo {
    width: 10rem;
  }

  .header-access {
    width: 4.5rem;
  }

  .sec-yoyaku{
    padding: 2.5rem;
  }

.sec-calendar{
  padding: 2.5rem 0;
}

.sec-info-yoyaku__event{
  padding-top: 3rem;
}

.sec-info-yoyaku__event div{
  padding-bottom: 3rem;
}


.fair-list{
  margin: -3.5rem auto 0;
  row-gap: 1rem;
  padding-bottom: 3rem;
}
.fair-item.title{
  margin-top: 1rem;
}
.sec-access__kaijo{
  width: 33.5rem;
}

  .sec-01,
  .sec-02,
  .sec-03,
  .sec-04,
  .sec-05,
  .sec-06,
  .sec-07,
  .sec-08,
  .sec-09,
  .sec-10,
  .sec-11,
  .sec-12,
  .sec-13,
  .sec-event__note,
  .event-note,
  .sec-info__line,
  .sec-info,
  .sec-info__news,
  .sec-info__qsa,
  .sec-info__stamp,
  .sec-info__ticket,
  .sec-access,
  .sec-access__kaijoyoyaku,
  .sec-access__info,.sec-info-yoyaku,
  .campain-ouchieawase {
    margin-bottom: 3rem;
  }

  

  .sec-info{
    width: 33.5rem;
  }

  .event-note{
    padding: 0 2rem;
  }

  .event-area {
      border-radius: 1.25rem;
  }

  .event-area .event-text {
    /* padding: 1.125rem 2.965rem 1.43rem; */
    padding: 1.125rem 1.5rem 1.43rem;
  }

  .event-area .event-text p {
    font-size: 1rem;
  }

  /* .inner{
    padding: 0 2rem;
  } */

  .sec-sns__instagram,
  .sec-sns__twitter {
    width: 6.2rem;
  }

  .sec-map__map iframe {
    height: 22.2rem;
  }

  footer {
    padding: 2.35rem 0 10rem;
  }
  .footer-info {
    margin-bottom: 1.5rem;
  }

  .page-top{
    right: 1rem;
    bottom: 8.9rem;
    width: 5rem;
  }

  .back-fff::after{
    height: 3rem;
  }

}