/* ----------------------------------------------------------
General Settings
---------------------------------------------------------- */

/* Style for PCs */
@media screen and (min-width: 1025px) {

.tsacc {
  width:100%;
  height: auto;
  overflow: hidden;
  display: inline-block;
  position: absolute;
  left:0;
  bottom: 0;
  z-index:4000;

  /* 初期状態 */
  transform: rotate(5deg) scale(1.05);

  /* 回転＋縮小アニメーション */
  animation: tsaccZoomRotate 3s ease-out 1s forwards;
}

.tsacc img {
  width: 100%;
  height: auto;

  /* マスク設定（右から左にスライド） */
  -webkit-mask-image: linear-gradient(to left, black 0%, black 100%);
  -webkit-mask-size: 0% 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: right;

  mask-image: linear-gradient(to left, black 0%, black 100%);
  mask-size: 0% 100%;
  mask-repeat: no-repeat;
  mask-position: right;

  /* マスクアニメーション */
  animation: revealMaskSlideRightToLeft 0.4s ease-out 1s forwards;
}

/* Catch */
.tscontents {
  width:100%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  aspect-ratio: 4 / 3;
  padding:0 5% 10%;
  position: absolute;
  top:0;
  left:0;
  z-index:5000;
}

/* Catch01 */
.tscontents p.tscatch01 {
  font-size: clamp(30px, 5vw, 200px);
  font-family: var(--font-en);
  font-weight: 600;
  line-height: 1em;
  letter-spacing: -0.05em;
  color:var(--color-black);
  opacity: 0;
  margin-bottom:0;
  order:1;
  animation-delay: 3s;
  -webkit-animation-delay: 3s;
  animation-duration: 1.5s;
  -webkit-animation-duration: 1.5s;
  animation-name: tscatch01;
  -webkit-animation-name: tscatch01;
  animation-iteration-count:1;
  -webkit-animation-iteration-count:1;
  animation-fill-mode:forwards;
  -webkit-animation-fill-mode:forwards;
  margin-left:10%;
}

/* Catch02 */
.tscontents p.tscatch02 {
  font-size: clamp(30px, 5vw, 200px);
  font-family: var(--font-en);
  font-weight: 600;
  line-height: 1em;
  letter-spacing: -0.05em;
  color:var(--color-black);
  opacity: 0;
  margin-bottom:0.3em;
  order:2;
  animation-delay: 3.5s;
  -webkit-animation-delay: 3.5s;
  animation-duration: 1.5s;
  -webkit-animation-duration: 1.5s;
  animation-name: tscatch02;
  -webkit-animation-name: tscatch02;
  animation-iteration-count:1;
  -webkit-animation-iteration-count:1;
  animation-fill-mode:forwards;
  -webkit-animation-fill-mode:forwards;
  margin-left:10%;
}

/* Catch03 */
.tscontents h2.tscatch03 {
  font-size: clamp(14px, 1vw, 24px);
  font-weight: 500;
  line-height: 1.5em;
  letter-spacing: 0em;
  color:var(--color-black);
  opacity: 0;
  margin-bottom:0;
  order:3;
  animation-delay: 4s;
  -webkit-animation-delay: 4s;
  animation-duration: 1.5s;
  -webkit-animation-duration: 1.5s;
  animation-name: tscatch03;
  -webkit-animation-name: tscatch03;
  animation-iteration-count:1;
  -webkit-animation-iteration-count:1;
  animation-fill-mode:forwards;
  -webkit-animation-fill-mode:forwards;
  margin-left:10%;
}

/* Catch04 */
.tscontents h3.tscatch04 {
  font-size: clamp(14px, 1vw, 24px);
  font-weight: 500;
  line-height: 1.5em;
  letter-spacing: 0em;
  color:var(--color-black);
  opacity: 0;
  margin-bottom:0;
  order:4;
  animation-delay: 4.2s;
  -webkit-animation-delay: 4.2s;
  animation-duration: 1.5s;
  -webkit-animation-duration: 1.5s;
  animation-name: tscatch04;
  -webkit-animation-name: tscatch04;
  animation-iteration-count:1;
  -webkit-animation-iteration-count:1;
  animation-fill-mode:forwards;
  -webkit-animation-fill-mode:forwards;
  margin-left:10%;
}

/* Triangle */
.ts_triangle {
  width:40%;
  height: 60%;
  display: block;
  background: #ff2600;
background: linear-gradient(90deg, rgba(255, 38, 0, 1) 0%, rgba(242, 182, 0, 1) 100%);
  clip-path: polygon(0 0, 76% 100%, 100% 0);
  position: absolute;
  top:0%;
  left:25%;
  z-index:2000;
  animation-delay: 6.5s;
  -webkit-animation-delay: 6.5s;
  animation-duration: 0.5s;
  -webkit-animation-duration: 0.5s;
  animation-name: ts_triangle;
  -webkit-animation-name: ts_triangle;
  animation-iteration-count:1;
  -webkit-animation-iteration-count:1;
  animation-fill-mode:forwards;
  -webkit-animation-fill-mode:forwards;
  opacity: 0;
}

/* bg */
.ts_bg {
  width:85%;
  height: auto;
  display: block;
  aspect-ratio: 4 / 3;
  background-image: url(../img/index/tsbg.webp);
  background-repeat: no-repeat;
  background-position: 0 bottom;
  background-size: auto 100%;
  position: absolute;
  top:0%;
  left:25%;
  z-index:500;
  animation-delay: 5.5s;
  -webkit-animation-delay: 5.5s;
  animation-duration: 3s;
  -webkit-animation-duration: 3s;
  animation-name: ts_bg;
  -webkit-animation-name: ts_bg;
  animation-iteration-count:1;
  -webkit-animation-iteration-count:1;
  animation-fill-mode:forwards;
  -webkit-animation-fill-mode:forwards;
  opacity: 0;
}

/* Slider */
.tslider {
animation-delay: 4.5s;
  -webkit-animation-delay: 4.5s;
  animation-duration: 1s;
  -webkit-animation-duration: 1s;
  animation-name: tslider;
  -webkit-animation-name: tslider;
  animation-iteration-count:1;
  -webkit-animation-iteration-count:1;
  animation-fill-mode:forwards;
  -webkit-animation-fill-mode:forwards;
  opacity: 0;
  left:35%;
}


}


/* Style for iPad Pro */
@media screen and (min-width: 769px) and (max-width: 1024px) {

.tsacc {
  width:100%;
  height: auto;
  overflow: hidden;
  display: inline-block;
  position: absolute;
  left:0;
  bottom: 0;
  z-index:4000;

  /* 初期状態 */
  transform: rotate(5deg) scale(1.05);

  /* 回転＋縮小アニメーション */
  animation: tsaccZoomRotate 3s ease-out 1s forwards;
}

.tsacc img {
  width: 100%;
  height: auto;

  /* マスク設定（右から左にスライド） */
  -webkit-mask-image: linear-gradient(to left, black 0%, black 100%);
  -webkit-mask-size: 0% 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: right;

  mask-image: linear-gradient(to left, black 0%, black 100%);
  mask-size: 0% 100%;
  mask-repeat: no-repeat;
  mask-position: right;

  /* マスクアニメーション */
  animation: revealMaskSlideRightToLeft 0.4s ease-out 1s forwards;
}

/* Catch */
.tscontents {
  width:100%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  aspect-ratio: 4 / 3;
  padding:0 5% 15%;
  position: absolute;
  top:0;
  left:0;
  z-index:5000;
}

/* Catch01 */
.tscontents p.tscatch01 {
  font-size: clamp(30px, 5vw, 200px);
  font-family: var(--font-en);
  font-weight: 700;
  line-height: 1em;
  letter-spacing: -0.05em;
  color:var(--color-black);
  opacity: 0;
  margin-bottom:0;
  order:1;
  animation-delay: 3s;
  -webkit-animation-delay: 3s;
  animation-duration: 1.5s;
  -webkit-animation-duration: 1.5s;
  animation-name: tscatch01;
  -webkit-animation-name: tscatch01;
  animation-iteration-count:1;
  -webkit-animation-iteration-count:1;
  animation-fill-mode:forwards;
  -webkit-animation-fill-mode:forwards;
  margin-left:10%;
}

/* Catch02 */
.tscontents p.tscatch02 {
  font-size: clamp(30px, 5vw, 200px);
  font-family: var(--font-en);
  font-weight: 700;
  line-height: 1em;
  letter-spacing: -0.05em;
  color:var(--color-black);
  opacity: 0;
  margin-bottom:0.3em;
  order:2;
  animation-delay: 3.5s;
  -webkit-animation-delay: 3.5s;
  animation-duration: 1.5s;
  -webkit-animation-duration: 1.5s;
  animation-name: tscatch02;
  -webkit-animation-name: tscatch02;
  animation-iteration-count:1;
  -webkit-animation-iteration-count:1;
  animation-fill-mode:forwards;
  -webkit-animation-fill-mode:forwards;
  margin-left:10%;
}

/* Catch03 */
.tscontents h2.tscatch03 {
  font-size: clamp(14px, 1vw, 24px);
  font-weight: 500;
  line-height: 1.5em;
  letter-spacing: 0em;
  color:var(--color-black);
  opacity: 0;
  margin-bottom:0;
  order:3;
  animation-delay: 4s;
  -webkit-animation-delay: 4s;
  animation-duration: 1.5s;
  -webkit-animation-duration: 1.5s;
  animation-name: tscatch03;
  -webkit-animation-name: tscatch03;
  animation-iteration-count:1;
  -webkit-animation-iteration-count:1;
  animation-fill-mode:forwards;
  -webkit-animation-fill-mode:forwards;
  margin-left:10%;
}

/* Catch04 */
.tscontents h3.tscatch04 {
  font-size: clamp(14px, 1vw, 24px);
  font-weight: 500;
  line-height: 1.5em;
  letter-spacing: 0em;
  color:var(--color-black);
  opacity: 0;
  margin-bottom:0;
  order:4;
  animation-delay: 4.2s;
  -webkit-animation-delay: 4.2s;
  animation-duration: 1.5s;
  -webkit-animation-duration: 1.5s;
  animation-name: tscatch04;
  -webkit-animation-name: tscatch04;
  animation-iteration-count:1;
  -webkit-animation-iteration-count:1;
  animation-fill-mode:forwards;
  -webkit-animation-fill-mode:forwards;
  margin-left:10%;
}

/* Triangle */
.ts_triangle {
  width:40%;
  height: 60%;
  display: block;
  background: #ff2600;
background: linear-gradient(90deg, rgba(255, 38, 0, 1) 0%, rgba(242, 182, 0, 1) 100%);
  clip-path: polygon(0 0, 76% 100%, 100% 0);
  position: absolute;
  top:0%;
  left:25%;
  z-index:2000;
  animation-delay: 6.5s;
  -webkit-animation-delay: 6.5s;
  animation-duration: 0.5s;
  -webkit-animation-duration: 0.5s;
  animation-name: ts_triangle_tab;
  -webkit-animation-name: ts_triangle_tab;
  animation-iteration-count:1;
  -webkit-animation-iteration-count:1;
  animation-fill-mode:forwards;
  -webkit-animation-fill-mode:forwards;
  opacity: 0;
}

/* bg */
.ts_bg {
  width:85%;
  height: auto;
  display: block;
  aspect-ratio: 4 / 3;
  background-image: url(../img/index/tsbg.webp);
  background-repeat: no-repeat;
  background-position: 0 bottom;
  background-size: auto 100%;
  position: absolute;
  top:0%;
  left:25%;
  z-index:500;
  animation-delay: 5.5s;
  -webkit-animation-delay: 5.5s;
  animation-duration: 3s;
  -webkit-animation-duration: 3s;
  animation-name: ts_bg_tab;
  -webkit-animation-name: ts_bg_tab;
  animation-iteration-count:1;
  -webkit-animation-iteration-count:1;
  animation-fill-mode:forwards;
  -webkit-animation-fill-mode:forwards;
  opacity: 0;
}

/* Slider */
.tslider {
animation-delay: 4.5s;
  -webkit-animation-delay: 4.5s;
  animation-duration: 1s;
  -webkit-animation-duration: 1s;
  animation-name: tslider_tab;
  -webkit-animation-name: tslider_tab;
  animation-iteration-count:1;
  -webkit-animation-iteration-count:1;
  animation-fill-mode:forwards;
  -webkit-animation-fill-mode:forwards;
  opacity: 0;
  left:50%;
}

}


/* Style for Smartphone */
@media screen and (max-width: 768px) {

.tsacc {
  width:100%;
  height: auto;
  overflow: hidden;
  display: inline-block;
  position: absolute;
  left:0;
  bottom: 28%;
  z-index:4000;

  /* 初期状態 */
  transform: rotate(5deg) scale(1.05);

  /* 回転＋縮小アニメーション */
  animation: tsaccZoomRotate 3s ease-out 1s forwards;
}

.tsacc img {
  width: 100%;
  height: auto;

  /* マスク設定（右から左にスライド） */
  -webkit-mask-image: linear-gradient(to left, black 0%, black 100%);
  -webkit-mask-size: 0% 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: right;

  mask-image: linear-gradient(to left, black 0%, black 100%);
  mask-size: 0% 100%;
  mask-repeat: no-repeat;
  mask-position: right;

  /* マスクアニメーション */
  animation: revealMaskSlideRightToLeft 0.4s ease-out 1s forwards;
}

/* Catch */
.tscontents {
  width:100%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  padding:0 10% 0%;
  position: absolute;
  bottom:0;
  left:0;
  z-index:5000;
}

/* Catch01 */
.tscontents p.tscatch01 {
  width:100%;
  height: auto;
  display: block;
  font-size: clamp(40px, 10vw, 200px);
  font-family: var(--font-en);
  font-weight: 700;
  line-height: 1em;
  letter-spacing: -0.03em;
  color:var(--color-black);
  opacity: 0;
  margin-bottom:0;
  order:1;
  animation-delay: 2s;
  -webkit-animation-delay: 2s;
  animation-duration: 1s;
  -webkit-animation-duration: 1s;
  animation-name: tscatch01;
  -webkit-animation-name: tscatch01;
  animation-iteration-count:1;
  -webkit-animation-iteration-count:1;
  animation-fill-mode:forwards;
  -webkit-animation-fill-mode:forwards;
  margin-left:10%;
}

/* Catch02 */
.tscontents p.tscatch02 {
  width:100%;
  height: auto;
  display: block;
  font-size: clamp(40px, 10vw, 200px);
  font-family: var(--font-en);
  font-weight: 700;
  line-height: 1em;
  letter-spacing: -0.03em;
  color:var(--color-black);
  opacity: 0;
  margin-bottom:0.3em;
  order:2;
  animation-delay: 2.5s;
  -webkit-animation-delay: 2.5s;
  animation-duration: 1s;
  -webkit-animation-duration: 1s;
  animation-name: tscatch02;
  -webkit-animation-name: tscatch02;
  animation-iteration-count:1;
  -webkit-animation-iteration-count:1;
  animation-fill-mode:forwards;
  -webkit-animation-fill-mode:forwards;
  margin-left:10%;
}

/* Catch03 */
.tscontents h2.tscatch03 {
  display: inline;
  font-size: clamp(14px, 2vw, 24px);
  font-weight: 500;
  line-height: 1.5em;
  letter-spacing: 0em;
  color:var(--color-black);
  opacity: 0;
  margin-bottom:0;
  order:3;
  animation-delay: 3s;
  -webkit-animation-delay: 3s;
  animation-duration: 1s;
  -webkit-animation-duration: 1s;
  animation-name: tscatch03;
  -webkit-animation-name: tscatch03;
  animation-iteration-count:1;
  -webkit-animation-iteration-count:1;
  animation-fill-mode:forwards;
  -webkit-animation-fill-mode:forwards;
  margin-left:10%;
}

/* Catch04 */
.tscontents h3.tscatch04 {
  font-size: clamp(14px, 2vw, 24px);
  font-weight: 500;
  line-height: 1.5em;
  letter-spacing: 0em;
  color:var(--color-black);
  opacity: 0;
  margin-bottom:0;
  order:4;
  animation-delay: 3.2s;
  -webkit-animation-delay: 3.2s;
  animation-duration: 1s;
  -webkit-animation-duration: 1s;
  animation-name: tscatch04;
  -webkit-animation-name: tscatch04;
  animation-iteration-count:1;
  -webkit-animation-iteration-count:1;
  animation-fill-mode:forwards;
  -webkit-animation-fill-mode:forwards;
  margin-left:10%;
}

.tscontents h2.tscatch03 br, .tscontents h3.tscatch04 br {
  display: none;
}

/* Triangle */
.ts_triangle {
  width:40%;
  height: 30%;
  display: block;
  background: #ff2600;
background: linear-gradient(90deg, rgba(255, 38, 0, 1) 0%, rgba(242, 182, 0, 1) 100%);
  clip-path: polygon(100% 0, 0 50%, 100% 100%);
  position: absolute;
  bottom:70%;
  right:0%;
  z-index:2000;
  animation-delay: 4.5s;
  -webkit-animation-delay: 4.5s;
  animation-duration: 0.5s;
  -webkit-animation-duration: 0.5s;
  animation-name: ts_triangle_m;
  -webkit-animation-name: ts_triangle_m;
  animation-iteration-count:1;
  -webkit-animation-iteration-count:1;
  animation-fill-mode:forwards;
  -webkit-animation-fill-mode:forwards;
  opacity: 0;
}

/* bg */
.ts_bg {
  width:100%;
  height: auto;
  display: block;
  aspect-ratio: 9 / 14.5;
  background-image: url(../img/index/tsbg_m.webp);
  background-repeat: no-repeat;
  background-position: 0 bottom;
  background-size: 100% auto;
  position: absolute;
  bottom:50%;
  left:0%;
  z-index:500;
  animation-delay: 3.5s;
  -webkit-animation-delay: 3.5s;
  animation-duration: 3s;
  -webkit-animation-duration: 3s;
  animation-name: ts_bg_m;
  -webkit-animation-name: ts_bg_m;
  animation-iteration-count:1;
  -webkit-animation-iteration-count:1;
  animation-fill-mode:forwards;
  -webkit-animation-fill-mode:forwards;
  opacity: 0;
}

/* Slider */
.tslider {
animation-delay: 2.5s;
  -webkit-animation-delay: 2.5s;
  animation-duration: 1s;
  -webkit-animation-duration: 1s;
  animation-name: tslider_m;
  -webkit-animation-name: tslider_m;
  animation-iteration-count:1;
  -webkit-animation-iteration-count:1;
  animation-fill-mode:forwards;
  -webkit-animation-fill-mode:forwards;
  opacity: 0;
  left:100%;
}



}



/* ----------------------------------------------------------
Animation Settings
---------------------------------------------------------- */

@keyframes tsaccZoomRotate {
  from {
    transform: rotate(5deg) scale(1.05);
  }
  to {
    transform: rotate(0deg) scale(1.0);
  }
}

@keyframes revealMaskSlideRightToLeft {
  from {
    -webkit-mask-size: 0% 100%;
    mask-size: 0% 100%;
  }
  to {
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
  }
}



@-webkit-keyframes tscatch01 {
  0% {
  margin-left:10%;
  opacity: 0;
  }
  100% {
  margin-left:0%;
  opacity: 1;
  }
}
@keyframes tscatch01 {
  0% {
  margin-left:10%;
  opacity: 0;
  }
  100% {
  margin-left:0%;
  opacity: 1;
  }
}



@-webkit-keyframes tscatch02 {
  0% {
  margin-left:10%;
  opacity: 0;
  }
  100% {
  margin-left:0%;
  opacity: 1;
  }
}
@keyframes tscatch02 {
  0% {
  margin-left:10%;
  opacity: 0;
  }
  100% {
  margin-left:0%;
  opacity: 1;
  }
}



@-webkit-keyframes tscatch03 {
  0% {
  margin-left:10%;
  opacity: 0;
  }
  100% {
  margin-left:0%;
  opacity: 1;
  }
}
@keyframes tscatch03 {
  0% {
  margin-left:10%;
  opacity: 0;
  }
  100% {
  margin-left:0%;
  opacity: 1;
  }
}



@-webkit-keyframes tscatch04 {
  0% {
  margin-left:10%;
  opacity: 0;
  }
  100% {
  margin-left:0%;
  opacity: 1;
  }
}
@keyframes tscatch04 {
  0% {
  margin-left:10%;
  opacity: 0;
  }
  100% {
  margin-left:0%;
  opacity: 1;
  }
}


/* ts Triangle */
@-webkit-keyframes ts_triangle {
  0% {
  left:50%;
  opacity: 0;
  }
  100% {
  left:30%;
  opacity: 1;
  }
}
@keyframes ts_triangle {
  0% {
  left:50%;
  opacity: 0;
  }
  100% {
  left:30%;
  opacity: 1;
  }
}

@-webkit-keyframes ts_triangle_tab {
  0% {
  left:60%;
  opacity: 0;
  }
  100% {
  left:40%;
  opacity: 1;
  }
}
@keyframes ts_triangle_tab {
  0% {
  left:60%;
  opacity: 0;
  }
  100% {
  left:40%;
  opacity: 1;
  }
}

@-webkit-keyframes ts_triangle_m {
  0% {
  bottom:70%;
  opacity: 0;
  }
  100% {
  bottom:20%;
  opacity: 1;
  }
}
@keyframes ts_triangle_m {
  0% {
  bottom:70%;
  opacity: 0;
  }
  100% {
  bottom:20%;
  opacity: 1;
  }
}


/* ts_bg */
@-webkit-keyframes ts_bg {
  0% {
  left:15%;
  opacity: 0;
  }
  100% {
  left:5%;
  opacity: 1;
  }
}
@keyframes ts_bg {
 0% {
  left:15%;
  opacity: 0;
  }
  100% {
  left:5%;
  opacity: 1;
  }
}

@-webkit-keyframes ts_bg_tab {
  0% {
  left:35%;
  opacity: 0;
  }
  100% {
  left:20%;
  opacity: 1;
  }
}
@keyframes ts_bg_tab {
 0% {
  left:35%;
  opacity: 0;
  }
  100% {
  left:20%;
  opacity: 1;
  }
}

@-webkit-keyframes ts_bg_m {
  0% {
  bottom:50%;
  opacity: 0;
  }
  100% {
  bottom:10%;
  opacity: 1;
  }
}
@keyframes ts_bg_m {
  0% {
  bottom:50%;
  opacity: 0;
  }
  100% {
  bottom:10%;
  opacity: 1;
  }
}


/* Slider */
@-webkit-keyframes tslider {
  0% {
  left:35%;
  opacity: 0;
  }
  100% {
  left:15%;
  opacity: 1;
  }
}
@keyframes tslider {
 0% {
  left:35%;
  opacity: 0;
  }
  100% {
  left:15%;
  opacity: 1;
  }
}
@-webkit-keyframes tslider_tab {
  0% {
  left:55%;
  opacity: 0;
  }
  100% {
  left:35%;
  opacity: 1;
  }
}
@keyframes tslider_tab {
 0% {
  left:55%;
  opacity: 0;
  }
  100% {
  left:35%;
  opacity: 1;
  }
}
@-webkit-keyframes tslider_m {
  0% {
  left:100%;
  opacity: 0;
  }
  100% {
  left:0%;
  opacity: 1;
  }
}
@keyframes tslider_m {
  0% {
  left:100%;
  opacity: 0;
  }
  100% {
  left:0%;
  opacity: 1;
  }
}