/*=============================================================
 tools
=============================================================*/
#merch {
  box-sizing: border-box;
  z-index: 2;
}
@media only screen and (max-width: 768px) {
  #merch {
    margin-bottom: 18.75vw;
  }
}
#merch .bg-deco {
  position: absolute;
  top: -30px;
  left: 0;
  mix-blend-mode: color;
}
@media only screen and (max-width: 1250px) {
  #merch .bg-deco {
    top: -2.4vw;
  }
}
@media only screen and (max-width: 768px) {
  #merch .bg-deco {
    top: 0;
  }
}
#merch .spot.left span {
  background-color: #A2D8FF;
}
#merch .spot.right .blur-wrap:nth-child(1) span {
  background-color: #0011E3;
}
#merch .ttl-box h1 {
  width: 471px;
}
@media only screen and (max-width: 1250px) {
  #merch .ttl-box h1 {
    width: 37.68vw;
  }
}
@media only screen and (max-width: 768px) {
  #merch .ttl-box h1 {
    width: 45.78125vw;
  }
}
#merch .ttl-box h1::before {
  background-image: url("../img/merch/ttl_deco.png");
}
#merch .ttl-box h1 .ttl {
  width: 412px;
  top: 45px;
  left: 30px;
}
@media only screen and (max-width: 1250px) {
  #merch .ttl-box h1 .ttl {
    width: 32.96vw;
    top: 3.6vw;
    left: 2.4vw;
  }
}
@media only screen and (max-width: 768px) {
  #merch .ttl-box h1 .ttl {
    width: 40vw;
    top: 4.375vw;
    left: 2.8125vw;
  }
}
#merch .ttl-box h1 .shine {
  top: 25px;
  left: 125px;
  width: 99px;
}
@media only screen and (max-width: 1250px) {
  #merch .ttl-box h1 .shine {
    top: 2vw;
    left: 10vw;
    width: 7.92vw;
  }
}
@media only screen and (max-width: 768px) {
  #merch .ttl-box h1 .shine {
    top: 2.5vw;
    left: 12.03125vw;
    width: 9.53125vw;
  }
}
#merch .ttl-box .jp {
  text-shadow: 0 0 12px #0011E3;
}
@media only screen and (max-width: 768px) {
  #merch .ttl-box .jp {
    text-shadow: 0 0 1.875vw #0011E3;
  }
}
#merch .period {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 280px;
  text-align: center;
  margin-bottom: 30px;
}
@media only screen and (max-width: 1250px) {
  #merch .period {
    height: 22.4vw;
    margin-bottom: 2.4vw;
  }
}
@media only screen and (max-width: 768px) {
  #merch .period {
    height: 51.40625vw;
    margin-bottom: 4.6875vw;
  }
}
#merch .period .frame {
  position: absolute;
  top: 0;
  left: 0;
}
#merch .period .frame img {
  position: relative;
}
#merch .period > p, #merch .period > h2 {
  position: relative;
  color: #fff;
  line-height: 1.2;
  font-weight: bold;
  text-shadow: 0 0 12px #22A4FF;
}
#merch .period h2 {
  font-size: 48px;
}
@media only screen and (max-width: 1250px) {
  #merch .period h2 {
    font-size: 3.84vw;
  }
}
@media only screen and (max-width: 768px) {
  #merch .period h2 {
    font-size: 7.5vw;
    margin-bottom: 0.78125vw;
  }
}
#merch .period .txt {
  font-size: 30px;
  margin-bottom: 16px;
}
@media only screen and (max-width: 1250px) {
  #merch .period .txt {
    font-size: 2.4vw;
    margin-bottom: 1.28vw;
  }
}
@media only screen and (max-width: 768px) {
  #merch .period .txt {
    font-size: 4.6875vw;
    margin: 0 auto 2.34375vw;
    line-height: 1.1;
  }
}
#merch .period .txt span {
  font-size: 48px;
}
@media only screen and (max-width: 1250px) {
  #merch .period .txt span {
    font-size: 3.84vw;
  }
}
@media only screen and (max-width: 768px) {
  #merch .period .txt span {
    font-size: 6.875vw;
  }
}
#merch .period .btn {
  width: 430px;
}
@media only screen and (max-width: 768px) {
  #merch .period .btn {
    width: 75vw;
  }
}
#merch .period .btn a {
  padding: 12px 0;
}
@media only screen and (max-width: 1250px) {
  #merch .period .btn a {
    padding: 0.96vw 0;
  }
}
@media only screen and (max-width: 768px) {
  #merch .period .btn a {
    padding: 1.875vw 0;
    font-size: 3.125vw;
  }
}
#merch .period .btn a span {
  line-height: 1.1;
}
#merch .period .btn a span.jp {
  margin-top: 0.4em;
}
@media only screen and (max-width: 768px) {
  #merch .period .btn a span.jp {
    margin-top: 0.2em;
    font-size: 2.5vw;
  }
}
@media only screen and (max-width: 768px) {
  #merch .period.en h2 {
    font-size: 6.71875vw;
  }
}
@media only screen and (max-width: 768px) {
  #merch .period.en .txt {
    font-size: 4.375vw;
  }
}
@media only screen and (max-width: 768px) {
  #merch .period.en .txt span {
    font-size: 6.25vw;
  }
}
#merch .image {
  margin-bottom: 40px;
}
@media only screen and (max-width: 1250px) {
  #merch .image {
    margin-bottom: 3.2vw;
  }
}
@media only screen and (max-width: 768px) {
  #merch .image {
    margin-bottom: 4.6875vw;
  }
}
#merch .image:last-of-type {
  margin-bottom: 72px;
}
@media only screen and (max-width: 1250px) {
  #merch .image:last-of-type {
    margin-bottom: 5.76vw;
  }
}
@media only screen and (max-width: 768px) {
  #merch .image:last-of-type {
    margin-bottom: 4.6875vw;
  }
}
#merch .detail-block {
  margin-bottom: 100px;
}
@media only screen and (max-width: 1250px) {
  #merch .detail-block {
    margin-bottom: 8vw;
  }
}
#merch .detail-block .ttl {
  font-size: 34px;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  padding: 20px;
  margin-bottom: 38px;
  text-align: center;
  background-image: linear-gradient(90deg, #0011e3, #ffbd29);
}
@media only screen and (max-width: 768px) {
  #merch .detail-block .ttl {
    font-size: 5.3125vw;
    padding: 4.6875vw 0;
    margin-bottom: 5.9375vw;
  }
}
#merch .detail-block h3 {
  background-image: linear-gradient(90deg, #0011e3, #ffbd29);
}
#merch .detail-block h4 {
  border-color: #FFBD29;
}
#merch .detail-block h4::before {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="17.05" height="16.02" viewBox="0 0 17.05 16.02"><path d="M0,0v16.02l17.05-16.02Z" fill="%2332191c"/><line x1="0" y1="16.02" x2="17.05" y2="0" stroke="%23FFBD29" stroke-width="1"/></svg>');
}
#merch .detail-block h4::after {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="17.05" height="16.02" viewBox="0 0 17.05 16.02"><g transform="scale(-1,-1) translate(-17.05,-16.02)"><path d="M0,0v16.02l17.05-16.02Z" fill="%2332191c"/><line x1="0" y1="16.02" x2="17.05" y2="0" stroke="%23FFBD29" stroke-width="1"/></g></svg>');
}