@charset "UTF-8";

/*lp-main*/
.lp-main {
  margin-bottom: -250px;
}

@media only screen and (max-width: 768px) {
  footer#footer {
    padding-top: 0!important;
    margin-top: 0!important;
  }

  .lp-main {
    margin-bottom: auto;
  }
}

/*link*/
a,
a:hover {
  cursor:pointer;
  color: inherit;
  transition-property: opacity;
  transition-duration: 0.5s;
  transition: 0.2s all;
}

a:hover {
  opacity: 0.7; 
}

@media only screen and (max-width: 768px) {
  a:hover {
    opacity: 1.0; 
  }
}

/*font*/
.kaisei {
  font-family: "Kaisei Opti", serif;
  font-weight: 400;
  font-style: normal;
}

/*container*/
.lp__container {
  max-width: 1400px;
  box-sizing: border-box;
  margin: auto;
}

.lp__container__middle {
  max-width: 1180px;
  box-sizing: border-box;
  margin: auto;
}

.lp__container__narrow {
  max-width: 1024px;
  box-sizing: border-box;
  margin: auto;
}

.lp__container__xnarrow {
  max-width: 920px;
  box-sizing: border-box;
  margin: auto;
}

@media only screen and (max-width: 768px) {
  .lp__container__middle ,
  .lp__container__narrow ,
  .lp__container__xnarrow {
    max-width: 100%;
  }
}

/*lp__main*/
.lp__main {
  margin: auto;
  margin-top: 150px;
}

@media only screen and (max-width: 768px) {
  .lp__main {
    margin-top: calc(150px / 2);
  }
}

/*lp__title*/
.lp__title {
  text-align: center;
  margin-bottom: 36px;
}

.lp__title span.ja {
  display: block;
  padding:18px 9px;
  color: #fff;
  line-height: 1.123456789;
  text-align: center;
  background: #d3a86a;/*
  font-family: "genkaimincho", sans-serif;*/
  font-weight: 800;
  font-style: normal;
}


@media only screen and (max-width: 768px) {
  .lp__title {
    margin-bottom: calc(36px / 2);
  }

  .lp__title span.ja {
    padding:calc(18px / 1.25) 9px;
    font-size: 18px;
    line-height: 1.56789;
  }

}

/*lp__mv*/
.lp__mv {
  margin-top: 27px;
}

@media only screen and (max-width: 768px) {
  .lp__mv {
    margin-top: calc(27px / 2);
  }

}


/*lp__section*/
.lp__section__container {
  position: relative;
  background: #DDBC78;
  background: linear-gradient(0deg,rgba(221, 188, 120, 1) 0%, rgba(146, 194, 170, 1) 100%);
  box-sizing: border-box;
  padding: 20px;
}

.lp__section__inner {
  position: relative;
  background-image: url(https://grand-mercure-lakebiwa-resortandspa.jp/ko/lp/mystery-quest/assets/images/lp/bg__section1.jpg);
  background-position: top center;
  background-repeat: repeat-y;
  box-sizing: border-box;
  padding: 45px 54px ;
}

.lp__section {
  position: relative;
  background-image: url(https://grand-mercure-lakebiwa-resortandspa.jp/ko/lp/mystery-quest/assets/images/lp/bg__section2.png);
  background-position: top center;
  background-repeat: no-repeat;
  box-sizing: border-box;
  padding: 45px 54px ;
  margin-bottom: 45px;
}

.lp__section__title  {
  margin: 18px auto 
}

.lp__section__title span.ja {
  display: block;
  padding:  18px ;
  color: #fff;
  background-color: #72582a;
  text-align: center;
  font-size: 30.5px;
  line-height: 1.2345678;
  margin: auto;/*
  font-family: "genkaimincho", sans-serif;
  */
  font-style: normal;
  font-weight: 800;
}

  .lp__section__title span.ja.small {
    font-size: 27px;
  }

.lp__section__text {
  margin: 36px auto;
}

.lp__section__text p {
  font-size: 19px;
  line-height: 2;
}

@media only screen and (max-width: 768px) {
  .lp__section__container {
    padding:9px;
  }

  .lp__section__inner {
    padding: calc(45px /2) 18px ;
  }

  .lp__section {
    padding: calc(45px /2) 18px ;
    margin-bottom: calc(45px /2);
  }

  .lp__section__title  {
    margin: calc(18px /2) auto 
  }

  .lp__section__title span.ja {
    padding: calc(24px /2) 18px ;
    font-size: 17px
  }

    .lp__section__title span.ja.small {
      font-size: 16px;
      line-height: 1.6789;
    }

  .lp__section__text {
    margin: calc(36px /2) auto;
  }

  .lp__section__text p {
    font-size: 15px;
    line-height: 1.789;
  }

}

/*lp__about*/
.lp__about__list  {
  margin: auto; 
}

.lp__about__list dl {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  background-image: url(https://grand-mercure-lakebiwa-resortandspa.jp/ko/lp/mystery-quest/assets/images/lp/bg__about.png);
  background-position: bottom left;
  background-repeat: no-repeat;
  padding:27px 0;
  width: 100%;
}

.lp__about__list dl dt ,
.lp__about__list dl dd  {
  font-size: 19px;
  font-family: "Kaisei Opti", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.lp__about__list dl dt  {
  color: #72582a;
  flex-basis: 20%;
}

.lp__about__list dl dd  {
  flex-basis: 80%;
}

.lp__about__caution {
  margin: 36px 0 0;
}
/*
.lp__about__caution p {
  font-size: 18px;
}
*/
@media only screen and (max-width: 768px) {
  .lp__about__list dl {
    padding:calc(36px / 2) 0;
  }

  .lp__about__list dl dt ,
  .lp__about__list dl dd  {
    flex-basis: 100%;
    font-size: 15px;
    line-height: 1.56789;
  }

  .lp__about__list dl dd  {
    font-weight: 400;
  }

  .lp__about__caution {
    margin: calc(36px / 2) 0 0;
  }

  .lp__about__caution p {
    font-size: 13px;
    line-height: 1.56789;
  }

}

/*lp__chara*/
.lp__concept .lp__chara,
.lp__story .lp__chara,
.lp__about .lp__chara ,
.lp__play .lp__chara {
  position: absolute;
}

.lp__concept .lp__chara img,
.lp__story .lp__chara img,
.lp__about .lp__chara img,
.lp__play .lp__chara img {
  width: auto;
  height: calc(368px/ 1.75);
}

  .lp__concept .lp__chara {
    bottom:-54px;
    left: -27px;
    z-index: 12;
  }

  .lp__story .lp__chara {
    bottom:-54px;
    right: -36px;
    z-index: 12;
  }

  .lp__about .lp__chara {
    bottom:-54px;
    left: -27px;
    z-index: 12;
  }

  .lp__play .lp__chara {
    bottom:-63px;
    right: -36px;
    z-index: 12;
  }


@media only screen and (max-width: 768px) {
  .lp__concept .lp__chara img,
  .lp__story .lp__chara img,
  .lp__about .lp__chara img ,
  .lp__play .lp__chara img {
    width: auto;
    height: calc(368px/ 3.75);
  }

  .lp__concept .lp__chara {
    bottom:-54px;
    left: -27px;
    z-index: 12;
  }

  .lp__story .lp__chara {
    bottom:-36px;
    right: -9px;
    z-index: 12;
  }

  .lp__about .lp__chara {
    bottom:-54px;
    left: -27px;
    z-index: 12;
  }

  .lp__play .lp__chara {
    bottom:-36px;
    right: -9px;
    z-index: 12;
  }

}

/*lp__play*/
.lp__play__container {
  margin: auto  ; 
}

.lp__play__container p {
  font-size: 19px;
}

.lp__play__container ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: top;
  margin-top: 36px;
  list-style: none;
}

.lp__step__list {
  list-style: none;
  flex-basis: 31%;
  margin: 0 1%;
}

.lp__step__list span {
  display: block;
  text-align: center;
  margin: auto;
}

.lp__step__list span img {
  position: relative;
  margin-bottom: 18px;
}

.lp__step__list span.ja {
  font-size: 20.25px;
  color: #72582a;
  font-weight: 600;
  line-height: 1.2345;
}

  .lp__step__list:nth-child(1) span.ja {
    line-height: 3;
  }

@media only screen and (max-width: 768px) {
  .lp__play__container {
    margin: calc(90px / 5) auto auto; 
  }

  .lp__play__container p {
    font-size: 15px;
    line-height: 1.789;
  }

  .lp__step__list {
    flex-basis: 100%;
    margin: 18px auto;
  }

  .lp__step__list span img {
    max-width: 200px;
  }

  .lp__step__list span.ja {
    font-size:17px;
  }

  .lp__step__list:nth-child(1) span.ja {
    line-height: 1;
  }

}

/*lp__download*/
.lp__download {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: normal;
}

.lp__download__list ul {
  list-style: none;
  text-align: center;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 18px 90px;
  box-sizing: border-box;
}

.lp__download__list li {
  list-style: none;
  margin: 0 9px;
}

.lp__download__list li img {
  height: calc(108px / 1.25);
}

.lp__specia__cotainer {
  margin:auto;
  text-align: center;
  padding: 18px 0;
}

.lp__specia__cotainer a.btn__special {
  display: block;
  text-decoration: none;
  text-align: center;
  font-size: 22px;
  max-width: 468px;
  border: 1.25px solid #221715;
  color: #221715;
  padding:27px 9px ;
  margin:auto;
  line-height: 1;
  border-radius: 100px;
}

@media only screen and (max-width: 768px) {
  .lp__download__list ul {
    padding: calc(18px / 2)
  }

  .lp__download__list li {
    margin:9px auto;
  }

  .lp__download__list li img {
    height: calc(108px / 1.5);
  }

  .lp__specia__cotainer {
    padding: calc(18px / 2) 0;
  }

  .lp__specia__cotainer a.btn__special {
    font-size: 15px;
    max-width: 100%;
    padding:calc(27px / 1.25) 9px ;
  }

}

/*lp__common*/
.lp__common {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: normal;
  padding:27px 0;
}

.lp__common__title {
  text-align: center;
  margin: auto;
  font-weight: 600;
  border-top: 1.5px solid #0a0003;
  border-bottom: 1.5px solid #0a0003;
  margin: 54px auto 18px;
}

.lp__common__title span.ja {
  display: block;
  padding: 18px 0;
  font-size: 24px;
}

.lp__common p {
  font-weight: normal;
  font-size: 20px;
  text-align: justify;
  line-height: 2;
}

.plan__images__list,
.plan__btn__list {
  margin: 36px auto 18px;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: top;
  list-style: none;
}

.plan__images__list li {
  padding: 0;
  margin: 0 auto;
  list-style: none;
  flex-basis: 32%;
}

.plan__btn__list li {
  padding: 0;
  margin: 0 auto;
  list-style: none;
  flex-basis: 45%;
}

.plan__btn__list li a {
  display: block;
  background-image: url(https://grand-mercure-lakebiwa-resortandspa.jp/ko/lp/mystery-quest/assets/images/lp/icon__arrow.png);
  background-position: 92.5% 52.5%;
  background-repeat: no-repeat;
  text-decoration: none;
  text-align: center;
  color: #fff;
  font-size: 22px;
  padding:36px 9px ;
  line-height: 1;
  border-radius: 100px;
}

.plan__btn__list li a.btn__offer {
  background-color: #d3a86a;
}

.plan__btn__list li a.btn__reserve {
  background-color: #0a0003;
}

@media only screen and (max-width: 768px) {
  .lp__common {
    padding:calc(27px / 2) 2em;
    box-sizing: border-box;
  }

  .lp__common__title {
    margin:calc(54px / 2) auto calc(18px /2);
  }

  .lp__common__title span.ja {
    padding: calc(18px / 2) 0;
    font-size: 15px
  }

  .lp__common p {
    font-size:13px;
    line-height: 1.789;
  }

  .plan__images__list,
  .plan__btn__list {
    margin: calc(36px / 2) auto calc(18px / 2);
  }

  .plan__images__list li {
    flex-basis: 100%;
    margin:4.5px auto;
  }

  .plan__btn__list li {
    flex-basis: 100%;
    margin: 9px auto;
  }

  .plan__btn__list li a {
    background-image: url(https://grand-mercure-lakebiwa-resortandspa.jp/ko/lp/mystery-quest/assets/images/lp/icon__arrow.png);
    font-size: 15px;
    padding:calc(36px / 1.5) 9px;
  }

}