/* t-shirt.css */
@charset "utf-8";
#t-shirt {
  background: #fff;
  position: relative;
  height: auto;
  display: flex !important;
}

.t-shirt_wrap {
  width: 100%;
  background: url(../images/ts_bg.png) repeat-y top left;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 100px;
}

.t-shirt_wrap::before,
.t-shirt_wrap::after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  pointer-events: none;
  left: 0;
}

.t-shirt_wrap::before {
  background: url(../images/ts_bg_tl.png) no-repeat top left,url(../images/ts_bg_tr.png) no-repeat top right;
  top: 0;
}
.t-shirt_wrap::after {
  background: url(../images/ts_bg_bl.png) no-repeat bottom left,url(../images/ts_bg_br.png) no-repeat bottom right;
  bottom: 0;
}

.t-shirt_wrap .tit {
  background: url(../images/ts_tit.png) no-repeat center;
  background-size: contain;
  width: 584px;
  height: 306px;
}

.t-shirt_wrap .lead {
  color: #5A002A;
  font-size: 20px;
  font-weight: 700;
  margin: 30px 0;
}

.t-shirt_wrap .mida {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.t-shirt_wrap .mida1 {
  background: url(../images/ts_mida1_bg.png) no-repeat top center;
  width: 100%;
  height: 444px;
  padding-top: 150px;
  margin: -70px 0 -120px;
}
.t-shirt_wrap .mida2 {
  background: url(../images/ts_mida2_bg.png) no-repeat top center;
  width: 100%;
  height: 1151px;
  padding-top: 190px;
  margin: -120px 0 -50px;
}

.t-shirt_wrap .arrow {
  background: url(../images/ts_arrow.svg) no-repeat center;
  background-size: contain;
  width: 200px;
  height: 98px;
  filter: drop-shadow(0px 3px 8px #641B58);
  position: relative;
  z-index: 1;
  pointer-events: none;
}

.t-shirt_wrap .mida1 .tit {
  background: url(../images/ts_mida1.svg) no-repeat center;
  background-size: contain;
  width: 484px;
  height: 73px;
}

.t-shirt_wrap .mida .txt {
  font-size: 18px;
  font-weight: 700;
  margin: 40px 0;
}

.t-shirt_wrap .mida .txt a {
  color: #6C52EC;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

.t-shirt_wrap .mida2 .tit {
  background: url(../images/ts_mida2.svg) no-repeat center;
  background-size: contain;
  width: 828px;
  height: 89px;
  margin-left: 50px;
}

.t-shirt_wrap .shirt {
  background: url(../images/ts_tshirt.png) no-repeat center;
  width: 914px;
  height: 776px;
  position: relative;
  margin-top: -80px;
}
.t-shirt_wrap .shirt::before {
  content: '';
  background: url(../images/ts_shine.png) no-repeat center;
  background-size: contain;
  width: 215px;
  height: 222px;
  display: inline-block;
  position: absolute;
  top: 70px;
  right: -50px;
}

.t-shirt_wrap .shirt .ts_up {
  background: url(../images/ts_tshirt_up.png) no-repeat top center;
  width: 424px;
  height: 481px;
  position: absolute;
  top: 290px;
  right: 275px;
}

.t-shirt_wrap p {
  margin-bottom: 20px;
}

.t-shirt_wrap .btn {
  background: #8DFFDD;
  border: solid 3px #000;
  border-radius: 66px;
  z-index: 1;
  animation: ts_button 2s ease-in-out infinite;
  margin: 10px 0 0;
  /* margin: 30px 0; */
}

.t-shirt_wrap .btn a {
  color: #000;
  font-size: 40px;
  font-weight: 700;
  padding: 20px 75px;
  width: calc(100% - 140px);
  height: calc(100% - 40px);
}

.t-shirt_wrap .mida1 .btn {
  margin: 0;
}

.t-shirt_wrap .mida .btn a {
  font-size: 31px;
}

.t-shirt_wrap .btn a::after {
    content: '▶';
    font-size: 0.6em;
    position: relative;
    bottom: 6px;
    left: 30px;
}

.t-shirt_wrap .present {
  background: url(../images/ts_present.png) no-repeat center;
  background-size: contain;
  width: 626px;
  height: 174px;
  position: relative;
}
.t-shirt_wrap .present::before ,
.t-shirt_wrap .present::after {
  content: '';
  position: absolute;
  background: url(../images/ts_kirakira.svg) no-repeat center;
  top: 0;
  left: 0;
  display: inline-block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(1px 1px 0 #000);
}

.t-shirt_wrap .present::after {
  transform: scaleY(-1);
  filter: drop-shadow(1px -1px 0 #000);
}

.t-shirt_wrap .shime {
  font-size: 40px;
  font-weight: 700;
  margin: 30px auto 0;
  /* margin: 60px auto 0; */
  position: relative;
  display: inline-block;
  padding: 10px 110px 15px;
  z-index: 1;
}
.shime::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  /* box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16); */
  box-shadow: 0px 3px 6px rgba(245, 14, 100);
  transform: skewX(-15deg);
  border-radius: 3px;
  z-index: -1;
}
.t-shirt_wrap .shime span.mini {
  font-size: 35px;
  padding: 0 4px;
}
.t-shirt_wrap .shime span.big {
  font-size: 50px;
}
.t-shirt_wrap .shime span.circle-bg {
  font-size: 32px;
  display: inline-block;
  background-color: rgb(255, 48, 48);
  color: #fff;
  border-radius: 50%;
  width: 1.4em;
  height: 1.4em;
  line-height: 1.3em;
  text-align: center;
  vertical-align: middle;
  margin-bottom: 5px;
  margin-right: 10px;
}

.t-shirt_wrap .nonac {
  pointer-events: none !important;
  opacity: 0.5 !important;
  animation: none !important;
  transition: none !important;
}

/***********************************************************************
「★PC版 CSS★」ブラウザの幅が751px以上ならここの記述が有効になる
**********************************************************************/

@media only all and (min-width: 751px) {

  .pc_non {display: none;}

  .tit_wrap {
    position: relative;
  }

  .t-shirt_wrap .tit_wrap::before {
    content: '';
    display: inline-block;
    background: url(../images/ts_megaph.svg) no-repeat center right;
    background-size: contain;
    position: absolute;
    width: 190px;
    height: 210px;
    top: 75px;
    left: -130px;
  }

  .t-shirt_wrap .tit_wrap::after {
    content: '';
    display: inline-block;
    background: url(../images/ts_brbr.svg) no-repeat center left;
    background-size: contain;
    position: absolute;
    width: 212px;
    height: 172px;
    top: 85px;
    right: -140px;
  }

  .t-shirt_wrap .mida .txt a {
    margin-left: 15px;
  }

  .t-shirt_wrap .mida .txt a:hover {
    color: #FF6EA8;
  }

  .t-shirt_wrap .btn:hover {
    animation-play-state: paused;
    background: #FF6EA8;
  }

}


/***********************************************************************
「★SP版 CSS★」ブラウザの幅が750px以下ならここの記述が有効になる
**********************************************************************/
@media only all and (max-width: 750px) {
 
  .racer1mon_wrap {
    width: 750px;
    margin-bottom: 120px;
  }  

.t-shirt_wrap::before {
  background: url(../images/ts_bg_st.png) no-repeat top center;
}
.t-shirt_wrap::after {
  background: url(../images/ts_bg_sb.png) no-repeat bottom center;
}

.t-shirt_wrap .tit_wrap {
  margin-top: -40px;
}

.t-shirt_wrap .tit {
  width: 720px;
  height: 378px;
}

.t-shirt_wrap .lead {
  font-size: 28px;
}

.t-shirt_wrap .mida::before {
  content: '';
  display: inline-block;
  background: url(../images/ts_dotted.svg) no-repeat right bottom;
  width: 129px;
  height: 426px;
  right: -40px;
  top: -460px;
  position: absolute;
  pointer-events: none;
}

.t-shirt_wrap .mida.mida2::before {
  right: 0;
  top: -280px;
}

.t-shirt_wrap .mida1 {
  background: url(../images/ts_mida1_bg_sp.png) no-repeat top center;
  width: 750px;
  height: 710px;
  padding-top: 120px;
  margin: -10px 0 -130px;
}
.t-shirt_wrap .mida2 {
  background: url(../images/ts_mida2_bg_sp.png) no-repeat top center;
  width: 750px;
  height: 1638px;
  /* height: 1658px; */
  padding-top: 150px;
  margin: -120px 0 -120px;
}

.t-shirt_wrap .mida .btn a {
  font-size: 40px;
}
.t-shirt_wrap .btn a {
  font-size: 47px;
}

.t-shirt_wrap .arrow {
  width: 268px;
  height: 130px;
  bottom: 80px;
}

.t-shirt_wrap .mida1 .tit {
  background: url(../images/ts_mida1_sp.svg) no-repeat center;
  background-size: contain;
  width: 408px;
  height: 113px;
  margin-left: 0px;
}

.t-shirt_wrap .mida .txt {
  font-size: 28px;
}


.t-shirt_wrap .mida2 .tit {
  background: url(../images/ts_mida2_sp.svg) no-repeat center;
  background-size: contain;
  width: 653px;
  height: 172px;
  margin-left: 0px;
}

.t-shirt_wrap .shirt {
  background: url(../images/ts_tshirt_sp.png) no-repeat center top;
  width: 750px;
  height: 898px;
  margin-top: 20px;
}

.t-shirt_wrap .shirt::before {
  content: '';
  width: 165px;
  height: 159px;
  top: -8px;
  right: 14px;
  transform: rotate(-20deg);
}

.t-shirt_wrap .shirt .ts_up {
  background: url(../images/ts_tshirt_up_sp.png) no-repeat top center;
  width: 541px;
  height: 669px;
  top: 230px;
  right: 105px;
}

.t-shirt_wrap .shirt .ts_up.mov {
  -webkit-transform-origin: 75% 0% !important;
    transform-origin: 75% 0% !important;
}


.t-shirt_wrap p {
  font-size: 26px;
}

.t-shirt_wrap .present {
  background: url(../images/ts_present_sp.png) no-repeat center;
  width: 901px;
  height: 260px;
}

.t-shirt_wrap .present::before,
.t-shirt_wrap .present::after {
  background: url(../images/ts_kirakira_sp.svg) no-repeat center;
  width: 100%;
  height: 260px;
  top: -10px;
}



.t-shirt_wrap .shime {
  font-size: 40px;
  margin: 50px auto 25px;
  /* margin: 60px auto 25px; */
  padding: 5px 75px 15px;
}
.t-shirt_wrap .shime span.mini {
  font-size: 35px;
  padding: 0 4px;
}
.t-shirt_wrap .shime span.big {
  font-size: 55px;
}
.t-shirt_wrap .shime span.circle-bg {
  font-size: 32px;
  display: inline-block;
  width: 1.4em;
  height: 1.4em;
  line-height: 1.3em;
  margin-bottom: 5px;
  margin-right: 10px;
}

}




/***********************************************************************
アニメーション指定
**********************************************************************/

.t-shirt_wrap .tit_wrap .tit.mov {
  animation: scale-in-tr 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  animation-delay:  0.1s;
  -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
}

.t-shirt_wrap .arrow {
  animation: ts_arrow 2s ease-in-out infinite;
}

.t-shirt_wrap .shirt .ts_up.mov {
  animation: scale-in-tr 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  animation-delay: 0.3s;
  -webkit-transform-origin: 90% 10%;
    transform-origin: 90% 10%;
  }

.t-shirt_wrap .present::before {
    animation: ts_kira 2s linear infinite;
}
.t-shirt_wrap .present::after {
    animation: ts_kira 2s linear reverse infinite;
}


/***********************************************************************
keyframe
**********************************************************************/
@keyframes ts_button {
 0%,20% {
    transform: translateY(0);
    filter: drop-shadow(0px 11px 0px #000);
 }
 50%,90% {
    transform: translateY(11px);
    filter: drop-shadow(0px 0px 0px #000);
 }
 100% {
    transform: translateY(0);
    filter: drop-shadow(0px 11px 0px #000);
 }
}

@keyframes ts_kira {
  0%, 50% {
    opacity: 1;
  }
  51%, 100% {
    opacity: 0;
  }
}

@keyframes ts_arrow {
  0%,10% {
    transform: translateY(0);
    opacity: 0;
  }
  20% {
    transform: translateY(0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  70%,80% {
    transform: translateY(50px);
    opacity: 1;
  }
  95% {
    opacity: 0;
    transform: translateY(50px);
  }
  100% {
    transform: translateY(0);
    opacity: 0;
  }
}

@keyframes scale-in-tr {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}