.page-title {
  background: url("/_materials/img/ninja-gum/_detail/bg-title_sp.jpg") no-repeat center 0/cover;
}

@media (min-width: 769px) {
  .page-title {
    background: url("/_materials/img/ninja-gum/_detail/bg-title_pc.jpg") no-repeat center 0/cover;
  }
}

.page-title.detail {
  margin-bottom: 0;
}

.section-title {
  margin: 0 auto 5.98958vw;
}

.section-title .icon-title {
  padding: 0 0 0 11.71875vw;
}

.section-title .icon-title.katana::before {
  background: url("/_materials/img/ninja-gum/_detail/icon-katana.png") no-repeat 0 0/contain;
  height: 9.63542vw;
  width: 9.50521vw;
}
.section-title .icon-title.hammer::before {
  background: url("/_materials/img/ninja-gum/_detail/icon-hammer.png") no-repeat 0 0/contain;
  height: 9.89583vw;
  width: 9.89583vw;
}

.section-title .icon-title.yoyo::before {
  background: url("/_materials/img/ninja-gum/_detail/icon-yoyo.png") no-repeat 0 0/contain;
  height: 9.63542vw;
  width: 9.89583vw;
}

.section-title .icon-title.board::before {
	background: url("/_materials/img/ninja-gum/_detail/icon-board.png") no-repeat 0 0/contain;
	height: 9.63542vw;
	width: 9.50521vw;
}

.section-title .icon-title.knuckle::before {
	background: url("/_materials/img/ninja-gum/_detail/icon-knuckle.png") no-repeat 0 0/contain;
	height: 9.63542vw;
	width: 9.50521vw;
}

.section-title .icon-title.extra::before {
	background: url("/_materials/img/ninja-gum/_detail/icon-extra.png") no-repeat 0 0/contain;
	height: 9.63542vw;
	width: 9.50521vw;
}

@media (min-width: 769px) {
  .section-title {
    margin: 0 auto 1.375vw;
  }
  .section-title .icon-title {
    padding: 0 0 0 5.625vw;
  }
  .section-title .icon-title.katana::before {
    background: url("/_materials/img/ninja-gum/_detail/icon-katana.png") no-repeat 0 0/contain;
    height: 4.25vw;
    width: 4.21875vw;
  }
  .section-title .icon-title.hammer::before {
    background: url("/_materials/img/ninja-gum/_detail/icon-hammer.png") no-repeat 0 0/contain;
    height: 4.28125vw;
    width: 4.28125vw;
  }
  .section-title .icon-title.yoyo::before {
    background: url("/_materials/img/ninja-gum/_detail/icon-yoyo.png") no-repeat 0 0/contain;
    height: 4.25vw;
    width: 4.34375vw;
  }
	.section-title .icon-title.board::before {
		background: url("/_materials/img/ninja-gum/_detail/icon-board.png") no-repeat 0 0/contain;
		height: 4.25vw;
		width: 4.21875vw;
	}
  .section-title .icon-title.knuckle::before {
		background: url("/_materials/img/ninja-gum/_detail/icon-knuckle.png") no-repeat 0 0/contain;
		height: 4.25vw;
		width: 4.21875vw;
	}
  .section-title .icon-title.extra::before {
		background: url("/_materials/img/ninja-gum/_detail/icon-extra.png") no-repeat 0 0/contain;
		height: 4.25vw;
		width: 4.21875vw;
	}
}

.section-block {
  margin: 0 0 13.02083vw;
}

@media (min-width: 769px) {
  .section-block {
    margin: 0 0 4.6875vw;
  }
}

@media (min-width: 769px) {
  .section-block.ninja-detail {
    background: url("/_materials/img/ninja-gum/_detail/detail_bg.png") no-repeat;
    background-size: cover;
  }
}

.section-block .gum-list {
  margin: 0 5.20833vw;
}

@media (min-width: 769px) {
  .section-block .gum-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 63vw;
    margin: 0 auto;
  }
}

.section-block .gum-list li {
  margin: 0 0 1.30208vw;
  position: relative;
}

.section-block .gum-list li.new::after {
  content: '';
  background: url("/_materials/img/common/new.svg") no-repeat 0 0/contain;
  display: block;
  position: absolute;
  left: 8.59375vw;
  top: 24.73958vw;
  height: 8.33333vw;
  width: 19.01042vw;
  pointer-events: none;
  z-index: 1;
}

@media (min-width: 769px) {
  .section-block .gum-list li {
    max-width: 29.90625vw;
    margin: 0 0.78125vw 0.625vw;
  }
  .section-block .gum-list li.new::after {
    left: 2.0625vw;
    top: 6.875vw;
    height: 2.875vw;
    width: 6.5625vw;
  }
  .section-block .gum-list li.js-kunai-animation .js-icon-kunai {
    top: 2.5vw;
  }
}

.section-block .gum-list a {
  display: block;
  height: 112.76042vw;
  padding: 14.88021vw 0.91146vw 0 3.125vw;
  position: relative;
}

.section-block .gum-list a::before, .section-block .gum-list a::after {
  content: '';
  background: url("/_materials/img/ninja-gum/_detail/bg-gum.png") no-repeat 0 0/100%;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: -1;
}

.section-block .gum-list a::after {
  background: url("/_materials/img/ninja-gum/_detail/bg-gum-on.png") no-repeat 0 0/100%;
  opacity: 0;
}

@media (min-width: 769px) {
  .section-block .gum-list a {
    background-size: cover;
    height: 34.875vw;
    padding: 4.9375vw 0.3125vw 0 1.25vw;
  }
  .section-block .gum-list a:hover::before {
    opacity: 0;
  }
  .section-block .gum-list a:hover::after {
    opacity: 1;
  }
}

.section-block .gum-list .gum-title {
  color: #fff;
  font-size: 4.16667vw;
  padding: 4.8vw 2.60417vw 0;
  display: flex;
  justify-content: center;
  height: 16.27604vw;
}

@media (min-width: 769px) {
  .section-block .gum-list .gum-title {
    color: #fff;
    font-size: 1.5vw;
    height: 5.375vw;
    padding: 0 0.5vw 0 0.3125vw;
	align-items: center;
  }
}

.section-block .gum-area {
  position: relative;
  z-index: 1;
}

@media (min-width: 769px) {
  .section-block .gum-head {
    background: url("/_materials/img/ninja-gum/_detail/gum_bg.png") no-repeat;
    background-size: cover;
    padding: 2.65625vw 0 0;
  }
}

@media (min-width: 769px) {
  .section-block .gum-head .inner {
    padding: 0 3.125vw;
    overflow: hidden;
    margin: 0 auto;
  }
}

.section-block .gum-head .inner .gum {
  width: 49.73958vw;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

@media (min-width: 769px) {
  .section-block .gum-head .inner .gum {
    width: 17.1875vw;
    float: left;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 7.75vw;
    z-index: 1;
  }
}

.section-block .gum-head .inner .gum-img-bg {
  width: 65.36458vw;
  height: 65.36458vw;
  margin: 0 auto;
  position: absolute;
  background: #fff;
  border-radius: 100%;
  bottom: 6.51042vw;
  left: 50%;
  transform: translateX(-50%);
}

@media (min-width: 769px) {
  .section-block .gum-head .inner .gum-img-bg {
    position: absolute;
    background: #fff;
    width: 19.8125vw;
    height: 19.8125vw;
    border-radius: 100%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 6.25vw;
  }
}

.section-block .gum-head .inner .gum-text {
  background: url("/_materials/img/ninja-gum/_detail/gum_bg_sp.png") no-repeat;
  background-size: cover;
  padding: 13.28125vw 5.20833vw 10.67708vw;
}

@media (min-width: 769px) {
  .section-block .gum-head .inner .gum-text {
    width: 65.28125vw;
    float: right;
    background: none;
    padding: 0 0 0.5vw;
  }
}

.section-block .gum-head .inner .gum-text h2 {
  font-size: 13.02083vw;
  color: #fff;
  text-shadow: 0 0 10px #000;
  line-height: 1.2;
  margin: 0 0 1vw;
}

@media (min-width: 769px) {
  .section-block .gum-head .inner .gum-text h2 {
    font-size: 4.375vw;
  }
}

.section-block .gum-head .inner .gum-text p {
  font-size: 5.07812vw;
  color: #fff;
  text-shadow: 0 0 10px #000;
  padding: 0 0 3.90625vw;
}

@media (min-width: 769px) {
  .section-block .gum-head .inner .gum-text p {
    font-size: 1.75vw;
    padding: 0;
  }
}

.section-block .gum-head-bottom {
  background: url("/_materials/img/ninja-gum/_detail/gum_bg_bottom_sp.png") no-repeat;
  background-size: 100%;
  height: 69.53125vw;
  margin: -56.77083vw 0 0;
}

@media (min-width: 769px) {
  .section-block .gum-head-bottom {
    background: url("/_materials/img/ninja-gum/_detail/gum_bg_bottom.png") no-repeat;
    background-size: 100%;
    height: 10.46875vw;
    margin: 0;
  }
}

.section-block .gum-detail {
  padding: 39.0625vw 0 12.63021vw;
  margin: -26.04167vw 0 0;
  background: url("/_materials/img/ninja-gum/_detail/detail_bg_sp.png") no-repeat;
  background-size: cover;
  position: relative;
}

@media (min-width: 769px) {
  .section-block .gum-detail {
    padding: 9.125vw 3.125vw 13vw;
    margin: 0 auto;
    position: relative;
    background: none;
    height: 40.9375vw;
  }
}

@media (min-width: 769px) {
  .section-block .gum-detail .detail-text {
    width: 48.25vw;
    position: absolute;
    top: 47%;
    transform: translateY(-50%);
    bottom: auto;
    z-index: 1;
  }
}

.section-block .gum-detail .detail-text h2 {
  font-size: 13.02083vw;
  text-align: center;
  line-height: 1.2;
  margin: 0 0 1vw;
  text-shadow: white 1px 0px, white -1px 0px, white 0px -1px, white 0px 1px, white 1px 1px, white -1px 1px, white 1px -1px, white -1px -1px, white 1px 1px, white -1px 1px, white 1px -1px, white -1px -1px, white 1px 1px, white -1px 1px, white 1px -1px, white -1px -1px;
}

@media (min-width: 769px) {
  .section-block .gum-detail .detail-text h2 {
    font-size: 4.375vw;
    text-align: left;
  }
}

.section-block .gum-detail .detail-text p {
  font-size: 5.07812vw;
  padding: 0 5.20833vw;
  text-shadow: white 1px 0px, white -1px 0px, white 0px -1px, white 0px 1px, white 1px 1px, white -1px 1px, white 1px -1px, white -1px -1px, white 1px 1px, white -1px 1px, white 1px -1px, white -1px -1px, white 1px 1px, white -1px 1px, white 1px -1px, white -1px -1px;
}

@media (min-width: 769px) {
  .section-block .gum-detail .detail-text p {
    font-size: 1.75vw;
    padding: 0;
  }
}

.section-block .gum-detail .gum-img {
  float: none;
  position: relative;
  right: 3.90625vw;
  top: -4.55729vw;
}

@media (min-width: 769px) {
  .section-block .gum-detail .gum-img {
    width: 53.9375vw;
    float: right;
    position: absolute;
    top: -7.1875vw;
    right: 1.875vw;
  }
}

.section-block .gum-movie {
  overflow: hidden;
  background: url("/_materials/img/ninja-gum/_detail/movie-area-bg.jpg");
  padding: 15.625vw 0 14.84375vw;
}

@media (min-width: 769px) {
  .section-block .gum-movie {
    background: url("/_materials/img/ninja-gum/_detail/movie-area-bg.jpg");
    padding: 4.0625vw 0 4vw;
    margin: 0;
  }
}

@media (min-width: 769px) {
  .section-block .gum-movie .inner {
    width: 93.8125vw;
    margin: 0 auto 0;
    position: relative;
    overflow: hidden;
  }
}

.section-block .gum-movie .inner ul li {
  width: 89.58333vw;
  float: none;
  margin: 0 auto 7.42188vw;
}

@media (min-width: 769px) {
  .section-block .gum-movie .inner ul li {
    float: left;
    width: 29.375vw;
    margin: 0;
  }
}

.section-block .gum-movie .inner ul li .mask {
  background: url("/_materials/img/ninja-gum/_detail/gum-movie-bg.png") no-repeat;
  background-size: 100%;
  width: 85.41667vw;
  margin: 0 auto;
}

@media (min-width: 769px) {
  .section-block .gum-movie .inner ul li .mask {
    background: url("/_materials/img/ninja-gum/_detail/gum-movie-bg.png") no-repeat;
    background-size: 100%;
    width: 28.5vw;
    margin: 0 auto;
  }
}

.section-block .gum-movie .inner ul li p {
  width: 81.51042vw;
  padding: 2.21354vw 1.95312vw;
}

@media (min-width: 769px) {
  .section-block .gum-movie .inner ul li p {
    width: 27.125vw;
    padding: 0.78125vw 0.6875vw;
  }
}

.section-block .gum-movie .inner ul li p iframe {
  width: 81.51042vw !important;
  height: 46.09375vw !important;
}

@media (min-width: 769px) {
  .section-block .gum-movie .inner ul li p iframe {
    width: 27.125vw !important;
    height: 15.375vw !important;
  }
}

@media (min-width: 769px) {
  .section-block .gum-movie .inner ul li:nth-child(2) {
    margin: 0 2.59375vw;
  }
}

.section-block .gum-movie .inner ul li:nth-child(3) {
  margin: 0 auto;
}

@media (min-width: 769px) {
  .section-block .gum-movie .inner ul li:nth-child(3) {
    margin: 0;
  }
}

.section-block .gum-movie .inner ul li .text {
  background: url("/_materials/img/ninja-gum/_detail/h3-bg.png") no-repeat;
  background-size: 100%;
  width: 89.58333vw;
  height: 19.27083vw;
  margin: -6.51042vw auto 0;
  position: relative;
}

@media (min-width: 769px) {
  .section-block .gum-movie .inner ul li .text {
    background: url("/_materials/img/ninja-gum/_detail/h3-bg.png") no-repeat;
    background-size: 100%;
    width: 29.375vw;
    height: 6.40625vw;
    margin: -1.875vw auto 0;
    position: relative;
  }
}

.section-block .gum-movie .inner ul li .text h3 {
  text-align: center;
  padding: 7.8125vw 0 0;
  color: #000;
  text-shadow: none;
  font-size: 4.55729vw;
  letter-spacing: 0.1vw;
}

@media (min-width: 769px) {
  .section-block .gum-movie .inner ul li .text h3 {
    text-align: center;
    padding: 2.5vw 0 0;
    color: #000;
    text-shadow: none;
    font-size: 1.5vw;
  }
}

.btn-ninja-top {
  text-align: center;
  margin: -1.30208vw auto 12.10938vw !important;
}

@media (min-width: 769px) {
  .btn-ninja-top {
    margin: -0.625vw auto 3.75vw !important;
  }
}