@charset "UTF-8";
/* bigPC */
img {
  max-width: 100%;
}

.sp {
  display: none;
}

.pc {
  display: block;
}

@media screen and (max-width: 768px) {
  .sp {
    display: block;
  }
  .pc {
    display: none;
  }
}

.wrapper {
  max-width: 1920px;
  width: 100%;
  margin: auto;
  /*===============
  イントロ===================*/
  /*===============
  プレゼント==================*/
}

.wrapper .main_visual {
  max-width: 1920px;
  width: 100%;
  margin: auto;
  margin-bottom: -10px;
}

@media screen and (max-width: 768px) {
  .wrapper .main_visual img {
    width: 100%;
  }
}

.wrapper .intro {
  height: auto;
  background: url(../img/intro-bg.png);
  background-repeat: no-repeat;
  background-size: cover;
  padding-bottom: 237px;
}

@media screen and (max-width: 1025px) {
  .wrapper .intro {
    padding-bottom: 16%;
  }
}

@media screen and (max-width: 768px) {
  .wrapper .intro {
    background-size: cover;
    background-repeat: no-repeat;
    padding-bottom: 21vw;
  }
}

.wrapper .intro .intro_logo {
  width: 424px;
}

@media screen and (max-width: 1025px) {
  .wrapper .intro .intro_logo {
    width: 34%;
  }
}

@media screen and (max-width: 768px) {
  .wrapper .intro .intro_logo {
    width: 42vw;
  }
}

.wrapper .intro p {
  font-family: noto-sans-cjk-jp, sans-serif;
  font-size: 30px;
  line-height: 1.7;
  font-weight: 600;
  margin-bottom: 7%;
  letter-spacing: 0.05em;
}

@media screen and (max-width: 1025px) {
  .wrapper .intro p {
    font-size: 2.2vw;
    margin-bottom: 3vw;
  }
}

@media screen and (max-width: 768px) {
  .wrapper .intro p {
    font-size: 4vw;
    line-height: 1.7;
  }
}

.wrapper .intro .intro-inner {
  width: 1140px;
  position: relative;
  z-index: 2;
  background: url(../img/intro-flame3.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center top;
  padding-top: 500px;
  padding-bottom: 185px;
  margin: -8% auto;
}

@media screen and (max-width: 1160px) {
  .wrapper .intro .intro-inner {
    width: 90%;
    background-size: contain;
    margin-top: -10%;
    padding-top: 40.5vw;
  }
}

@media screen and (max-width: 1070px) {
  .wrapper .intro .intro-inner {
    width: 90%;
    background-size: contain;
  }
  .wrapper .intro .intro-inner img {
    width: 60%;
  }
}

@media screen and (max-width: 768px) {
  .wrapper .intro .intro-inner {
    background-image: url(../img/intro-flameSPNEW.png);
    width: 96%;
    height: auto;
    background-repeat: no-repeat;
    padding: 57% 0 22%;
  }
}

.wrapper .intro .intro-inner p {
  font-size: 2em;
  margin-bottom: 3%;
}

@media screen and (max-width: 1160px) {
  .wrapper .intro .intro-inner p {
    font-size: 2vw;
  }
}

@media screen and (max-width: 1025px) {
  .wrapper .intro .intro-inner p {
    font-size: 2vw;
  }
}

@media screen and (max-width: 768px) {
  .wrapper .intro .intro-inner p {
    font-size: 3.5vw;
    margin-top: 7vw;
  }
}

.wrapper .intro .intro-inner .intro-frame {
  margin-top: -43%;
}

@media screen and (max-width: 1600px) {
  .wrapper .intro .intro-inner .quiz-logo {
    width: 50%;
    position: absolute;
    top: 6%;
    left: 25%;
  }
}

@media screen and (max-width: 768px) {
  .wrapper .intro .intro-inner .quiz-logo {
    width: 76%;
  }
}

.wrapper .intro h2 {
  padding-top: 70px;
  position: relative;
}

@media screen and (max-width: 1025px) {
  .wrapper .intro h2 {
    padding-top: 8vw;
  }
}

@media screen and (max-width: 768px) {
  .wrapper .intro h2 {
    padding-top: 11%;
    width: 39%;
    margin: auto;
    margin-bottom: -14%;
  }
}

.wrapper .intro h2 img {
  position: relative;
  z-index: 1;
  margin: auto;
}

@media screen and (max-width: 1025px) {
  .wrapper .intro h2 img {
    width: 46%;
  }
}

@media screen and (max-width: 768px) {
  .wrapper .intro h2 img {
    width: 50%;
    margin: auto;
  }
}

.wrapper .intro h2 .quiz-logo {
  position: absolute;
  z-index: 5;
  right: 30%;
  top: 99%;
}

.wrapper .intro .quiz {
  margin-top: 6%;
}

@media screen and (max-width: 768px) {
  .wrapper .intro .quiz {
    width: 86%;
    margin: auto;
    margin-top: 10%;
  }
}

@media screen and (max-width: 1025px) {
  .wrapper .intro .quiz .quiz-theme {
    width: 80%;
  }
}

@media screen and (max-width: 768px) {
  .wrapper .intro .quiz .quiz-theme {
    width: 100%;
  }
}

.wrapper .intro .quiz img {
  margin: auto;
}

.wrapper .intro .quiz .quiz-inner {
  border: 4px solid #d3b229;
  width: 900px;
  margin: auto;
  border-radius: 20px;
  background-color: #ffffff;
  margin-top: -5%;
  padding: 0 4% 5%;
}

@media screen and (max-width: 1600px) {
  .wrapper .intro .quiz .quiz-inner {
    border: 4px solid #d3b229;
    max-width: 900px;
    margin: auto;
    border-radius: 20px;
    background-color: #ffffff;
    margin-top: -5%;
    padding: 0 4% 5%;
    width: 80%;
  }
}

@media screen and (max-width: 1025px) {
  .wrapper .intro .quiz .quiz-inner {
    width: 80%;
  }
}

@media screen and (max-width: 768px) {
  .wrapper .intro .quiz .quiz-inner {
    width: 98%;
    border: 2px solid #d3b229;
    margin-top: -9%;
    padding-bottom: 10%;
  }
}

.wrapper .intro .quiz .quiz-inner .quiz-sub-title {
  margin-top: 10%;
}

@media screen and (max-width: 768px) {
  .wrapper .intro .quiz .quiz-inner .quiz-sub-title {
    margin-top: 14%;
  }
}

@media screen and (max-width: 1025px) {
  .wrapper .intro .quiz .quiz-inner .quiz-sub-title img {
    width: 100%;
  }
}

.wrapper .intro .quiz .quiz-inner ul li {
  margin-top: 5%;
}

@media screen and (max-width: 768px) {
  .wrapper .intro .quiz .quiz-inner ul li {
    margin-top: 10%;
  }
}

@media screen and (max-width: 1600px) {
  .wrapper .intro .quiz .quiz-inner ul li img {
    width: 20%;
  }
}

@media screen and (max-width: 1025px) {
  .wrapper .intro .quiz .quiz-inner ul li img {
    width: 24%;
  }
}

@media screen and (max-width: 768px) {
  .wrapper .intro .quiz .quiz-inner ul li img {
    width: 40%;
  }
}

.wrapper .intro .quiz .quiz-inner ul li p {
  margin-top: 1%;
  margin-bottom: 0;
  font-size: 28px;
}

@media screen and (max-width: 1025px) {
  .wrapper .intro .quiz .quiz-inner ul li p {
    font-size: 2.3vw;
  }
}

@media screen and (max-width: 768px) {
  .wrapper .intro .quiz .quiz-inner ul li p {
    font-size: 4.5vw;
    line-height: 1.5;
  }
}

.wrapper .present {
  background: url(../img/present-bg.png);
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 6%;
  padding-bottom: 7%;
  margin-bottom: 3%;
}

@media screen and (max-width: 1600px) {
  .wrapper .present {
    padding-top: 1vw;
  }
}

@media screen and (max-width: 768px) {
  .wrapper .present {
    background: url(../img/present-bgSP.png);
    background-size: cover;
    background-repeat: no-repeat;
    margin-bottom: 10%;
    padding-bottom: 8%;
  }
}

.wrapper .present .present-title {
  width: 362px;
  margin: auto;
  margin-bottom: 2%;
}

@media screen and (max-width: 1600px) {
  .wrapper .present .present-title {
    width: 20%;
    margin: auto;
    margin-top: 7%;
    margin-bottom: 4%;
  }
}

@media screen and (max-width: 1025px) {
  .wrapper .present .present-title {
    width: 26%;
    margin-top: 6%;
  }
}

@media screen and (max-width: 768px) {
  .wrapper .present .present-title {
    margin-top: 14vw;
    width: 48vw;
    margin-bottom: 8vw;
  }
}

.wrapper .present .present-title img {
  width: 360px;
}

.wrapper .present .present-inner {
  background: url(../img/present-frameNEW.png);
  background-repeat: no-repeat;
  background-position: center top;
  padding-top: 174px;
  max-width: 1140px;
  margin: 0 auto;
  padding-bottom: 286px;
}

@media screen and (max-width: 1160px) {
  .wrapper .present .present-inner {
    background-size: contain;
    width: 90%;
    padding-top: 14%;
  }
}

@media screen and (max-width: 1025px) {
  .wrapper .present .present-inner {
    margin-top: 4%;
    background-size: contain;
    padding: 12% 8%;
  }
}

@media screen and (max-width: 768px) {
  .wrapper .present .present-inner {
    background: url(../img/present-frameSPNEW.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 96%;
    margin: auto;
    padding-top: 25vw;
    padding-bottom: 21vw;
    padding-right: 4vw;
    padding-left: 4vw;
  }
}

.wrapper .present .present-inner p {
  font-family: noto-sans-cjk-jp, sans-serif;
  font-weight: bold;
  font-size: 3rem;
  line-height: 1.7;
}

@media screen and (max-width: 1600px) {
  .wrapper .present .present-inner p {
    font-size: 1.5vw;
  }
}

@media screen and (max-width: 1025px) {
  .wrapper .present .present-inner p {
    font-size: 2.4vw;
    margin-bottom: 0;
  }
}

@media screen and (max-width: 768px) {
  .wrapper .present .present-inner p {
    font-size: 3.8vw;
    margin-bottom: 0;
    line-height: 2;
    margin-top: 0;
  }
}

.wrapper .present .present-inner .present-big {
  font-size: 46px;
  font-family: noto-sans-cjk-jp, sans-serif;
  font-weight: bold;
  line-height: 1.3;
}

@media screen and (max-width: 1600px) {
  .wrapper .present .present-inner .present-big {
    font-size: 40px;
  }
}

@media screen and (max-width: 1025px) {
  .wrapper .present .present-inner .present-big {
    font-size: 4vw;
  }
}

@media screen and (max-width: 768px) {
  .wrapper .present .present-inner .present-big {
    font-size: 6vw;
    margin-top: -11%;
  }
}

.wrapper .present .present-inner .present-big .Quo-card {
  width: 30%;
  margin: auto;
  margin-top: 2%;
}

@media screen and (max-width: 768px) {
  .wrapper .present .present-inner .present-big .Quo-card {
    width: 60%;
    margin-top: 4%;
  }
}

.wrapper .present .present-inner .bbs-btn {
  width: 660px;
  margin: auto;
  margin-top: 3%;
}

@media screen and (max-width: 1025px) {
  .wrapper .present .present-inner .bbs-btn {
    width: 74%;
  }
}

@media screen and (max-width: 768px) {
  .wrapper .present .present-inner .bbs-btn {
    width: 88%;
    margin-top: 6%;
  }
}

.wrapper .present .present-inner .annotation {
  margin-top: 1%;
}

@media screen and (max-width: 768px) {
  .wrapper .present .present-inner .annotation {
    margin-top: 4%;
  }
}

.wrapper .present .present-inner .annotation p {
  font-size: 1.1em;
  text-align: center;
}

@media screen and (max-width: 1025px) {
  .wrapper .present .present-inner .annotation p {
    font-size: 1.5vw;
  }
}

@media screen and (max-width: 768px) {
  .wrapper .present .present-inner .annotation p {
    line-height: 1.6;
    font-size: 3vw;
  }
}
/*# sourceMappingURL=202201event.css.map */