/*	keyframes
============================== */
@-webkit-keyframes tada {
  0% {
    -webkit-transform: scale(1);
  }

  10%, 20% {
    -webkit-transform: scale(0.9) rotate(-3deg);
  }

  30%, 50%, 70%, 90% {
    -webkit-transform: scale(1.2) rotate(3deg);
  }

  40%, 60%, 80% {
    -webkit-transform: scale(1.2) rotate(-3deg);
  }

  100% {
    -webkit-transform: scale(1) rotate(0);
  }
}

@keyframes tada {
  0% {
    transform: scale(1);
  }

  10%, 20% {
    transform: scale(0.9) rotate(-3deg);
  }

  30%, 50%, 70%, 90% {
    transform: scale(1.2) rotate(3deg);
  }

  40%, 60%, 80% {
    transform: scale(1.2) rotate(-3deg);
  }

  100% {
    transform: scale(1) rotate(0);
  }
}

@keyframes rumble {
  0% {
    transform: translate(0, 0) rotate(0);
  }

  16.66% {
    transform: translate(2px, -2px) rotate(-5deg);
  }

  33.32% {
    transform: translate(2px, 2px) rotate(5deg);
  }

  49.98% {
    transform: translate(0, 0) rotate(0);
  }

  66.64% {
    transform: translate(-2px, -2px) rotate(5deg);
  }

  83.30% {
    transform: translate(-2px, 2px) rotate(-5deg);
  }

  100% {
    transform: translate(0, 0) rotate(0);
  }
}

/*	main
============================== */
main {
  text-align: left;
  color: #681f00;
  background-color: #fdefc2;
}

@media all and (max-width: 767px) {
  main {
    margin: 0 3.125vw;
  }
}

/*	.header
============================== */
header.header {}

header.header>h1 span {
  display: block;
}

header.header>h1>span {
  position: relative;
  height: 0;
  padding-top: -webkit-calc(674 / 1200 * 100%);
  padding-top: calc(674 / 1200 * 100%);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

header.header>h1>span.lazy-done {
  -webkit-animation: fadeIn 800ms;
  animation: fadeIn 800ms;
}

header.header>h1>span>span {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  text-indent: 110%;
  white-space: nowrap;
  overflow: hidden;
}

/*	.menu
============================== */
nav.menu-3 {
  background-color: #e26834;
}

nav.menu-3 ul {
  display: flex;
  justify-content: center;
}

nav.menu-3 ul li a {
  display: block;
  background-color: #ffc23e;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  box-shadow: 3px 4px #bd5224;
  text-indent: 110%;
  white-space: nowrap;
  overflow: hidden;
}

nav.menu-3 ul li:nth-child(1) a {
  background-image: url(../img/campaign/nav_kakurenbo.png);
  background-size: 100%;
}

nav.menu-3 ul li:nth-child(2) a {
  background-image: url(../img/campaign/nav_howto.png);
}

nav.menu-3 ul li:nth-child(3) a {
  background-image: url(../img/campaign/nav_mention.png);
}

nav.menu-3 ul li:nth-child(4) a {
  background-image: url(../img/campaign/nav_kotae.png);
}

@media all and (min-width: 768px) {
  nav.menu-3 {
    padding: 22px;
  }

  nav.menu-3 ul li {
    width: -webkit-calc((100% - 2*22px)/3);
    width: calc((100% - 2*22px)/3);
  }

  nav.menu-3 ul li:not(:last-child) {
    margin-right: 22px;
  }

  nav.menu-3 ul li a {
    height: 80px;
    border-radius: 24px;
  }
}

@media all and (max-width: 767px) {
  nav.menu-3 {
    padding: 20px 6.25vw;
  }

  nav.menu-3 ul {
    flex-wrap: wrap;
    ;
  }

  nav.menu-3 ul li:first-child,
  nav.menu-3 ul li:last-child {
    width: 100%;
  }

  nav.menu-3 ul li:first-child {
    margin-bottom: 10px;
  }

  nav.menu-3 ul li:nth-child(2), nav.menu-3 ul li:nth-child(3) {
    width: -webkit-calc((100% - 12px)/2);
    width: calc((100% - 12px)/2);
  }

  nav.menu-3 ul li:nth-child(2) {
    margin-right: 12px;
    margin-bottom: 10px;
  }

  nav.menu-3 ul li a {
    height: 50px;
    border-radius: 12px;
  }

  nav.menu-3 ul li:nth-child(1) a,
  nav.menu-3 ul li:nth-child(4) a {
    background-size: contain;
  }
}

/*	.info
============================== */
div.info {
  background-image: url(../img/campaign/info_copy_bg.png);
  background-repeat: no-repeat;
  background-position: center top;
}

@media all and (min-width: 768px) {
  div.info {
    padding: 52px;
    background-size: 60%;
  }
}

@media all and (max-width: 767px) {
  div.info {
    padding: 26px 3.125vw;
    background-size: contain;
  }
}

div.img-lion {
  animation: rumble 3s linear infinite;
}

div.img-lion span,
div.img-lion span img {
  display: block;
}

div.img-lion span {
  position: relative;
  height: 0;
  padding-top: -webkit-calc(275 / 299 * 100%);
  padding-top: calc(275 / 299 * 100%);
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}

div.img-lion span.lazy-done {
  -webkit-animation: tada 800ms !important;
  animation: tada 800ms !important;
}

div.img-lion span img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

@media all and (min-width: 768px) {
  div.img-lion {
    width: 160px;
    margin: 0 auto;
    padding: 40px 0;
  }
}

@media all and (max-width: 767px) {
  div.img-lion {
    width: 34vw;
    margin: 0 auto;
    padding: 20px 0;
  }
}

div.copy>p {
  position: relative;
  height: 0;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}

div.copy>p>span {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  text-indent: 110%;
  white-space: nowrap;
  overflow: hidden;
}

@media all and (min-width: 768px) {
  div.copy {
    margin-bottom: 52px;
  }

  div.copy>p.copy1 {
    background-image: url(../img/campaign/info_copy_pc_1.png?0);
    padding-top: -webkit-calc(310 / 1850 * 100%);
    padding-top: calc(310 / 1850 * 100%);
  }

  div.copy>p.copy2 {
    background-image: url(../img/campaign/info_copy_pc_2.png?0);
    padding-top: -webkit-calc(290 / 1850 * 100%);
    padding-top: calc(290 / 1850 * 100%);
  }
}

@media all and (max-width: 767px) {
  div.copy {
    margin-bottom: 26px;
  }

  div.copy>p.copy1 {
    background-image: url(../img/campaign/info_copy_smp_1.png?0);
    padding-top: -webkit-calc(236 / 704 * 100%);
    padding-top: calc(236 / 704 * 100%);
  }

  div.copy>p.copy2 {
    background-image: url(../img/campaign/info_copy_smp_2.png?0);
    padding-top: -webkit-calc(434 / 704 * 100%);
    padding-top: calc(434 / 704 * 100%);
  }
}

div.info section div.info-inner {
  position: relative;
  height: 0;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}

div.info section div.info-inner dl {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

@media all and (min-width: 768px) {
  div.info section div.info-outer {
    margin-bottom: 40px;
  }

  div.info section div.info-inner {
    background-image: url(../img/campaign/info_pc.png?0);
    padding-top: -webkit-calc(776 / 1885 * 100%);
    padding-top: calc(776 / 1885 * 100%);
  }
}

@media all and (max-width: 767px) {
  div.info section div.info-outer {
    padding: 0 15.625vw 26px;
  }

  div.info section div.info-inner {
    background-image: url(../img/campaign/info_smp.png?0);
    padding-top: -webkit-calc(1977 / 537 * 100%);
    padding-top: calc(1977 / 537 * 100%);
  }
}

/*	.info .shop-info
============================== */
div.shop-info {
  background-color: #fef8e1;
}

div.shop-info h3,
div.shop-info p {
  line-height: 1.5;
}

div.shop-info>p {
  margin-bottom: 1.5em;
}

div.shop-info>section h3 {
  color: #cc0202;
  text-align: center;
  margin-bottom: 0.5em;
}

@media all and (min-width: 768px) {
  div.shop-info {
    padding: 40px;
    border-radius: 24px;
  }

  div.shop-info>section:not(:last-child) {
    margin-bottom: 40px;
  }

  div.shop-info>section h3 {
    font-size: 150%;
  }

  div.shop-info p {
    font-size: 112.5%;
  }
}

@media all and (max-width: 767px) {
  div.shop-info {
    padding: 16px;
    border-radius: 12px;
  }

  div.shop-info>section:not(:last-child) {
    margin-bottom: 20px;
  }

  div.shop-info>section h3 {
    font-size: 112.5%;
  }

  div.shop-info p {
    font-size: 87.5%;
  }
}

/*	.howto
============================== */
div.howto section:before {
  content: "";
  display: block;
  width: 100%;
  background-color: #fff;
}

div.howto:before,
div.howto:after {
  content: "";
  display: block;
  width: 100%;
}

div.howto:before {
  border-top: 8px solid #fff;
}

div.howto:after {
  border-bottom: 8px solid #fff;
}

div.howto {
  border-top: 2px solid #e57746;
  border-bottom: 2px solid #e57746;
  background-color: #fef4d4;
}

div.howto section h2 {
  margin: 0 auto;
}

div.howto section h2 span {
  display: block;
}

div.howto section h2>span {
  background-image: url(../img/campaign/h2_howto.png);
  position: relative;
  height: 0;
  padding-top: -webkit-calc(198 / 808 * 100%);
  padding-top: calc(198 / 808 * 100%);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

div.howto section h2>span span {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  text-indent: 110%;
  white-space: nowrap;
  overflow: hidden;
}

div.howto section div.steps-inner dl dd a,
div.howto section div.steps-inner dl dd span {
  display: block;
  text-indent: 110%;
  white-space: nowrap;
  overflow: hidden;
}

@media all and (min-width: 768px) {
  div.howto {
    background-image: repeating-linear-gradient(90deg, transparent, transparent 8px, #fdefc2 8px, #fdefc2 16px);
  }

  div.howto section {
    padding: 60px 0;
  }

  div.howto section h2 {
    width: 404px;
    margin-bottom: 60px;
  }

  div.howto section div.steps-outer {
    padding: 0 52px;
  }

  div.howto section div.steps-inner {
    background-image: url(../img/campaign/howto_pc.png);
    position: relative;
    height: 0;
    padding-top: -webkit-calc(677 / 1879 * 100%);
    padding-top: calc(677 / 1879 * 100%);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
  }

  div.howto section div.steps-inner dl {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }

  div.howto section div.steps-inner dl dd:not(.complete) {
    position: absolute;
    top: -webkit-calc((492*100)/677*1%);
    top: calc((492*100)/677*1%);
    width: -webkit-calc((426*100)/1879*1%);
    width: calc((426*100)/1879*1%);
    height: -webkit-calc((123*100)/677*1%);
    height: calc((123*100)/677*1%);
  }

  div.howto section div.steps-inner dl dd.follow {
    left: -webkit-calc((72*100)/1879*1%);
    left: calc((72*100)/1879*1%);
  }

  div.howto section div.steps-inner dl dd.post {
    left: -webkit-calc((726*100)/1879*1%);
    left: calc((726*100)/1879*1%);
  }

  div.howto section div.steps-inner dl dd:not(.complete) a {
    display: block;
    width: 100%;
    height: 100%;
  }

  div.howto section div.steps-inner dl dd:not(.complete) a:hover {
    background-color: hsla(41, 100%, 62%, 0.25);
  }
}

@media all and (max-width: 767px) {
  div.howto {
    background-image: repeating-linear-gradient(90deg, transparent, transparent 7px, #fdefc2 7px, #fdefc2 14px);
    position: relative;
  }

  div.howto section {
    padding: 30px 0;
  }

  div.howto section h2 {
    width: 50vw;
    margin-bottom: 30px;
  }

  div.howto section div.steps-inner {
    padding: 0 12.5vw;
  }

  div.howto section div.steps-inner dl dd {
    background-image: url(../img/campaign/howto_smp_step1.png);
    position: relative;
    height: 0;
    padding-top: -webkit-calc(438 / 460 * 100%);
    padding-top: calc(438 / 460 * 100%);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
  }

  div.howto section div.steps-inner dl dd.follow {
    background-image: url(../img/campaign/howto_smp_step1.png);
    padding-top: -webkit-calc(438 / 460 * 100%);
    padding-top: calc(438 / 460 * 100%);
  }

  div.howto section div.steps-inner dl dd.post {
    background-image: url(../img/campaign/howto_smp_step2.png);
    padding-top: -webkit-calc(524 / 460 * 100%);
    padding-top: calc(524 / 460 * 100%);
  }

  div.howto section div.steps-inner dl dd.follow,
  div.howto section div.steps-inner dl dd.post {
    margin-bottom: 20px;
  }

  div.howto section div.steps-inner dl dd.complete {
    background-image: url(../img/campaign/howto_smp_step3.png);
    padding-top: -webkit-calc(479 / 460 * 100%);
    padding-top: calc(479 / 460 * 100%);
  }

  div.howto section div.steps-inner dl dd a,
  div.howto section div.steps-inner dl dd span {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }
}

/*	.mention
============================== */
section.mention {}

section.mention h2 {
  background-image: url(../img/campaign/h2_mention.png);
  background-size: contain;
  background-repeat: no-repeat;
  margin: 0 auto;
  text-indent: 110%;
  white-space: nowrap;
  overflow: hidden;
}

section.mention h2.kotae {
  background-image: url(../img/campaign/h2_kotae.png);
}

section.mention ul {
  list-style-type: disc;
  margin-left: 1.25em;
}

section.mention ul li {
  line-height: 1.5;
}

section.mention ul li:not(:last-child) {
  margin-bottom: 0.5em;
}

@media all and (min-width: 768px) {
  section.mention {
    padding: 52px;
  }

  section.mention h2 {
    width: 155px;
    height: 50px;
    margin-bottom: 32px;
  }

  section.mention h2.kotae {
    width: 404px;
    height: 99px;
    margin-bottom: 32px;
  }

  section.mention ul li {
    font-size: 112.5%;
  }
}

@media all and (max-width: 767px) {
  section.mention {
    padding: 26px 6.25vw;
  }

  section.mention h2 {
    width: 99px;
    height: 32px;
    margin-bottom: 16px;
  }

  section.mention h2.kotae {
    width: 187px;
    height: 46px;
    margin-bottom: 16px;
  }

  section.mention ul li {
    font-size: 87.5%;
  }
}

/*	komenumlist list
============================== */
.komenumlist {
  counter-reset: number;
  list-style-type: none !important;/ padding: 0.5em;
}

.komenumlist li {
  text-align: justify;
  position: relative;
  padding-left: 30px;
  line-height: 1.7em;
  padding: 0.5em 0.5em 0.5em 33px;
}

.komenumlist li:before {
  position: absolute;
  counter-increment: number;
  content: '※'counter(number);
  display: inline-block;
  /* background: #dd5771; */
  /* color: white; */
  font-family: 'Avenir', 'Arial Black', 'Arial', sans-serif;
  font-weight: bold;
  font-size: 15px;
  border-radius: 50%;
  left: 0;
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  top: 0;
  -webkit-transform: translateY(0.7em);
  transform: translateY(0.7em);
}

div.info-outer div.info-inner dd.event a {
  display: block;
  text-indent: 110%;
  white-space: nowrap;
  overflow: hidden;
}

@media all and (min-width: 768px) {
  div.info-outer div.info-inner dd.event {
    left: -webkit-calc((72*100)/1879*1%);
    left: calc((1354*100)/1885*1%);
  }

  div.info-outer div.info-inner dd.event {
    position: absolute;
    top: -webkit-calc((492*100)/677*1%);
    top: calc((465*100)/776*1%);
    width: -webkit-calc((426*100)/1879*1%);
    width: calc((488*100)/1885*1%);
    height: -webkit-calc((123*100)/677*1%);
    height: calc((106*100)/776*1%);
    border-radius: 50px;
  }

  div.info-outer div.info-inner dd.event a {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50px;
  }

  div.info-outer div.info-inner dd.event a:hover {
    background-color: hsla(41, 100%, 62%, 0.25);
  }
}

@media all and (max-width: 767px) {
  div.info-outer div.info-inner dd.event {
    position: relative;
    height: 0;
    padding-top: -webkit-calc(438 / 460 * 100%);
    padding-top: calc(583 / 460 * 100%);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
  }

  div.info-outer div.info-inner dd.event {
    padding-top: -webkit-calc(583 / 460 * 100%);
    padding-top: calc(583 / 460 * 100%);
    margin-top: calc(1977 / 819 * 100%);
  }

  div.info-outer div.info-inner dd.event a {
    position: absolute;
    left: 0;
    top: 0px;
    width: 100%;
    height: 100%;
  }
}

.kasaneru5 {
  position: relative;
  margin: 2rem auto;
}

.kasaneru5 p.end {
  position: absolute;
  z-index: 1;
  font-size: 2.2rem;
  color: #FFF;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  text-align: center;
  font-weight: bold;
  line-height: 1.5;
}

.overtext::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.6);
}

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

  .kasaneru5 p.end {
    font-size: 1.5rem;
    line-height: 2;
  }
}

/*	pic size
============================== */
@media all and (min-width: 768px) {
  .kotae1, .kotae1 span {
    width: 900px;
    height: 417px;
  }

  .kotae2, .kotae2 span {
    width: 900px;
    height: 882px;
  }

  .kotae10, .kotae10 span {
    width: 700px;
    height: 50px;
    box-shadow: none;
    background-color: inherit;
  }
}

@media all and (max-width: 767px) {
  .kotae1 span {
    padding-top: calc((417 / 900)*100%);
  }

  .kotae2 span {
    padding-top: calc((882 / 900)*100%);
  }

  .kotae10smp span {
    padding-top: calc((253 / 900)*100%);
    background-repeat: no-repeat;
  }

  .kotae10smp {
    box-shadow: none;
    background-color: inherit;
    width: 80%;
    margin: 0 auto;
  }
}