@charset "utf-8";
/*------------------------------------------------------------
    feature/pokepoint
------------------------------------------------------------*/

.pokepoint .note {
  color: rgba(0, 0, 0, .7);
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.2rem;
  line-height: 1.6;
  margin-top: 1.2rem;
}
@media all and (max-width: 519px) {
  .pokepoint {
    overflow: hidden;
  }
  .pokepoint .note {
    margin-top: 1.6rem;
  }
}
@media all and (min-width: 520px) {
  .pokepoint .pc {
    display: block!important;
  }
  .pokepoint .sp {
    display: none;
  }
}
.pokepoint .-pattern {
  background: #FFDE27 url(../images/bg_pattern.png) no-repeat top center / cover;
  padding: 5rem 0 9rem;
}
.pokepoint .-pattern .content_block.lead {
  position: relative;
}
.pokepoint .-pattern .content_block.lead .txt_area {
  text-align: center;
}
.pokepoint .-pattern .content_block.lead .-txt {
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 1.6;
}
.pokepoint .-pattern .content_block.about,
.pokepoint .-pattern .content_block.how {
  background: #fff;
  border: 8px solid rgba(228, 2, 2, .6);
  border-radius: 20px;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, .1);
  max-width: 103rem;
  padding: 5rem 4rem;
  text-align: center;
  margin-top: 3rem;
}
.pokepoint .-pattern .content_block.about {
  padding-bottom: 4rem;
  margin-top: 6.2rem;
}
.pokepoint .-pattern .content_block.how {
  padding-top: 4.5rem;
}
.pokepoint .-pattern .content_block.about .-title,
.pokepoint .-pattern .content_block.how .-title {
  color: #E40202;
  display: inline-block;
  font-weight: 800;
  font-size: 2.4rem;
  padding-left: 6.5rem;
  position: relative;
}
.pokepoint .-pattern .content_block.about .-title:before,
.pokepoint .-pattern .content_block.how .-title:before {
  content: "";
  position: absolute;
  background: url(../images/img_about.png) no-repeat center / 100%;
  top: -2rem;
  left: 0;
  width: 4.5rem;
  height: 6rem;
}
.pokepoint .-pattern .content_block.how .-title:before {
  background-image: url(../images/img_how.png);
  top: -1.5rem;
  width: 5.5rem;
  height: 5rem;
}
.pokepoint .-pattern .content_block.about .-txt,
.pokepoint .-pattern .content_block.how .-txt {
  font-family: "Noto Sans JP", sans-serif;
  line-height: 1.8;
  margin-top: 3rem;
}
.pokepoint .-pattern .content_block.lead .txt_link,
.pokepoint .-pattern .content_block.about .txt_link {
  text-decoration: underline;
  color: inherit;
}
.pokepoint .-pattern .content_block.lead .txt_link:hover,
.pokepoint .-pattern .content_block.about .txt_link:hover {
  color: rgba(0, 0, 0, .9);
}
.pokepoint .-pattern .content_block.about .btn_area {
  margin-top: 3rem;
}
.pokepoint .-pattern .content_block.about .btn_area .btn {
  height: 5rem;
  font-family: "Noto Sans JP", sans-serif;
  background-color: #2FBCE6;
}
.pokepoint .-pattern .content_block.about .btn_area .btn:hover {
  background-color: #068FD8;
}
.pokepoint .-pattern .content_block.about .btn_area .btn.-disabled {
  background: #CCCCCC;
  pointer-events: none;
}
.pokepoint .-pattern .content_block.about .note {
  margin-top: 2rem;
}
@media all and (min-width: 520px) {
  .pokepoint .-pattern .content_block.lead {
    display: flex;
  }
  .pokepoint .-pattern .content_block.lead:before {
    content: "";
    position: absolute;
    background: url(../images/img_kv_ball.png) no-repeat center / 100%;
    top: 24.5rem;
    left: 2rem;
    width: 6.5rem;
    height: 6.5rem;
  }
  .pokepoint .-pattern .content_block.lead:after {
    content: "";
    position: absolute;
    background: url(../images/img_kv_ball2.png) no-repeat center / 100%;
    top: 1rem;
    right: -1rem;
    width: 16rem;
    height: 34rem;
  }
  .pokepoint .-pattern .content_block.lead .txt_area {
    font-size: 1.7rem;
    width: 50%;
    padding: 5.5rem 2% 0 4%;
    position: relative;
    font-size: 1.6rem;
  }
  .pokepoint .-pattern .content_block.lead .-txt {
    margin: .7rem 0 0 2rem;
  }
  .pokepoint .-pattern .content_block.lead .-img {
    width: 50%;
    margin-left: -5rem;
    padding: 4rem 9% 0 0;
  }
}
@media all and (max-width: 519px) {
  .pokepoint .-pattern {
    background-image: url(../images/bg_pattern_sp.png);
    padding: 5.5rem 0 7rem;
    position: relative;
  }
  .pokepoint .-pattern:after {
    content: "";
    position: absolute;
    background: url(../images/img_yellow_ball_sp.png) no-repeat center / 100%;
    bottom: -4rem;
    left: 8rem;
    width: 17rem;
    height: 8rem;
    z-index: 2;
  }
  .pokepoint .-pattern .content_block.lead .-img {
    padding: 4rem .5rem 0 2rem;
    position: relative;
  }
  .pokepoint .-pattern .content_block.lead .-img:before {
    content: "";
    position: absolute;
    background: url(../images/img_kv_ball.png) no-repeat center / 100%;
    top: 1rem;
    left: 0.5rem;
    width: 5.5rem;
    height: 5.5rem;
  }
  .pokepoint .-pattern .content_block.lead:after {
    content: "";
    position: absolute;
    background: url(../images/img_ball.png) no-repeat center / 100%;
    bottom: -10rem;
    right: 1.5rem;
    width: 8rem;
    height: 8rem;
  }
  .pokepoint .-pattern .content_block.lead .-txt {
    font-size: 1.6rem;
    line-height: 1.75;
    margin-top: 3rem;
  }
  .pokepoint .-pattern .content_block.about,
  .pokepoint .-pattern .content_block.how {
    padding: 4.5rem 2rem 3rem;
    text-align: left;
  }
  .pokepoint .-pattern .content_block.about {
    margin-top: 12rem;
  }
  .pokepoint .-pattern .content_block.how {
    margin-top: 2rem;
  }
  .pokepoint .-pattern .content_block.about .-title,
  .pokepoint .-pattern .content_block.how .-title {
    font-size: 2rem;
    padding-left: 5.5rem;
  }
  .pokepoint .-pattern .content_block.about .-title:before {
    left: .5rem;
  }
  .pokepoint .-pattern .content_block.how .-title:before {
    left: -.5rem;
  }
  .pokepoint .-pattern .content_block.about .-txt,
  .pokepoint .-pattern .content_block.how .-txt {
    margin-top: 2rem;
    line-height: 1.85;
  }
  .pokepoint .-pattern .content_block.about .btn_area {
    margin-top: 2rem;
  }
  .pokepoint .-pattern .content_block.about .btn_area .btn {
    max-width: 100%;
  }
  .pokepoint .-pattern .content_block.about .note {
    text-align: center;
    margin-top: 2rem;
  }
}

.pokepoint .-yellow {
  background: #FFDE27;
  padding: 5.5rem 0 7rem;
  position: relative;
}
.pokepoint .-yellow:before,
.pokepoint .-orange:before {
  content: "";
  position: absolute;
  display: block;
  height: 5rem;
  width: 100%;
  background: url(../images/bg_yellow_top.png) repeat-x bottom left / contain;
  top: -5rem;
  left: 0;
}
.pokepoint .-yellow .content_block.about {
  background: rgba(255, 255, 255, .4);
  border: 1px solid #fff;
  font-family: "Noto Sans JP", sans-serif;
  padding: 4.5rem 3rem 4rem;
}
.pokepoint .-yellow .content_block.about .-title {
  font-size: 1.8rem;
}
.pokepoint .-yellow .content_block.about .indent_list {
  margin-top: 2.2rem;
  line-height: 1.4;
}
.pokepoint .-yellow .content_block.about .-txt {
  margin-top: 2.2rem;
}
.pokepoint .-yellow .content_block.about .-txt + .indent_list {
  margin-top: .7rem;
}
.pokepoint .-yellow .-img {
  border-radius: 16px;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, .1);
  max-width: 34.5rem;
  margin: 3rem auto 0;
  overflow: hidden;
  position: relative;
}
@media all and (min-width: 520px) {
  .pokepoint .-yellow .-img:before {
    content: "";
    position: absolute;
    background: url(../images/img_yellow_ball.png) no-repeat center / 100%;
    top: 11rem;
    left: -22rem;
    width: 9rem;
    height: 9rem;
  }
  .pokepoint .-yellow .-img:after {
    content: "";
    position: absolute;
    background: url(../images/img_ball.png) no-repeat center / 100%;
    top: 4rem;
    right: -19rem;
    width: 8rem;
    height: 8rem;
  }
}
@media all and (max-width: 519px) {
  .pokepoint .-yellow {
    padding: 7rem 0 7.5rem;
  }
  .pokepoint .-yellow .content_block.about {
    padding: 2.2rem 2rem 2.5rem; 
  }
  .pokepoint .-yellow .content_block.about .indent_list {
    margin-top: 2rem;
  }
  .pokepoint .-yellow .content_block.about .h2 + .indent_list {
    margin-top: 2.5rem;
  }
  .pokepoint .-yellow .-img {
    margin-top: 3rem;
  }
}
.pokepoint .-orange {
  background: linear-gradient(#FFB16E, #F28213);
  position: relative;
  text-align: center;
  padding: 5.6rem 0 8rem;
}
.pokepoint .-orange:before {
  background-image: url(../images/bg_orange_top.png);
}
.pokepoint .-orange .-title {
  width: 61rem;
  margin: auto;
}
.pokepoint .-orange .-txt {
  margin-top: 1.4rem;
}
.pokepoint .-orange .btn_area {
  margin-top: 4rem;
}
.pokepoint .-orange .btn_area .btn {
  background: #0080DE;
  font-family: "Noto Sans JP", sans-serif;
}
.pokepoint .-orange .btn_area .btn:hover {
  background: #0060C1;
}
@media all and (max-width: 519px) {
  .pokepoint .-orange .-title {
    width: 84%;
  }
  .pokepoint .-yellow:before,
  .pokepoint .-orange:before {
    height: 3.2rem;
    background-size: cover;
    top: -3.2rem;
  }
  .pokepoint .-orange {
    padding: 3rem 0 9rem;
  }
}
.pokepoint .pagePath {
  font-family: "Noto Sans JP", sans-serif;
}