/* ------------------------------------------------
 intro
------------------------------------------------ */
#intro > .inner {
  background: url(../images/top/intro_bg.png) no-repeat;
  background-size: contain;
  min-height: 28.4em;
}
#intro > .inner .ribbon {
  background-repeat: no-repeat;
  background-size: contain;
  width: 100%;
  height: 28.4333333333em;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  pointer-events: none;
}
#intro > .inner .ribbon.js-anime-start {
  background-image: url(../images/top/intro_ribbon_anim.png);
  opacity: 1;
}
#intro > .inner > * {
  position: relative;
  z-index: 1;
}
#intro .title {
  margin: 0 auto;
  padding-top: 3em;
  width: 20.5333333333em;
}
#intro .presents {
  margin: 0.9333333333em auto 0;
  display: flex;
  justify-content: center;
  -moz-column-gap: 0.5333333333em;
       column-gap: 0.5333333333em;
}
#intro .presents li {
  width: 7.3333333333em;
}
#intro nav {
  margin-top: 0.7333333333em;
}
#intro nav .btn {
  margin: 0 auto;
  width: 23.2333333333em;
  display: block;
}
#intro nav .btn.soon {
  margin-top: -0.5666666667em;
}

/* ------------------------------------------------
 history
------------------------------------------------ */
#history .sheader {
  padding-top: 1.6666666667em;
  position: relative;
}
#history .sheader .title {
  margin: 0 auto;
  width: 22.6666666667em;
}
#history .sheader .chara0 {
  width: 5.2666666667em;
  position: absolute;
  top: 0;
  left: 3.6em;
}
#history .sbody .content {
  margin-top: 1.2em;
  position: relative;
}
#history .sbody .content .chara1, #history .sbody .content .chara2 {
  position: absolute;
}
#history .sbody .content .chara1 {
  width: 4.5666666667em;
  top: 4.5em;
  left: 19.7333333333em;
}
#history .sbody .content .chara2 {
  width: 4.3333333333em;
  top: 15.7333333333em;
  left: 2.2em;
}
#history .sbody .content .txt {
  font-size: 1.0666666667em;
  font-weight: bold;
  text-align: center;
  letter-spacing: normal;
  line-height: 1.7;
}
#history .sbody .content .note {
  letter-spacing: normal;
  margin: 1.1111111111em 10em 0 12.2222222222em;
}
#history .history {
  background: url(../images/top/history_bg.png) 0 4em no-repeat;
  background-size: 100% auto;
  margin-top: 2.8333333333em;
  min-height: 52.0333333333em;
}
#history .history .package {
  display: flex;
  justify-content: center;
  -moz-column-gap: 1.1em;
       column-gap: 1.1em;
}
#history .history .package .img {
  width: 6.1666666667em;
}
#history .history .timeline {
  margin-top: 1.9333333333em;
  height: 36.6666666667em;
  position: relative;
}
#history .history .timeline .y {
  width: 12.3333333333em;
  position: absolute;
}
#history .history .timeline .y:nth-child(odd) {
  left: 1em;
}
#history .history .timeline .y:nth-child(even) {
  right: 1em;
}
#history .history .timeline .y.y2000 {
  top: 4.1666666667em;
}
#history .history .timeline .y.y2014 {
  top: 8.3333333333em;
}
#history .history .timeline .y.y2016 {
  top: 15.8em;
}
#history .history .timeline .y.y2024 {
  top: 24.1666666667em;
}
#history .history .timeline .y.y2025 {
  top: 26.3333333333em;
}
#history .history .note {
  color: #185a44;
  letter-spacing: normal;
  background-color: rgba(255, 255, 255, 0.7);
  margin: 1.1111111111em auto 0;
  padding: 1.1111111111em;
  padding-left: 2.1111111111em;
  width: 34.4444444444em;
}

/* ------------------------------------------------
 campaign
------------------------------------------------ */
#campaign > .inner {
  padding-bottom: 2em;
}
#campaign .sheader {
  background: url(../images/top/cpn_header_bg.png) no-repeat;
  background-size: 100% auto;
  padding-top: 5.4em;
  min-height: 25.5em;
}
#campaign .sheader .ribbon {
  background-repeat: no-repeat;
  background-size: contain;
  width: 100%;
  height: 24.8em;
  position: absolute;
  left: 0;
  top: 0.3333333333em;
  z-index: 1;
  pointer-events: none;
}
#campaign .sheader .ribbon.js-anime-start {
  background-image: url(../images/top/cpn_ribbon_anim.png);
  opacity: 1;
}
#campaign .sheader::before {
  background: url(../images/top/cpn_ribbon_anim.png) no-repeat;
  background-size: contain;
  width: 100%;
  height: 24.8em;
  position: absolute;
  left: 0;
  top: 0.3333333333em;
  z-index: 1;
  pointer-events: none;
}
#campaign .sheader > * {
  position: relative;
  z-index: 2;
}
#campaign .sheader .title {
  margin: 0 auto;
  width: 22.4666666667em;
}
#campaign .sheader .timeline {
  margin: 0.6em auto 0;
  width: 21.6666666667em;
}
#campaign .sbody .prize + .prize {
  margin-top: 0.1333333333em;
}
#campaign .sbody .note {
  font-weight: normal;
  text-align: center;
  margin-top: 1em;
}

/* ------------------------------------------------
 howto
------------------------------------------------ */
#howto > .inner {
  background: url(../images/top/howto_bg.png) no-repeat;
  background-size: 100% auto;
  padding-top: 2.0666666667em;
  min-height: 75.0666666667em;
}
#howto .sheader {
  padding-top: 1.6666666667em;
}
#howto .sheader .title {
  margin: 0 auto;
  width: 20em;
}
#howto .sbody .chara {
  margin-top: 1.5em;
  margin-left: 1.3333333333em;
  width: 22em;
  position: relative;
}
#howto .sbody .step {
  margin-left: 1.1666666667em;
  width: 22.6666666667em;
  position: relative;
}
#howto .sbody .step.s1 {
  margin-top: -2.1333333333em;
}
#howto .sbody .step.s3 {
  width: 23.2em;
}
#howto .sbody .step + .step {
  margin-top: -1em;
}
#howto .sbody .step .btn {
  width: 18.0666666667em;
  position: absolute;
  top: 13.3333333333em;
  left: 3.4666666667em;
}
#howto .sbody .step .btn.soon {
  top: 12.8em;
}
#howto aside {
  margin-top: 1.6666666667em;
}
#howto aside .btn {
  margin: 0 auto;
  width: 11.3666666667em;
  display: block;
}