/* SPだけに効くcssです */
@media (max-width: 811px) {
  .pc-only {
    display: none;
  }
  .display_pc {
    display: none !important;
  }
}
/* PCだけに効くcssです */
@media (min-width: 812px) {
  .sp-only {
    display: none;
  }
  .display_sp {
    display: none !important;
  }
  
}


#content-body{
  background: #fff;
}
.mvimg{
  max-width: 1160px;
	margin: 0 auto 0px;
}

@media (min-width: 812px) {
  .contents{
    max-width: 840px;
  	margin: 0 auto 0;
  }
}
@media (max-width: 811px) {
  .contents{
    max-width: 100%;
  	margin: 0  var(--sp-h-1g) 0;
  }
}

.topic-path-pc {
  margin: 0px auto 0px;
}
.topic-path-sp{
  margin: 0px auto 0px;
}
.topic-path-pc ul li a::after,
.topic-path-sp ul li a::after {
  content: "/";
}


.bg_green{
  background: url("https://www.gu-global.com/jp/ja/special-feature/pokepeace/img/bg_green.jpg") repeat;
}
.bg_pink{
  background: url("https://www.gu-global.com/jp/ja/special-feature/pokepeace/img/bg_pink.jpg") repeat;
}
.bg_purple{
  background: url("https://www.gu-global.com/jp/ja/special-feature/pokepeace/img/bg_purple.jpg") repeat;
}
.bg_white{
  padding: 2rem 0 3rem;
}
@media (max-width: 811px) {
  .bg_green,
  .bg_pink,
  .bg_purple{
    background-size: 25%;
  }
}

.intro,
.charaAnchor{
  padding: 4rem 0;
}
@media (max-width: 811px) {
  .intro{
    padding: 2rem 0;
  }
  .charaAnchor{
    padding: 2rem 0 0.2rem;
  }
}

.balltitle,
.balltitle02{
  width: 450px;
  margin: 0 auto 20px;
}
@media (max-width: 811px) {
  .balltitle{
    width: 60%;
  }
  .balltitle02{
    width: 55%;
  }
}
.dotstitle{
  width: 212px;
  margin: 0 auto 20px;
}
@media (max-width: 811px) {
  .dotstitle{
    width: 130px;
    margin: 0 auto 20px;
  }
}

/* ITEM LINEUPアンカー */
.lineupAnchor{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 720px;
  margin: 30px auto 60px;
}
.lineupAnchor li{
  margin: 10px 10px;
  cursor: pointer;
}
@media (max-width: 811px) {
  .lineupAnchor{
    width: 100%;
    margin: 0px auto 60px;
  }
  .lineupAnchor li{
    margin: 5px 5px;
    width: 162px;
  }
  .lineupAnchor li:last-child{
    width: 100%;
    margin: 5px 10px;
  }
}


/* キャラから選ぶアンカーボタン */
ul.charaAnchor-button{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 640px;
  margin: 20px auto 20px;
}
ul.charaAnchor-button li{
  margin: 10px 10px;
  width: 190px;
  cursor: pointer;
}
@media (max-width: 811px) {
  ul.charaAnchor-button{
    width: 280px;
    margin: 20px auto 20px;
  }
  ul.charaAnchor-button li{
    width: 120px;
    margin: 10px 10px;
  }
}


/* エイリアスエリア */
.charaTitle{
  width: 236px;
  margin: 20px auto;
}
@media (max-width: 811px) {
  .charaTitle{
    width: 110px;
    margin: 10px auto;
  }
}
.genderTitle{
  width: 281px;
  margin: 20px auto;
}
@media (max-width: 811px) {
  .genderTitle{
    width: 130px;
    margin: 10px auto;
  }
}

/* ボタンデザイン */
.fr-linkButton{
  border-radius: 15px;
  font-weight: bold;
}

.textlink{
  text-decoration: underline;
}
.textlink:hover{
  text-decoration: none;
}


/* 商品一覧テーブル */
.itemTextlist{
  width: 100%;
}
.itemTextlist a{
  text-decoration: none;
}
.itemTextlist a:hover{
  text-decoration: underline;
}
.itemTextlist th {
  border: solid 1px;
  padding: 6px 6px;
  font-weight: bold;
}
.itemTextlist td {
  border: solid 1px;
  padding: 6px 6px;
}
.itemTextlist td:first-child{
  width: 24%;
}
/* 商品一覧ここまで */




.scroolIn {
  opacity: 0;
}
.scroolIn.show{
  opacity: 1;
  animation: zoom ease 0.6s;
}

@keyframes zoom{
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.3);
  }
  100% {
    transform: scale(1)
  }
}