@charset "UTF-8";
.jp_first .jp_first_ttl {
  position: absolute;
  top: 1%;
  right: 0;
  left: 0;
  margin: 0 auto;
  width: 90%;
}
.jp_first .jp_first_lead_01 {
  position: absolute;
  width: 80%;
  top: 27.5%;
  left: 0;
}
.jp_first .jp_first_lead_02 {
  position: absolute;
  top: 29%;
  right: 0;
  left: 0;
  margin: 0 auto;
  width: 90%;
}
.jp_first .jp_first_badge_01 {
  position: absolute;
  top: 47%;
  right: 0;
  left: 0;
  margin: 0 auto;
  width: 46%;
}
.jp_first .jp_first_badge_02 {
  position: absolute;
  top: 54.5%;
  right: auto;
  left: 5%;
  width: 46%;
}
.jp_first .jp_first_badge_03 {
  position: absolute;
  top: 54.5%;
  right: 5%;
  left: auto;
  width: 46%;
}
.jp_first .clip_wrap1 {
  position: absolute;
  top: 78.5%;
  right: 0;
  left: -3px;
  margin: 0 auto;
  width: 83%;
  height: auto;
  aspect-ratio: 1/1;
  -webkit-clip-path: polygon(40% 0%, 100% 0%, 100% 100%, 60% 100%);
          clip-path: polygon(40% 0%, 100% 0%, 100% 100%, 60% 100%);
}
.jp_first .clip_wrap1 .clip {
  position: absolute;
  width: 50%;
  height: 100%;
  top: 0;
  right: 0;
  -webkit-transition: -webkit-transform 0.5s linear;
  transition: -webkit-transform 0.5s linear;
  transition: transform 0.5s linear;
  transition: transform 0.5s linear, -webkit-transform 0.5s linear; /* アニメーションの設定 */
  background-image: url(../image/jp_first_circle.png);
  background-size: cover;
  background-position: right;
  -webkit-transform: rotate(169deg);
          transform: rotate(169deg);
  -webkit-transform-origin: left center;
          transform-origin: left center;
  opacity: 0;
}
.jp_first .clip_wrap1 .clip.move {
  -webkit-transform: rotate(349deg);
          transform: rotate(349deg);
  opacity: 1;
}
.jp_first .clip_wrap2 {
  position: absolute;
  top: 78.5%;
  right: -2px;
  left: 0;
  margin: 0 auto;
  width: 83%;
  height: auto;
  aspect-ratio: 1/1;
  -webkit-clip-path: polygon(0% 0%, 40% 0%, 60% 100%, 0% 100%);
          clip-path: polygon(0% 0%, 40% 0%, 60% 100%, 0% 100%);
}
.jp_first .clip_wrap2 .clip {
  position: absolute;
  width: 50%;
  height: 100%;
  top: 0;
  left: 0;
  -webkit-transition: -webkit-transform 0.5s linear;
  transition: -webkit-transform 0.5s linear;
  transition: transform 0.5s linear;
  transition: transform 0.5s linear, -webkit-transform 0.5s linear; /* アニメーションの設定 */
  background-image: url(../image/jp_first_circle.png);
  background-size: cover;
  background-position: left;
  -webkit-transform: rotate(169deg);
          transform: rotate(169deg);
  -webkit-transform-origin: right center;
          transform-origin: right center;
  -webkit-clip-path: polygon(80% 0, 100% 20%, 100% 100%, 0 100%, 0 0);
          clip-path: polygon(80% 0, 100% 20%, 100% 100%, 0 100%, 0 0);
  opacity: 0;
}
.jp_first .clip_wrap2 .clip.move {
  -webkit-transform: rotate(349deg);
          transform: rotate(349deg);
  opacity: 1;
}
.jp_first .fukidashi {
  -webkit-transition-duration: 0.5s;
          transition-duration: 0.5s;
  opacity: 0;
  -webkit-transform: translateY(20px);
          transform: translateY(20px);
}
.jp_first .fukidashi.move {
  opacity: 1;
  -webkit-transform: translateY(0px);
          transform: translateY(0px);
}
.jp_first .jp_first_fukidashi_01 {
  position: absolute;
  top: 78%;
  right: 0;
  left: 6%;
  width: 35%;
  -webkit-transition-delay: 0.3s;
          transition-delay: 0.3s;
}
.jp_first .jp_first_fukidashi_02 {
  position: absolute;
  top: 84%;
  right: 3%;
  left: auto;
  width: 35%;
  -webkit-transition-delay: 0.6s;
          transition-delay: 0.6s;
}
.jp_first .jp_first_fukidashi_03 {
  position: absolute;
  top: 90.5%;
  right: 0;
  left: 9%;
  width: 35%;
  -webkit-transition-delay: 0.9s;
          transition-delay: 0.9s;
}