/*****************************************************************************
CSS only for Guide page
*****************************************************************************/

/* Billboard
-----------------------------------------*/
.Billboard {
  text-align: center;
}
.Billboard img{
  max-width: 100%;
  height: auto;
}

/* Intro
-----------------------------------------*/
.Intro {
  max-width: 1448px;
  margin: 0 auto;
  background-color: #00239c;
  padding: 65px 0;
}
@media screen and (max-width: 767px) {
  .Intro {
    padding: 53px 0;
  }
}
.Intro__inner {
  max-width: 812px;
  margin: 0 auto;
}
@media screen and (max-width: 976px) {
  .Intro__inner {
    margin: 0 40px;
  }
}
.Intro__Text {
  font-size: 16px;
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 1.9;
  color: #fff;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .Intro__Text {
    text-align: left;
  }
}

/* ImgArea
-----------------------------------------*/
.ImgArea {
  text-align: center;
  padding-top: 120px;
  padding-bottom: 175px;
}
@media screen and (max-width: 767px) {
  .ImgArea {
    padding: 35px 40px 100px;
  }
}
.ImgArea img {
  max-width: 100%;
  height: auto;
}

/* MovieArea
-----------------------------------------*/
.MovieArea {
  aspect-ratio: 16 / 9;
}
.MovieArea iframe {
  width: 100%;
  height: 100%;
}

/* Guide
-----------------------------------------*/
.Guide {
  max-width: 1448px;
  margin: 0 auto;
  padding: 136px 0 231px;
}
@media screen and (max-width: 976px) {
  .Guide {
    padding: 120px 0 256px;
  }
}

.Guide__inner  {
  max-width: 976px;
  margin: 0 auto;
}
@media screen and (max-width: 976px) {
  .Guide__inner  {
    margin: 0 20px;
  }
}

.Guide__sec {
  background-color: #fff;
  margin-top: 140px;
}
.Guide__sec + .Guide__sec {
  margin-top: 275px;
}
@media screen and (max-width: 767px) {
  .Guide__sec + .Guide__sec {
    margin-top: 260px;
  }
}

.Guide__wrapper {
  max-width: 812px;
  margin: 0 auto;
}
@media screen and (max-width: 976px) {
  .Guide__wrapper {
    margin: 0 20px;
  }
}

.Guide__box {
  position: relative;
  padding: 110px 0 133px
}
@media screen and (max-width: 767px) {
  .Guide__box {
    padding: 63px 0 0;
  }
}

.Guide__item + .Guide__item{
  margin-top: 96px;
}
@media screen and (max-width: 767px) {
  .Guide__item + .Guide__item{
    margin-top: 72px;
  }
}
.Guide__item > *:last-child {
  margin-bottom: 0;
}


/* SecTitle
-----------------------------------------*/
.SecTitle {
  text-align: center;
  position: absolute;
  top: 0;
  left: 50%;
  transform: skewX(-12deg) translate(-50%, -50%);
  white-space: nowrap;
}
@media screen and (max-width: 767px) {
  .SecTitle {
    transform: skewX(-12deg) translate(-55%, -100%);
    top: 28px;
    left: calc(50% - 5.95px);
  }
}
.SecTitle > strong {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 90px;
  font-size: 9rem;
  font-weight: bold;
  text-transform: uppercase;
  color: #004c9b;
  /* background: linear-gradient(to right, #00bff9, #004c9b); */
  background: -moz-linear-gradient(left, #00bff9, #004c9b);
  background: -webkit-linear-gradient(left, #00bff9, #004c9b);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  z-index: 1;
}
@media screen and (max-width: 976px) {
  .SecTitle > strong {
    font-size: 75px;
    font-size: 7.5rem;
    line-height: 1;
  }
}
@media screen and (max-width: 767px) {
  .SecTitle > strong {
    font-size: 56px;
    font-size: 5.6rem;
  }
}

.SecsubTitle {
  text-align: center;
  position: relative;
  margin-bottom: 80px;
}
.SecsubTitle::after {
  content: '';
  display: block;
  background-color: #004ea1;
  width: 210px;
  height: 4px;
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 0;
}
@media screen and (max-width: 767px) {
  .SecsubTitle::after {
    width: 168px;
  }
}
.SecsubTitle > span {
  font-size: 26px;
  font-size: 2.6rem;
  color: #004ea1;
  display: inline-block;
  position: relative;
  padding-bottom: 29px;
}
@media screen and (max-width: 767px) {
  .SecsubTitle > span {
    font-size: 20px;
    font-size: 2rem;
  }
}
.SecsubTitle > span::before {
  content: "";
  display: block;
  width: 43px;
  position: absolute;
  right: 0;
  bottom: -5px;
  left: 0;
  border-bottom: 7px solid #fff;
  margin: auto;
  z-index: 1;
}
@media screen and (max-width: 767px) {
  .SecsubTitle > span::before {
    width: 35px;
  }
}

.SecsubTitle > span::after {
  content: "";
  display: block;
  width: 43px;
  position: absolute;
  right: -11px;
  bottom: -17px;
  left: 0;
  border-bottom: 4px solid #004ea1;
  margin: auto;
  transform: rotate(-40deg);
  z-index: 2;
}
@media screen and (max-width: 767px) {
  .SecsubTitle > span::after {
    width: 35px;
    right: -10px;
    bottom: -14.5px;
  }
}

.BoxHeading {
  text-align: center;
  width: 574px;
  max-width: 100%;
  margin: 0 auto;
  transform: skewX(-20deg);
  z-index: 1;
}
.BoxHeading span {
  display: inline-block;
  transform: skewX(20deg);
}

.BoxHeading--schedule {
  font-size: 18px;
  font-size: 1.8rem;
  color: #FFF;
  background: linear-gradient(to right, #00bff9, #004c9b);
  background: -webkit-linear-gradient(left, #00bff9, #004c9b);
  background: -moz-linear-gradient(left, #00bff9, #004c9b);
  position: absolute;
  left: 50%;
  transform: skewX(-20deg) translate(-50%, -50%);
  padding: 16.5px 10px;
}
@media screen and (max-width: 767px) {
  .BoxHeading--schedule {
    font-size: 16px;
    font-size: 1.6rem;
    padding: 11px 10px;
    margin-left: -8.08px;
    transform: skewX(-13deg) translate(-50%, -50%);
  }
}
@media screen and (max-width: 767px) {
  .BoxHeading--schedule span {
    transform: skewX(13deg);
  }
}

.BoxHeading--rule {
  font-size: 24px;
  font-size: 2.4rem;
  color: #004ea1;
  background-color: #fed000;
  position: absolute;
  left: 50%;
  transform: skewX(-20deg) translate(-50%, -50%);
  padding: 12px 10px;
}
@media screen and (max-width: 767px) {
  .BoxHeading--rule {
    font-size: 18px;
    font-size: 1.8rem;
    /* width: calc(100% - 40px); */
    position: static;
    left: auto;
    transform: skewX(0deg) translate(0);
    padding: 21px 10px;
  }
}
@media screen and (max-width: 767px) {
  .BoxHeading--rule span {
    transform: skewX(0deg);
  }
}

.BoxHeading--qicon {
  position: relative;
  padding-left: 81px;
}
@media screen and (max-width: 767px) {
  .BoxHeading--qicon {
    width: 100%;
    padding-left: 0;
  }
}
.BoxHeading--qicon::before {
  content: '';
  background: url(/guide/assets/img/icon_question.png) no-repeat center center / contain;
  width: 61px;
  height: 61px;
  position: absolute;
  bottom: 5px;
  left: 0;
}
@media screen and (max-width: 767px) {
  .BoxHeading--qicon::before {
    width: 40px;
    height: 40px;
    top: -40.5px;
    left: -20px;
  }
}

/* Explain
-----------------------------------------*/
.Explain {
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 1.9;
}
.Explain--center {
  text-align: center;
}
@media screen and (max-width: 767px) {
  .Explain--center {
    text-align: left;
  }
}
.Explain > p {
  margin-bottom: 50px;
}
@media screen and (max-width: 767px) {
  .Explain > p {
    margin-bottom: 25px;
  }
}
.Explain > *:last-child {
  margin-bottom: 0;
}

/* ImgList
-----------------------------------------*/
.ImgList {
  text-align: center;
  margin: 60px 0;
}
@media screen and (max-width: 767px) {
  .ImgList {
    margin: 50px 0;
  }
}
.ImgList  img {
  max-width: 100%;
  height: auto;
}
.ImgList--col {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}
@media screen and (max-width: 767px) {
  .ImgList--col {
    display: block;
  }
}
.ImgList--col > li {
  width: 48.2%;
  /* margin-bottom: 3.6%; */
}
@media screen and (max-width: 767px) {
  .ImgList--col > li {
    width: auto;
  }
}
/* .ImgList--col > li:not(:nth-child(2n)) {
  margin-right: 3.6%;
} */

@media screen and (max-width: 767px) {
  .ImgList--col > li:not(:first-child){
    margin-top: 25px;
  }
}

/* LinkBtn
-----------------------------------------*/
.BtnBox {
  text-align: center;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  transform: translateY(50%);
}
@media screen and (max-width: 767px) {
  .BtnBox {
    position: relative;
    bottom: -37px;
    padding-top: 23px;
    transform: translateY(0);
  }
}
@media screen and (max-width: 767px) {
  .BtnBox--side {
    margin: 0 20px;
  }
}

.BtnBox--col {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media screen and (max-width: 767px) {
  .BtnBox--col {
    display: block;
    transform: translateY(0);
  }
}
@media screen and (max-width: 767px) {
  .BtnBox--col > li:not(:first-child){
    margin-top: 16.5px;
  }
}
.LinkBtn {
  font-size: 18px;
  font-size: 1.8rem;
  text-align: center;
  color: #fff;
  width: 48.275%;
  display: inline-block;
}
@media screen and (max-width: 767px) {
  .LinkBtn {
    font-size: 16px;
    font-size: 1.6rem;
    width: auto;
    display: block;
  }
}
.LinkBtn span {
  background-color: #004ea1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 392px;
  max-width: 100%;
  min-height: 90px;
  position: relative;
  padding: 0.7em 3em 0.7em 1.5em;
  box-sizing: border-box;
  box-shadow: 4px 4px 0 #95dffa;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .LinkBtn span {
    /* width: 100%; */
    min-height: 70px;
  }
}
.LinkBtn span::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 38px;
  width: 12px;
  height: 12px;
  border-top: solid 3px #fff;
  border-right: solid 3px #fff;
  -webkit-transform: translateY(-50%) rotate(45deg);
  transform: translateY(-50%) rotate(45deg);
}
.LinkBtn a {
  color: #fff;
  text-decoration: none;
  display: flex;
  width: 100%;
}
.LinkBtn a:hover > span {
  background-color: rgba(0, 78, 161, .8);
}
.LinkBtn a:link    { color: #fff; text-decoration: none; }
.LinkBtn a:visited { color: #fff; text-decoration: none; }
.LinkBtn a:hover   { color: #fff; text-decoration: none; }
.LinkBtn a:focus   { color: #fff; text-decoration: none; }
.LinkBtn a:active  { color: #fff; text-decoration: none; }

/* TimeTbl
-----------------------------------------*/
.Guide__box--enter {
  padding-bottom: 92px;
}
@media screen and (max-width: 767px) {
  .Guide__box--enter {
    padding-bottom: 0;
  }
}
.TimeTbl {
  position: relative;
  padding-top: 85px;
}
.TimeTbl__menu table {
  width: 100%;
  border: 15px solid #eeecec;
}
@media screen and (max-width: 767px) {
  .TimeTbl__menu table {
    width: auto;
    border: none;
    margin: 0 -20px;
  }
}
.TimeTbl__menu table tr:last-child td {
  padding-bottom: 60px;
}

.TimeTbl__menu tr:first-child th,
.TimeTbl__menu tr:first-child td {
  padding-top: 70px;
}
.TimeTbl__time {
  font-size: 18px;
  font-size: 1.8rem;
  text-align: center;
  color: #004ea1;
  background-color: #f6f6f6;
  width: 19.5%;
  border-bottom: 2px solid #e2e0e0;
  padding: 1.4em 1.6em;
  white-space: nowrap;
}
@media screen and (max-width: 767px) {
  .TimeTbl__time {
    font-size: 13.5px;
    font-size: 1.35rem;
    text-align: left;
    width: 33%;
    padding: 33px 20px;
  }
}

.TimeTbl__detail {
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 1.8;
  color: #221815;
  width: 80.5%;
  border-bottom: 2px solid #e2e0e0;
  padding: 2.18em;
}
@media screen and (max-width: 767px) {
  .TimeTbl__detail {
    font-size: 13.5px;
    font-size: 1.35rem;
    width: 67%;
    padding: 33px 20px;
  }
}
.TimeTbl__detail p {
  margin-bottom: .5em;
}
.TimeTbl__detail > *:last-child {
  margin-bottom: 0;
}
.TimeTbl__img {
  margin-top: 20px;
  overflow: hidden;
}
.TimeTbl__img ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: -28px;
}
@media screen and (max-width: 767px) {
  .TimeTbl__img ul {
    display: block;
    margin-bottom: -16px;
  }
}
.TimeTbl__img li {
  text-align: center;
  width: 45.5%;
  margin-right: 28px;
  margin-bottom: 28px;
}
@media screen and (max-width: 767px) {
  .TimeTbl__img li {
    width: auto;
    margin-right: 0;
    margin-bottom: 16px;
  }
}
.TimeTbl__img li:nth-child(even) {
  margin-right: 0;
}
.TimeTbl__img img {
  max-width: 100%;
  height: auto;
}

.ColBox {
  display: flex;
  align-items: flex-start;
  margin-top: 24px;
}
@media screen and (max-width: 767px) {
  .ColBox {
    display: block;
    margin-top: 0;
  }
}
.ColBox p {
  width: 48%;
}
@media screen and (max-width: 767px) {
  .ColBox p {
    width: 100%;
  }
}
.ColBox__img {
  width: 47%;
  flex: 1;
  margin-left: 5%;
}
@media screen and (max-width: 767px) {
  .ColBox__img {
    width: 100%;
    margin-top: 26px;
    margin-left: 0;
  }
}
.ColBox__img img {
  max-width: 100%;
  height: auto;
}

/* Ticket
-----------------------------------------*/
.Ticket {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media screen and (max-width: 767px) {
  .Ticket {
    display: block;
  }
}
.Ticket__text {
  width: 52%;
}
@media screen and (max-width: 767px) {
  .Ticket__text {
    width: auto;
  }
}
.Ticket__img {
  width: 48%;
  padding-left: 30px;
}
@media screen and (max-width: 767px) {
  .Ticket__img {
    width: auto;
    padding-left: 0;
    margin-top: 47px;
  }
}
.Ticket__img img {
  max-width: 100%;
  height: auto;
}

/* Digital
-----------------------------------------*/
.Digital {
  margin: 30px auto;
  border: 3px solid #CECECE;
}
.Digital__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 26px 64px 26px 40px;
}
@media screen and (max-width: 767px) {
  .Digital__inner {
    display: block;
    padding: 28px 16px;
  }
}
.Digital__text {
  width: 73%;
}
@media screen and (max-width: 767px) {
  .Digital__text {
    width: 100%;
  }
}
.Digital__lead {
  font-size: 24px;
  font-size: 2.4rem;
  font-weight: bold;
  line-height: 1.5;
  margin-bottom: 1em;
}
@media screen and (max-width: 767px) {
  .Digital__lead {
    font-size: 18px;
    font-size: 1.8rem;
    text-align: center;
  }
}
.Digital__detail {
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 1.8;
}
@media screen and (max-width: 767px) {
  .Digital__detail {
    font-size: 14px;
    font-size: 1.4rem;
  }
}
.Digital__img {
  width: 27%;
  padding-left: 54px;
}
@media screen and (max-width: 767px) {
  .Digital__img {
    text-align: center;
    width: auto;
    padding-left: 0;
    margin-top: 20px;
  }
}
.Digital__img img {
  max-width: 100%;
  height: auto;
}

/* Rule
-----------------------------------------*/
.Rule {
  margin-top: 61px;
}
.BgGrey {
  background-color: #f6f6f6;
}
.Rule__inner {
  padding: 148px 0 120px;
}
@media screen and (max-width: 767px) {
  .Rule__inner {
    padding: 100px 0;
  }
}
.Rule__wrapper {
  max-width: 812px;
  margin: 0 auto;
}
@media screen and (max-width: 976px) {
  .Rule__wrapper {
    margin: 0 20px;
  }
}
.Rule__box {
  position: relative;
  background-color: #fff;
  border: 5px solid #004ea1;
  padding: 67px 47px;
}
@media screen and (max-width: 767px) {
  .Rule__box {
    border-top: none;
    padding: 37.5px 19px 40.5px;
  }
}
.Rule__box > .Explain {
  max-width: 640px;
  margin: 0 auto;
}
.Rule__box > *:last-child {
  margin-bottom: 0;
}
.Rule__img {
  text-align: center;
  margin: 36px 0 48px;
}
.Rule__img--col {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}
@media screen and (max-width: 767px) {
  .Rule__img--col {
    display: block;
  }
}
.Rule__img--col li {
  width: 48.5%;
}
@media screen and (max-width: 767px) {
  .Rule__img--col li {
    width: 100%;
  }
}
@media screen and (max-width: 767px) {
  .Rule__img--col li:not(:first-child) {
    margin-top: 20px;
  }
}
.Rule__img img {
  max-width: 100%;
  height: auto;
}

/* Player
-----------------------------------------*/
.BeforeBg, .AfterBg {
  position: relative;
}
.BeforeBg::before,
.AfterBg::after {
  content: '';
  display: inline-block;
  background-repeat: no-repeat;
  background-size: auto;
  width: 246px;
  height: 247px;
  position: absolute;
  z-index: 2;
}
@media screen and (max-width: 976px) {
  .BeforeBg::before,
  .AfterBg::after {
    background-size: contain;
    width: 20vw;
    height: 20vw;
  }
}
@media screen and (max-width: 767px) {
  .BeforeBg::before,
  .AfterBg::after {
    width: 27.5vw;
    height: 27.5vw;
  }
}

.AfterBg--mascot13::after {
  background-image: url(/guide/assets/img/bg_pappiness_13.png);
  background-position: right top;
  bottom: -7.5%;
  right: 48px;
}
@media screen and (max-width: 976px) {
  .AfterBg--mascot13::after {
    bottom: 1%;
    right: 26px;
  }
}
@media screen and (max-width: 767px) {
  .AfterBg--mascot13::after {
    bottom: -4%;
    right: -10px;
  }
}

.AfterBg--mascot01::after {
  background-image: url(/guide/assets/img/bg_pappiness_01.png);
  background-position: right top;
  bottom: -19%;
  right: 41px;
}
@media screen and (max-width: 976px) {
  .AfterBg--mascot01::after {
    bottom: -11%;
    right: 15px;
  }
}
@media screen and (max-width: 767px) {
  .AfterBg--mascot01::after {
    bottom: -22%;
    right: 0;
  }
}

.AfterBg--mascot02::after {
  background-image: url(/guide/assets/img/bg_pappiness_02.png);
  background-position: left top;
  bottom: -10.5%;
  left: 39px;
}
@media screen and (max-width: 976px) {
  .AfterBg--mascot02::after {
    bottom: -6.5%;
    left: 18px;
  }
}
@media screen and (max-width: 767px) {
  .AfterBg--mascot02::after {
    bottom: -11.5%;
    left: -5px;
  }
}

.BeforeBg--mascot03::before {
  background-image: url(/guide/assets/img/bg_pappiness_03.png);
  background-position: left top;
  top: -9%;
  left: 57px;
}
@media screen and (max-width: 976px) {
  .BeforeBg--mascot03::before {
    top: -6%;
    left: 18px;
  }
}
@media screen and (max-width: 767px) {
  .BeforeBg--mascot03::before {
    top: -5%;
    left: -16px;
  }
}

.BeforeBg--mascot04::before {
  background-image: url(/guide/assets/img/bg_pappiness_04.png);
  background-position: right top;
  top: -25%;
  right: 33px;
}
@media screen and (max-width: 976px) {
  .BeforeBg--mascot04::before {
    top: -25%;
    right: 6px;
  }
}
@media screen and (max-width: 767px) {
  .BeforeBg--mascot04::before {
    top: -5%;
    right: 3px;
  }
}

.BeforeBg--mascot05::before {
  background-image: url(/guide/assets/img/bg_pappiness_05.png);
  background-position: left bottom;
  top: 2.7%;
  left: 53px;
}
@media screen and (max-width: 976px) {
  .BeforeBg--mascot05::before {
    top: 4%;
    left: 10px;
  }
}
@media screen and (max-width: 767px) {
  .BeforeBg--mascot05::before {
    top: -2.3%;
    left: 7px;
  }
}

.BeforeBg--mascot06::before {
  background-image: url(/guide/assets/img/bg_pappiness_06.png);
  background-position: right top;
  top: -19%;
  right: 34px;
}
@media screen and (max-width: 976px) {
  .BeforeBg--mascot06::before {
    top: -11%;
    right: 10px;
  }
}
@media screen and (max-width: 767px) {
  .BeforeBg--mascot06::before {
    top: -8%;
  }
}

.BeforeBg--mascot07::before {
  background-image: url(/guide/assets/img/bg_pappiness_07.png);
  background-position: left top;
  top: 0;
  left: 100px;
}
@media screen and (max-width: 976px) {
  .BeforeBg--mascot07::before {
    top: 1.5%;
    left:28px;
  }
}
@media screen and (max-width: 767px) {
  .BeforeBg--mascot07::before {
    top: -7%;
  }
}

.BeforeBg--mascot08::before {
  background-image: url(/guide/assets/img/bg_pappiness_08.png);
  background-position: right top;
  top: -20.5%;
  right: 59px;
}
@media screen and (max-width: 976px) {
  .BeforeBg--mascot08::before {
    top: -10.5%;
    right: 10px;
  }
}
@media screen and (max-width: 767px) {
  .BeforeBg--mascot08::before {
    top: -5%;
  }
}

.BeforeBg--mascot09::before {
  background-image: url(/guide/assets/img/bg_pappiness_09.png);
  background-position: left top;
  top: -7.5%;
  left: 53px;
}
@media screen and (max-width: 976px) {
  .BeforeBg--mascot09::before {
    left: 20px;
  }
}
@media screen and (max-width: 767px) {
  .BeforeBg--mascot09::before {
    top: -7%;
  }
}

.BeforeBg--mascot10::before {
  background-image: url(/guide/assets/img/bg_pappiness_10.png);
  background-position: right top;
  top: -7.6%;
  right: 87px;
}
@media screen and (max-width: 976px) {
  .BeforeBg--mascot10::before {
    right: 10px;
  }
}
@media screen and (max-width: 767px) {
  .BeforeBg--mascot10::before {
    top: -5%
  }
}

.BeforeBg--mascot11::before {
  background-image: url(/guide/assets/img/bg_pappiness_11.png);
  background-position: left top;
  top: -11%;
  left: 39px;
}
@media screen and (max-width: 976px) {
  .BeforeBg--mascot11::before {
    top: -8%;
    left: 20px;
  }
}
@media screen and (max-width: 767px) {
  .BeforeBg--mascot11::before {
    top: -6%;
  }
}

.AfterBg--mascot12::after {
  background-image: url(/guide/assets/img/bg_pappiness_12.png);
  background-position: right top;
  bottom: -1.3%;
  right: -2px;
}
@media screen and (max-width: 976px) {
  .AfterBg--mascot12::after {
    bottom: -1%;
    right: -10px;
  }
}
@media screen and (max-width: 767px) {
  .AfterBg--mascot12::after {
    bottom: -2.7%;
    right: 4px;
  }
}