/*** BASE ***/
html, body {
  overflow-x: hidden;
  width: 100%
}
html {
  background: #a2d9ac;
  font: 400 1.207vw / 1 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'メイリオ', Osaka, 'MS PGothic', sans-serif
}
@media (min-width: 829px) {
  html {
    font-size: 62.5%
  }
}
body {
  color: #6c4741;
  font-size: 3rem;
  -webkit-text-size-adjust: 100%
}
@media (min-width: 829px) {
  body {
    font-size: 1.8rem;
    margin: 0 auto;
    max-width: 1920px
  }
}
main {
  overflow: hidden;
  position: relative
}
a, img {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}
a {
  color: inherit
}
img {
  display: block;
  width: 100%
}
button {
  background: transparent
}
.br {
  display: block
}
@media (min-width: 829px) {
  .br {
    display: none
  }
}
.pink {
  color: #dd4b86
}
.underline {
  text-decoration: underline;
}
.link-white-border {
  border-bottom: 1px solid #ffffff;
  color: #ffffff;
  text-decoration: none
}
.svgPath {
  position: absolute
}

/*** LOADING ***/
#loading {
  height: 100vh;
  pointer-events: none;
  position: fixed;
  width: 100vw;
  z-index: 9999
}
@media (min-width: 829px) {
  #loading {
    left: 50%;
    transform: translateX(-50%);
    width: 829px
  }
}
.loading-chara {
  animation: fade_in_out 5s ease-in-out forwards,
             down_up 5s ease-in forwards;
  bottom: -4rem;
  left: 30%;
  position: absolute;
  transform-origin: center top 0;
  width: 38rem
}
.loading-baloon-blue01 {
  animation: fade_in_out 3.6s ease-in-out forwards,
             down_up 3.6s ease-in forwards;
  bottom: 11rem;
  left: 10rem;
  position: absolute;
  transform-origin: center top 0;
  width: 32rem
}
.loading-baloon-blue02 {
  animation: fade_in_out 5s ease-in-out forwards,
             down_up 5.4s ease-in forwards;
  left: 58rem;
  bottom: -2rem;
  position: absolute;
  transform-origin: center top 0;
  width: 26rem
}
.loading-baloon-pink01 {
  animation: fade_in_out 4s ease-in-out forwards,
             down_up 4s ease-in forwards;
  bottom: 26rem;
  left: 0;
  position: absolute;
  transform-origin: center top 0;
  width: 23rem
}
.loading-baloon-pink02 {
  animation: fade_in_out 4s ease-in-out forwards,
             down_up 4s ease-in forwards;
  bottom: -24rem;
  left: 38rem;
  position: absolute;
  transform-origin: center top 0;
  width: 23rem
}
.loading-baloon-yellow01 {
  animation: fade_in_out 4.6s ease-in-out forwards,
             down_up 4.6s ease-in forwards;
  bottom: 10rem;
  left: 2rem;
  position: absolute;
  transform-origin: center top 0;
  width: 18rem
}
.loading-baloon-blue-blur01 {
  animation: fade_in_out 2s ease-in-out forwards,
             down_up 2s ease-in forwards;
  left: -18rem;
  position: absolute;
  transform-origin: center top 0;
  width: 54rem
}
@media (min-width: 829px) {
  .loading-baloon-blue-blur01 {
    left: -32rem
  }
}
.loading-baloon-pink-blur01 {
  animation: fade_in_out 2.3s ease-in-out,
             down_up 2s ease-in forwards;
  bottom: -46rem;
  left: 53rem;
  position: absolute;
  transform-origin: center top 0;
  width: 54rem
}
@media (min-width: 829px) {
  .loading-baloon-pink-blur01 {
    left: 71rem
  }
}
.loading-baloon-yellow-blur01 {
  animation: fade_in_out 2.2s ease-in-out forwards,
             down_up 2.2s ease-in forwards;
  bottom: -100rem;
  left: 45rem;
  position: absolute;
  transform-origin: center top 0;
  width: 54rem
}
@media (min-width: 829px) {
  .loading-baloon-yellow-blur01 {
    left: 63rem
  }
}
@keyframes down_up {
  100% { transform: translateY(-150vh) }
}
@keyframes fade_in_out {
    0% { opacity: 0 }
   15% { opacity: 1 }
   90% { opacity: 1 }
  100% { opacity: 0 }
}

/*** SCROLL ANIMATION ***/
.target {
  opacity: 0;
  transform: translateY(20%);
  transition: opacity 1s, transform 1s
}
.target+img {
  opacity: 0;
  transform: translateY(5%);
  transition: opacity 1s .3s, transform 1s .3s
}
.target.anm, .target.anm+img {
  opacity: 1;
  transform: none
}

/*** HERO ***/
.hero-logo-upper, .hero-logo, .hero-logo-lower,
.hero-character01, .hero-character02, .hero-character03, .hero-character04, .hero-character05, .hero-character06, .hero-character07 {
  animation: fade_in 2s ease-in forwards;
  opacity: 0
}
@keyframes fade_in {
  0% { opacity: 0 }
100% { opacity: 1 }
}
#hero {
  background: url("../img/hero-bg-sky.jpg") no-repeat 50% 0/auto 100%;
  background-size: cover;
  height: 82rem;
  margin-bottom: 15rem;
  position: relative
}
@media (min-width: 829px) {
  #hero {
    height: 62rem;
    margin-bottom: 8rem
  }
}
.hero-inner {
  height: 100%;
  margin: 0 auto 8rem;
  position: relative
}
@media (min-width: 829px) {
  .hero-inner {
    width: 75.5rem
  }
}
.hero-inner::before {
  background: url("../img/hero-bg-ground.png") no-repeat;
  background-position: bottom;
  background-size: contain;
  bottom: -15rem;
  content: "";
  display: block;
  height: 82rem;
  position: relative
}
@media (min-width: 829px) {
  .hero-inner::before {
    background: url("../img/hero-bg-ground-pc.png") no-repeat 50% 0/auto;
    background-position: bottom;
    content: "";
    display: block;
    height: 62rem;
    margin: 0 calc(50% - 50vw);
    padding: 4px calc(50vw - 50% + 8px);
    position: relative
  }
}
@media (min-width: 829px) {
  .hero-wrap {
    width: 829px
  } 
}
.hero-bi {
  left: 3.5rem;
  opacity: 1;
  position: absolute;
  top: 3rem;
  width: 28.7rem;
  z-index: 10
}
@media (min-width: 829px) {
  .hero-bi {
    left: -2.4rem;
    width: 25.1rem
  }
}
.hero-logo-upper {
  opacity: 1;
  position: absolute;
  right: 4.5rem;
  top: 5.5rem;
  width: 32rem;
  z-index: 9
}
@media (min-width: 829px) {
  .hero-logo-upper {
    right: 8rem;
    top: 7rem;
    width: 23rem
  }
}
.hero-logo {
  left: 50%;
  opacity: 1;
  position: absolute;
  top: 13rem;
  transform: translateX(-50%);
  width: 63.5rem;
  z-index: 2
}
@media (min-width: 829px) {
  .hero-logo {
    top: 12rem;
    width: 54rem
  }
}
.hero-logo-lower {
  left: 50%;
  opacity: 1;
  position: absolute;
  top: 38rem;
  transform: translateX(-50%);
  width: 50rem;
  z-index: 9
}
@media (min-width: 829px) {
  .hero-logo-lower {
    top: 32rem;
    width: 39rem
  }
}
.hero-character01 {
  animation-delay: 0;
  left: 5rem;
  opacity: 1;
  position: absolute;
  top: 33rem;
  width: 10rem;
  z-index: 1
}
@media (min-width: 829px) {
  .hero-character01 {
    left: -3rem;
    top: 33rem;
    width: 5.4rem
  }
}
.hero-character02 {
  left: 18rem;
  opacity: 1;
  position: absolute;
  top: 44rem;
  width: 11rem;
  z-index: 1
}
@media (min-width: 829px) {
  .hero-character02 {
    left: 3.3rem;
    top: 41.7rem;
    width: 6rem
  }
}
.hero-character03 {
  left: 38rem;
  opacity: 1;
  position: absolute;
  top: 43rem;
  width: 15rem;
  z-index: 1
}
@media (min-width: 829px) {
  .hero-character03 {
    left: 3rem;
    transform: scale(-1, 1);
    top: 26rem;
    width: 10rem
  }
}
.hero-character04 {
  bottom: -3rem;
  left: 9rem;
  opacity: 1;
  position: absolute;
  width: 36rem;
  z-index: 3
}
@media (min-width: 829px) {
  .hero-character04 {
    bottom: 5rem;
    left: 14rem;
    width: 26rem
  }
}
.hero-character05 {
  bottom: 3rem;
  opacity: 1;
  position: absolute;
  right: 17rem;
  width: 24rem;
  z-index: 2
}
@media (min-width: 829px) {
  .hero-character05 {
    bottom: 8rem;
    right: 18rem;
    width: 17.2rem
  }
}
.hero-character06 {
  right: 4rem;
  opacity: 1;
  position: absolute;
  bottom: 15rem;
  width: 16rem;
  z-index: 1
}
@media (min-width: 829px) {
  .hero-character06 {
    right: 0;
    bottom: 15rem;
    width: 11.6rem
  }
}
.hero-character07 {
  visibility: hidden;
}
@media (min-width: 829px) {
  .hero-character07 {
    visibility: visible;
    opacity: 1;
    right: -4rem;
    position: absolute;
    top: 27rem;
    width: 5.4rem;
    z-index: 1
  }
}

/*** SCROLL TOP ICON ***/
#scroll-top {
  bottom: 20rem;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  right: 1rem;
  transition: all 1s ease;
  width: 10rem;
  z-index: 10
}
@media (min-width: 829px) {
  #scroll-top {
    right: 5rem;
    width: 9rem
  }
}
#scroll-top.is-active {
  opacity: 1;
  pointer-events: auto
}

/*** SCROLL DOWN ICON ***/
.scroll-down {
  margin: 0 auto;
  position: relative;
  width: 75rem
}
@media (min-width: 829px) {
  .scroll-down {
    width: 100%
  }
}
.scroll-down img {
  bottom: 1rem;
  position: absolute;
  right: -1rem;
  width: 2.3rem
}
@media (min-width: 829px) {
  .scroll-down img {
    bottom: 38rem;
    right: 2rem
  }
}

/*** SIDE CHARACTER (PC) ***/
.leftside-character {
  margin: 0 auto;
  position: relative;
  width: 26rem;
  z-index: 10
}
.leftside-character img {
  position: absolute;
  right: 55rem;
  width: 100%
}
.rightside-character {
  margin: 0 auto;
  position: relative;
  width: 26rem;
  z-index: 9
}
.rightside-character img {
  position: absolute;
  left: 55rem;
  width: 100%
}
.woodrock {
  bottom: 5rem
}
.gaurio {
  bottom: -16rem
}
.ennou {
  bottom: 15rem
}
.ugauga {
  bottom: 19rem
}
.komodoran {
  bottom: -7rem
}

/*** FESTIVAL(COMMON) ***/
#fes01 {
  padding-bottom: 4rem
}
#howto, #fes02, #fes03, #notice {
  padding-bottom: 12rem
}
#fes02, #notice  {
  background-color: #88c693
}
#fes02::before, #notice::before {
  background: url("../img/bg-wave-top-sp.png") no-repeat 0 0/100% 100%;
  top: -3.5rem;
  content: '';
  display: block;
  height: 4rem;
  left: 0;
  position: relative;
  width: 100%
}
#fes03::before, #footer::before {
  background: url("../img/bg-wave-bottom-sp.png") no-repeat 0 0/100% 100%;
  content: '';
  display: block;
  height: 4rem;
  width: 100%
}
.fes-title {
  margin: 6rem auto 4rem;
  width: 75.5rem
}
@media (min-width: 829px) {
  .fes-title {
    margin: 6rem auto 2.6rem;
    width: 61.2rem
  }
}
.fes-box-wrap {
  border: 6px solid #857568;
  border-radius: 17px;
  box-shadow: 0 0 7px rgba(0, 0, 0, 0.5);
  margin: 0 auto 0;
  width: 75rem
}
@media (min-width: 829px) {
  .fes-box-wrap {
    width: 56.4rem
  }
}
.fes-p {
  font-size: 3.4rem;
  line-height: 1.353;
  margin: 3rem auto;
  text-align: center
}
@media (min-width: 829px) {
  .fes-p {
    font-size: 2.4rem
  }
}
.fes-img {
  margin: 2.2rem auto 0;
  position: relative;
  width: 56.3rem
}
@media (min-width: 829px) {
  .fes-img {
    margin-top: 3.8rem;
    width: 40.9rem
  }
}

/*** FESTIVAL GAME ***/
.fes-title:nth-child(1), #game-wrap {
  animation: fade_in 2s ease-in-out forwards;
  opacity: 0
}
@media (min-width: 829px) {
  #fes01{
    margin-top: -8rem;
    position: relative
  }
}
.game-text {
  margin: 0 auto;
  padding-bottom: 2rem;
  width: 70rem
}
@media (min-width: 829px) {
  .game-text {
    width: 52rem
  }
}
#game-wrap {
  height: 45rem;
  position: relative
}
@media (min-width: 829px) {
  #game-wrap {
    height: 33.8rem;
    position: relative
  }
}
#game-playing {
  left: 0;
  opacity: 0;
  position: absolute;
  top: -3px
}
#game-playing>img {
  border-radius: 12px
}
#game-start {
  background: url("../img/box-game.png")  no-repeat 0 0/100% 100%;
  height: 100%;
  left: 0;
  opacity: 1;
  position: absolute;
  top: 0;
  width: 100%
}
.game-start-text {
  left: 50%;
  position: absolute;
  top: 1rem;
  transform: translateX(-50%);
  width: 52rem
}
@media (min-width: 829px) {
  .game-start-text {
    width: 35rem
  }
}
.game-start-icon {
  position: absolute;
}
.game-start-button {
  bottom: 6rem;
  cursor: pointer;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  width: 34rem
}
@media (min-width: 829px) {
  .game-start-button {
    bottom: 4rem;
    width: 26rem
  }
}
.game-start-icon.kuu {
  bottom: 1.3rem;
  left: 3rem;
  width: 13rem
}
@media (min-width: 829px) {
  .game-start-icon.kuu {
    bottom: 1.3rem;
    left: 1rem;
    width: 9rem
  } 
}
.game-start-icon.jijerina {
  right: 2rem;
  top: 2rem;
  width: 11rem
}
@media (min-width: 829px) {
  .game-start-icon.jijerina {
    width: 8rem
  } 
}
.game-start-icon.flower {
  bottom: 2.3rem;
  right: 2.8rem;
  width: 14rem
}
@media (min-width: 829px) {
  .game-start-icon.flower {
    bottom: 1.3rem;
    right: 1rem;
    width: 11rem
  } 
}
.game-gift-title {
  margin: 0 auto;
  padding: 2rem 0;
  width: 45rem
}
.game-gift-text {
  margin: 0 auto;
  padding: 2rem 0;
  width: 75rem
}
@media (min-width: 829px) {
  .game-gift-text {
    width: 70rem
  }
}
.box-gift {
  background: url("../img/box-gift.png")  no-repeat 0 0/100% 100%;
  position: relative;
  width: 100%
}
.box-gift ul {
  align-items: center;
  display: flex;
  justify-content: space-around;
  padding: 2rem 0
}
.box-gift ul>li:nth-child(1) {
  padding-left: 2rem;
  padding-right: 1rem
}
.box-gift ul>li:nth-child(2) {
  padding-left: 1rem;
  padding-right: 2rem
}

/*** FESTIVAL TWITTER ***/
#fes03 .fes-box-wrap {
  border: 0px;
  border-radius: 15px;
  box-shadow: 0 0 7px rgba(0, 0, 0, 0.5);
  margin: 0 auto;
  width: 75rem
}
@media (min-width: 829px) {
  #fes03 .fes-box-wrap {
    width: 56.4rem
  }
}
.twitter-text {
  margin: 0 auto;
  padding: 0;
  width: 60rem
}
@media (min-width: 829px) {
  .twitter-text {
    width: 52rem
  }
}
.attention {
  font-size: 2.4rem
}
@media (min-width: 829px) {
  .attention {
    font-size: 2rem
  }
}
.howto-tweet a {
  border-bottom: 1px solid #fff;
  color: #fff;
  text-decoration: none
}
.twitter-character-upper {
  display: block;
  margin: 0 auto;
  position: relative;
  width: 16.6rem;
  z-index: 2
}
.twitter-character-upper img {
  position: absolute;
  top: -2.6rem;
  right: -30rem;
  width: 100%
}
@media (min-width: 829px) {
  .twitter-character-upper img {
    right: -24rem;
    width: 86%
  }
}
.box-twitter {
  background: url("../img/box-tweet.png")  no-repeat 0 0/100% 100%;
  height: 89rem;
  padding: 5.4rem;
  position: relative;
  width: 100%
}
@media (min-width: 829px) {
  .box-twitter {
    height: 79rem
  }
}
.twitter-wrap {
  color: #666666;
  height: 79rem;
  overflow-y: scroll;
  margin: 0 auto;
  width: 63rem
}
@media (min-width: 829px) {
  .twitter-wrap {
    height: 68rem;
    width: 46rem
  }
}
.twitter-wrap>a {
  text-decoration: none
}
.tweet-wrap {
  background-color: #ededea;
  border: solid 1px #47433e;
  height: auto;
  line-height: 1.1;
  margin: 1rem auto;
  padding: 1.5rem;
  width: 95%
}
.twitter-user {
  padding-bottom: 1rem
}
.user-name {
  font-size: 3.2rem;
  font-weight: bold
}
@media (min-width: 829px) {
  .user-name {
    font-size: 2rem
  }
}
.user-id {
  font-size: 2.7rem
}
@media (min-width: 829px) {
  .user-id {
    font-size: 1.7rem
  } 
}
.tweet-tag {
  padding: 3rem 0 1rem
}
.twitter-character-lower {
  display: block;
  margin: 0 auto;
  position: relative;
  width: 20rem;
  z-index: 2
}
@media (min-width: 829px) {
  .twitter-character-lower {
    width: 15rem
  }
}
.twitter-character-lower img:nth-child(1) {
  bottom: -8rem;
  position: absolute;
  left: -30rem;
  width: 100%
}
@media (min-width: 829px) {
  .twitter-character-lower img:nth-child(1) {
    bottom: -4rem;
    left: -33.2rem
  } 
}
.twitter-character-lower img:nth-child(2) {
  bottom: -8rem;
  position: absolute;
  left: -14rem;
  width: 73%
}
@media (min-width: 829px) {
  .twitter-character-lower img:nth-child(2) {
    bottom: -4rem;
    left: -21rem
  } 
}

/*** FESTIVAL EGG HUNT ***/
.egghunt-text {
  margin: 0 auto;
  padding-bottom: 2rem;
  width: 46rem;
}
@media (min-width: 829px) {
  .egghunt-text {
    width: 32rem;
  } 
}
.egghunt-image {
  border-radius: 10px;
}

/*** FESTIVAL UPDATE ***/
.update-text {
  margin: 0 auto;
  padding-bottom: 2rem;
  width: 42rem;
}
@media (min-width: 829px) {
  .update-text {
    width: 29rem;
  }
}
.update-slider {
  margin: 0 auto;
  width: 74rem
}
@media (min-width: 829px) {
  .update-slider {
    width: 55rem
  }
}
.update-slider .slick-list {
  border: 6px solid #857568;
  border-radius: 17px;
  box-shadow: 0 0 7px rgba(0, 0, 0, 0.5);
  margin: 0 auto 0
}
.update-slider .slick-dots {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-top: 2.9rem
}
@media (min-width: 829px) {
  .update-slider .slick-dots {
    margin-top: 2rem
  }
}
.update-slider .slick-dots li {
  background: url("../img/slider-dot.png") no-repeat 0 0/100% 100%;
  cursor: pointer;
  display: block;
  height: 7.5rem;
  overflow: hidden;
  position: relative;
  text-indent: 120%;
  white-space: nowrap;
  width: 7.5rem
}
@media (min-width: 829px) {
  .update-slider .slick-dots li {
    height: 5rem;
    width: 5rem
  }
}
.update-slider .slick-dots li button {
  color: rgba(0, 0, 0, 0)
}
.update-slider .slick-dots li~li {
  margin-left: -1rem
}
.update-slider .slick-dots li.slick-active {
  background: url("../img/slider-dot-active.png") no-repeat 0 0/100% 100%
}

/*** FESTIVAL HOWTO ***/
.howto-step li {
  color: #ffe9d1;
  font-size: 3.2rem;
  line-height: 1.2;
  margin-top: 4.2rem;
  padding-top: 4.9rem;
  position: relative;
  text-align: center
}
@media (min-width: 829px) {
  .howto-step li {
    font-size: 2.3rem;
    margin: 4.6rem auto 0;
    width: 61.2rem
  }
}
.howto-step li~li {
  margin-top: 3.1rem
}
@media (min-width: 829px) {
  .howto-step li~li {
    margin-top: 1rem
  } 
}
.howto-step li:nth-child(1) {
  background: url("../img/howto-step01.png") no-repeat 0 0/100% 100%;
  height: 29.6rem
}
@media (min-width: 829px) {
  .howto-step li:nth-child(1) {
    height: 21.8rem;
    padding-top: 4rem
  }
}
.howto-step li:nth-child(2) {
  background: url("../img/howto-step02.png") no-repeat 0 0/100% 100%;
  height: 29.6rem
}
@media (min-width: 829px) {
  .howto-step li:nth-child(2) {
    height: 21.8rem
  }
}
.howto-step li:nth-child(3) {
  background: url("../img/howto-step03.png") no-repeat 0 0/100% 100%;
  height: 17.8rem;
  padding-top: 6.5rem
}
@media (min-width: 829px) {
  .howto-step li:nth-child(3) {
    height: 14rem;
    padding-top: 5.6rem
  }
}
.howto-step li:nth-child(4) {
  background: url("../img/howto-step04.png") no-repeat 0 0/100% 100%;
  height: 26rem;
  padding-top: 5.8rem
}
@media (min-width: 829px) {
  .howto-step li:nth-child(4) {
    height: 19.5rem;
    padding-top: 2.8rem;
  }
}
.howto-follow {
  bottom: 5.4rem;
  display: block;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  width: 43.4rem
}
@media (min-width: 829px) {
  .howto-follow {
    bottom: 3.4rem;
    width: 26rem
  }
}
.howto-tweet {
  display: inline-block;
  font-size: 3.6rem;
  margin-top: 1.9rem
}
@media (min-width: 829px) {
  .howto-tweet {
    font-size: 2.2rem;
    margin-top: .2rem
  }
}
.howto-hashtag {
  display: inline-block;
  margin-top: 2rem
}
.howto-tweet-button {
  display: block;
  margin: 0 auto;
  padding-top: 4rem;
  width: 50rem
}
@media (min-width: 829px) {
  .howto-tweet-button {
    width: 40rem;
  }
}
/* NOTICE */
.notice-title {
  color: #477e51;
  margin: 6rem auto 0;
  text-align: center
}
@media (min-width: 829px) {
  .notice-title {
    margin: 6rem auto 2.6rem;
  }
}
.notice-list {
  margin: 0 auto;
  width: 74.8rem
}
@media (min-width: 829px) {
  .notice-list {
    width: 62rem
  }
}
.notice-list li {
  color: #477e51;
  font-size: 2.4rem;
  line-height: 1.5;
  margin-left: 1em;
  text-indent: -1em;
  text-indent: -1em
}
@media (min-width: 829px) {
  .notice-list li {
    font-size: 1.4rem
  }
}
.notice-list li:nth-child(1) {
  margin-top: 5.2rem
}
@media (min-width: 829px) {
  .notice-list li:nth-child(1) {
    margin-top: 1.4rem
  }
}

/*** FOOTER ***/
#footer .store li {
  border: .2rem solid #3b3b3b
}
#footer .global {
  padding-top: 3.2rem;
  position: relative
}
@media (min-width: 829px) {
  #footer .global {
    margin-top: 0;
    padding-top: 0
  }
}
@media (min-width: 829px) {
  #footer .sns li {
    background: #cacacc
  }
}
#footer .sns li svg {
  fill: #cacacc
}
@media (min-width: 829px) {
  #footer .sns li svg {
    fill: #282828
  }
}
#footer .link li::before {
  background: #606060
}
#footer .link li a {
  color: #cacacc
}
#footer .copy {
  color: #cacacc
}
#footer .copy small {
  display: inline-block;
  margin-top: .5em
}
/* STORE */
.store {
  margin: 9.6rem auto 0;
  width: 49.6rem
}
@media (min-width: 829px) {
  .store {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-top: 5.4rem;
    width: 56.4rem
  }
}
.store li {
  border-radius: 1rem;
  overflow-x: hidden
}
@media (min-width: 829px) {
  .store li {
    width: 27rem
  }
}
.official {
  display: block;
  margin: 9rem auto 0;
  -webkit-transition: -webkit-filter .3s;
  transition: -webkit-filter .3s;
  transition: filter .3s;
  transition: filter .3s, -webkit-filter .3s;
  width: 49.6rem
}
@media (min-width: 829px) {
  .official {
    margin-top: 8.2rem;
    width: 27rem
  }
}
@media (min-width: 829px) {
  .official:hover {
    -webkit-filter: brightness(1.2);
    filter: brightness(1.2)
  }
}
.share-title {
  margin: 7.5rem auto 0;
  width: 14.4rem
}
@media (min-width: 829px) {
  .share-title {
    margin-top: 4rem;
    width: 11.1rem
  }
}
.share-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin: 1.5rem auto 0
}
@media (min-width: 829px) {
  .share-list {
    margin-top: 1.3rem
  }
}
.share-list li {
  height: 11.7rem;
  -webkit-transition: -webkit-filter .3s;
  transition: -webkit-filter .3s;
  transition: filter .3s;
  transition: filter .3s, -webkit-filter .3s;
  width: 11.6rem
}
@media (min-width: 829px) {
  .share-list li {
    height: 7.7rem;
    width: 7.6rem
  }
}
.share-list li~li {
  margin-left: 3.4rem
}
@media (min-width: 829px) {
  .share-list li~li {
    margin-left: 2.4rem
  }
}
@media (min-width: 829px) {
  .share-list li:hover {
    -webkit-filter: brightness(1.2);
    filter: brightness(1.2)
  }
}
/* DARK */
.info {
  background: #2e2d2b;
  margin-top: 8.9rem;
  padding-top: 9.1rem
}
@media (min-width: 829px) {
  .info {
    margin-top: 3.6rem;
    padding-top: 3rem
  }
}
.spec {
  margin: 0 auto 2rem;
  position: relative;
  width: 66rem
}
@media (min-width: 829px) {
  .spec {
    margin-bottom: 0;
    width: 50rem
  }
}
.spec-icon {
  bottom: 0;
  left: 0;
  margin: auto 0;
  position: absolute;
  top: 0;
  width: 20rem;
  border-radius: 2rem
}
@media (min-width: 829px) {
  .spec-icon {
    width: 12.2rem;
    border-radius: 1rem
  }
}
.spec-list {
  margin: 0rem 0 0 auto;
  width: 42rem
}
@media (min-width: 829px) {
  .spec-list {
    width: 34rem
  }
}
.spec-list th, .spec-list td {
  color: #dadacc;
  font-size: 1.8rem;
  font-weight: 300;
  line-height: 1.445;
  padding: .5rem 0
}
@media (min-width: 829px) {
  .spec-list th, .spec-list td {
    font-size: 1.2rem
  }
}
.spec-list th {
  vertical-align: top;
  width: 4.5em
}
.spec-list td {
  padding-left: 1em
}
.spec-notice {
  display: inline-block;
  font-size: 1.4rem;
  margin-left: -1em;
  text-indent: -1em;
  -webkit-transform: scale(0.78, 0.78);
  transform: scale(0.78, 0.78);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  width: calc(100% + 11em)
}