@charset "UTF-8";
/*********トップページだけのメニューのアニメーション*************/
h1.head-logo {
  position: relative;
  /*span*/
}
h1.head-logo span {
  display: block;
  position: absolute;
}
h1.head-logo span.border-top {
  width: 100%;
  height: 3px;
  background: #FFF;
  left: 0;
  top: 0;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(0, 0, 0) 100%);
  background-size: 200% 100%;
  animation: gradientAnimation 0.2s ease infinite, main-border-top 1.6s 0.4s cubic-bezier(0, 0.56, 0.75, 0.35) forwards;
}
h1.head-logo span.border-right {
  width: 3px;
  height: 100%;
  background: #FFF;
  right: 0;
  top: 0;
  transform: scaleY(0);
  transform-origin: center top;
  background: linear-gradient(180deg, rgb(0, 0, 0) 0%, rgb(255, 255, 255) 100%);
  background-size: 100% 200%;
  animation: gradientAnimation-C 0.2s ease infinite, main-border-right 1.6s 0.4s cubic-bezier(0, 0.56, 0.75, 0.35) forwards;
}
h1.head-logo span.border-bottom {
  width: 100%;
  height: 3px;
  background: #FFF;
  left: 0;
  bottom: 0;
  transform: scaleX(0);
  transform-origin: right center;
  background: linear-gradient(90deg, rgb(0, 0, 0) 0%, rgb(255, 255, 255) 100%);
  background-size: 200% 100%;
  animation: gradientAnimation-B 0.2s ease infinite, main-border-bottom 1.6s 0.4s cubic-bezier(0, 0.56, 0.75, 0.35) forwards;
}
h1.head-logo span.border-left {
  width: 3px;
  height: 100%;
  background: #FFF;
  left: 0;
  top: 0;
  transform: scaleY(0);
  transform-origin: center bottom;
  background: linear-gradient(180deg, rgb(0, 0, 0) 0%, rgb(255, 255, 255) 100%);
  background-size: 100% 200%;
  animation: gradientAnimation-D 0.2s ease infinite, main-border-left 1.6s 0.4s cubic-bezier(0, 0.56, 0.75, 0.35) forwards;
}
h1.head-logo img {
  -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 50%, 0 50%);
          clip-path: polygon(0 50%, 100% 50%, 100% 50%, 0 50%);
  animation: image-clip-ani 1.4s 0.4s cubic-bezier(0.83, 0.24, 1, 1) forwards;
}

div.online-store a::before {
  transform-origin: left center;
  transform: scaleX(0);
  animation: online-underline 0.8s 1.8s ease forwards;
}
div.online-store a span.icon {
  opacity: 0;
  animation: online-store-icon-ani 0.6s 1.8s ease forwards;
}
div.online-store a span.txt {
  opacity: 0;
  animation: online-store-icon-txt 0.6s 1.8s ease forwards;
}

@keyframes online-underline {
  0% {
    transform: scaleX(0);
  }
  100% {
    transform: scaleX(100%);
  }
}
@keyframes online-store-icon-ani {
  0% {
    opacity: 0;
    transform: translate(100%, -50%);
  }
  100% {
    opacity: 1;
    transform: translate(0%, -50%);
  }
}
@keyframes online-store-icon-txt {
  0% {
    opacity: 0;
    transform: translate(20%, 0%);
  }
  100% {
    opacity: 1;
    transform: translate(0%, 0%);
  }
}
div.menu-wrap nav ul li a span.menu-inner {
  display: inline-block;
  overflow: visible;
}
div.menu-wrap nav ul li a span.menu-inner span {
  display: inline-block;
}
div.menu-wrap nav ul li a span.menu-inner span.top-menu-ani-A {
  opacity: 0;
  transform: translate(150%, 0);
  animation: title-txt-ani-partA 1s 0.2s ease forwards, title-txt-position-ani-partA 1s 0.2s ease forwards;
}
div.menu-wrap nav ul li a span.menu-inner span.top-menu-ani-B {
  opacity: 0;
  transform: translate(0%, -150%);
  animation: title-txt-ani-partA 1s 0.2s ease forwards, title-txt-position-ani-partB 1s 0.2s ease forwards;
}
div.menu-wrap nav ul li a span.menu-inner span.top-menu-ani-C {
  opacity: 0;
  transform: translate(-100%, 0%);
  animation: title-txt-ani-partC 1.2s 0.2s ease forwards, title-txt-position-ani-partC 1.2s 0.2s ease forwards;
}
div.menu-wrap nav ul li a span.menu-inner span.top-menu-ani-D {
  opacity: 0;
  transform: translate(100%, 100%);
  animation: title-txt-ani-partD 1.4s 0.2s ease forwards, title-txt-position-ani-partD 1.4s 0.2s ease forwards;
}
div.menu-wrap nav ul li a span.menu-inner span.top-menu-ani-E {
  opacity: 0;
  transform: translate(-100%, -100%);
  animation: title-txt-ani-partE 1.4s 0.2s ease forwards, title-txt-position-ani-partE 1.4s 0.2s ease forwards;
}

/*menu-wrap*/
@keyframes title-txt-ani-partA {
  0% {
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  30% {
    opacity: 0;
  }
  65% {
    opacity: 1;
  }
  80% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
@keyframes title-txt-ani-partB {
  0% {
    opacity: 1;
  }
  15% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  65% {
    opacity: 0;
  }
  80% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
@keyframes title-txt-ani-partC {
  0% {
    opacity: 0;
  }
  15% {
    opacity: 0.5;
  }
  30% {
    opacity: 0.8;
  }
  65% {
    opacity: 0.6;
  }
  80% {
    opacity: 0.8;
  }
  100% {
    opacity: 1;
  }
}
@keyframes title-txt-ani-partD {
  0% {
    opacity: 1;
  }
  15% {
    opacity: 0.5;
  }
  30% {
    opacity: 0.8;
  }
  65% {
    opacity: 0.6;
  }
  80% {
    opacity: 0.8;
  }
  100% {
    opacity: 1;
  }
}
@keyframes title-txt-ani-partE {
  0% {
    opacity: 0.5;
  }
  15% {
    opacity: 1;
  }
  30% {
    opacity: 0.5;
  }
  65% {
    opacity: 1;
  }
  80% {
    opacity: 0.2;
  }
  100% {
    opacity: 1;
  }
}
@keyframes title-txt-position-ani-partA {
  0% {
    transform: translate(150%, 0);
  }
  100% {
    transform: translate(0%, 0);
  }
}
@keyframes title-txt-position-ani-partB {
  0% {
    transform: translate(0%, -150%);
  }
  100% {
    transform: translate(0%, 0);
  }
}
@keyframes title-txt-position-ani-partC {
  0% {
    transform: translate(-100%, 0%);
  }
  100% {
    transform: translate(0%, 0);
  }
}
@keyframes title-txt-position-ani-partD {
  0% {
    transform: translate(100%, 100%);
  }
  100% {
    transform: translate(0%, 0);
  }
}
@keyframes title-txt-position-ani-partE {
  0% {
    transform: translate(-100%, -100%);
  }
  100% {
    transform: translate(0%, 0);
  }
}
@keyframes title-txt-position-ani-partF {
  0% {
    transform: translate(100%, 0%);
  }
  100% {
    transform: translate(0%, 0);
  }
}
/**********************/
h2.cormorant-garamond {
  font-size: 3.6rem;
  letter-spacing: -0.03em;
  text-align: center;
  font-weight: bold;
  transform: scaleX(0.9);
  margin-bottom: 6%;
}

div.right-text,
div.left-text {
  display: none;
  position: fixed;
  top: 50%; /* ビューポート高の50%位置に要素の上端を合わせる */
  transform: translateY(-50%); /* 要素自身の高さの半分だけ上にずらす */
  font-size: 0.8rem;
  line-height: 1em;
}
@media screen and (min-width: 768px) {
  div.right-text,
  div.left-text {
    display: block;
  }
}
div.right-text span,
div.left-text span {
  display: block;
  writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
}

div.left-text {
  left: 2%;
  z-index: 2;
}
@media screen and (min-width: 768px) {
  div.left-text {
    left: 0.6%;
  }
}

div.right-text {
  right: 2.5%;
  z-index: 2;
}
@media screen and (min-width: 768px) {
  div.right-text {
    right: 0.6%;
  }
}

div.main-content-wrap {
  width: 100%;
}

/*メインビジュアルに表示される最新記事部分*/
div.latest-articles-box {
  /*
  transform-origin: center center;
  transform: scale(0.5);
  animation: latest-articles-ani 2s 0.6s cubic-bezier(0.83, 0.33, 0.29, 1.06) forwards;
  */
}

@keyframes latest-articles-ani {
  0% {
    transform: scale(0.5);
    transform-origin: center center;
  }
  20% {
    transform: scale(0.5);
    transform-origin: center center;
  }
  40% {
    transform: scale(0.7);
    transform-origin: center center;
  }
  60% {
    transform: scale(0.7);
    transform-origin: center center;
  }
  100% {
    transform: scale(1);
    transform-origin: center center;
  }
}
@keyframes blackfadein-ani {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes blacktop-clip-ani {
  0% {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
            clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
  }
  50% {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
  51% {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
  100% {
    -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
            clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
  }
}
@keyframes blackbottom-clip-ani {
  0% {
    -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
            clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
  }
  50% {
    -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0);
            clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0);
  }
  51% {
    -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0);
            clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0);
  }
  100% {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
            clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
  }
}
@keyframes blackbottom-clip-ani {
  0% {
    -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
            clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
  }
  50% {
    -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0);
            clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0);
  }
  51% {
    -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0);
            clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0);
  }
  100% {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
            clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
  }
}
@keyframes image-clip-ani {
  0% {
    -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 50%, 0 50%);
            clip-path: polygon(0 50%, 100% 50%, 100% 50%, 0 50%);
  }
  50% {
    -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 50%, 0 50%);
            clip-path: polygon(0 50%, 100% 50%, 100% 50%, 0 50%);
  }
  100% {
    -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0);
            clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0);
  }
}
@keyframes title-txt-position-ani-partG {
  0% {
    transform: translate(80%, 0);
  }
  100% {
    transform: translate(0%, 0);
  }
}
@keyframes title-txt-position-ani-partH {
  0% {
    transform: translate(0%, -30%);
  }
  100% {
    transform: translate(0%, 0);
  }
}
@keyframes title-txt-position-ani-partI {
  0% {
    transform: translate(-60%, 0%);
  }
  100% {
    transform: translate(0%, 0);
  }
}
@keyframes title-txt-position-ani-partJ {
  0% {
    transform: translate(50%, 50%);
  }
  100% {
    transform: translate(0%, 0);
  }
}
@keyframes title-txt-position-ani-partK {
  0% {
    transform: translate(-50%, -50%);
  }
  100% {
    transform: translate(0%, 0);
  }
}
@keyframes title-txt-position-ani-partL {
  0% {
    transform: translate(60%, 0%);
  }
  100% {
    transform: translate(0%, 0);
  }
}
.newmain-slide {
  position: relative;
  overflow: hidden;
}

div.slide-inner-image {
  margin: 0 auto; /* 中央揃え */
  aspect-ratio: 300/450; /* アスペクト比を保持 */
  position: relative;
  width: 100%;
  height: 100%;
  overflow-y: hidden;
  /*    margin-bottom: -12%;*/
  /*span*/
}
@media screen and (min-width: 768px) {
  div.slide-inner-image {
    width: calc(100% - 4em);
    aspect-ratio: 1260/655; /* アスペクト比を保持 */
    /*        margin-bottom: -5%;*/
  }
}
div.slide-inner-image div {
  position: relative;
  width: 100%;
  height: 100%;
  -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 50%, 0 50%);
          clip-path: polygon(0 50%, 100% 50%, 100% 50%, 0 50%);
  animation: image-clip-ani 1.4s 0.4s cubic-bezier(0.83, 0.24, 1, 1) forwards;
  background: #EEE;
}
div.slide-inner-image div img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 50%, 0 50%);
          clip-path: polygon(0 50%, 100% 50%, 100% 50%, 0 50%);
  animation: image-clip-ani 1.4s 0.4s cubic-bezier(0.83, 0.24, 1, 1) forwards;
}
@media screen and (min-width: 768px) {
  div.slide-inner-image div img {
    -o-object-fit: contain;
       object-fit: contain;
  }
}
div.slide-inner-image p.worldchallengeasia {
  width: 94%;
  position: absolute;
  left: 50%;
  top: 45%;
  transform: translate(-50%, -50%);
  z-index: 5;
}
@media screen and (min-width: 768px) {
  div.slide-inner-image p.worldchallengeasia {
    width: 89%;
    max-width: 1132px;
    top: 40%;
  }
}
div.slide-inner-image p.Okayamachallengecup {
  width: 94%;
  position: absolute;
  left: 50%;
  top: 45%;
  transform: translate(-50%, -50%);
  z-index: 5;
}
@media screen and (min-width: 768px) {
  div.slide-inner-image p.Okayamachallengecup {
    width: 89%;
    max-width: 1132px;
    top: 40%;
  }
}
div.slide-inner-image p.interprotoseries {
  width: 81.4%;
  position: absolute;
  left: 50%;
  top: 45%;
  transform: translate(-50%, -50%);
  z-index: 5;
}
@media screen and (min-width: 768px) {
  div.slide-inner-image p.interprotoseries {
    width: 89%;
    top: 40%;
    max-width: 1132px;
  }
}
div.slide-inner-image p.supergt {
  width: 70%;
  position: absolute;
  left: 50%;
  top: 45%;
  transform: translate(-50%, -50%);
  z-index: 5;
}
@media screen and (min-width: 768px) {
  div.slide-inner-image p.supergt {
    width: 48.6%;
    max-width: 660px;
    top: 40%;
  }
}
div.slide-inner-image p.speedart01 {
  width: 82%;
  position: absolute;
  left: 50%;
  top: 45%;
  transform: translate(-50%, -50%);
  z-index: 5;
}
@media screen and (min-width: 768px) {
  div.slide-inner-image p.speedart01 {
    width: 58%;
    max-width: 730px;
    top: 40%;
  }
}
div.slide-inner-image p.worldchallengeasia02,
div.slide-inner-image p.interprotoseries02,
div.slide-inner-image p.Okayamachallengecup02,
div.slide-inner-image p.speedart02 {
  width: 100%;
  font-size: 1.2rem;
  font-weight: 600;
  color: #FFF;
  text-align: center;
  position: absolute;
  left: 50%;
  top: 53%;
  transform: translate(-50%, 0%);
  z-index: 5;
}
div.slide-inner-image p.worldchallengeasia02 span.spanwrap,
div.slide-inner-image p.interprotoseries02 span.spanwrap,
div.slide-inner-image p.Okayamachallengecup02 span.spanwrap,
div.slide-inner-image p.speedart02 span.spanwrap {
  display: block;
  position: relative;
}
div.slide-inner-image p.worldchallengeasia02 span.spanwrap span,
div.slide-inner-image p.interprotoseries02 span.spanwrap span,
div.slide-inner-image p.Okayamachallengecup02 span.spanwrap span,
div.slide-inner-image p.speedart02 span.spanwrap span {
  display: inline-block;
  position: relative;
}
div.slide-inner-image p.worldchallengeasia02 span.spanwrap span:nth-child(1),
div.slide-inner-image p.interprotoseries02 span.spanwrap span:nth-child(1),
div.slide-inner-image p.Okayamachallengecup02 span.spanwrap span:nth-child(1),
div.slide-inner-image p.speedart02 span.spanwrap span:nth-child(1) {
  opacity: 0;
  transform: translate(80%, 0);
  animation: title-txt-ani-partA 0.6s 1.2s ease forwards, title-txt-position-ani-partG 0.4s 1.2s ease forwards;
}
div.slide-inner-image p.worldchallengeasia02 span.spanwrap span:nth-child(2),
div.slide-inner-image p.interprotoseries02 span.spanwrap span:nth-child(2),
div.slide-inner-image p.Okayamachallengecup02 span.spanwrap span:nth-child(2),
div.slide-inner-image p.speedart02 span.spanwrap span:nth-child(2) {
  opacity: 0;
  transform: translate(0%, -30%);
  animation: title-txt-ani-partA 0.6s 1.2s ease forwards, title-txt-position-ani-partH 0.4s 1.4s ease forwards;
}
div.slide-inner-image p.worldchallengeasia02 span.spanwrap span:nth-child(3),
div.slide-inner-image p.interprotoseries02 span.spanwrap span:nth-child(3),
div.slide-inner-image p.Okayamachallengecup02 span.spanwrap span:nth-child(3),
div.slide-inner-image p.speedart02 span.spanwrap span:nth-child(3) {
  opacity: 0;
  transform: translate(-50%, 0%);
  animation: title-txt-ani-partC 0.8s 1.2s ease forwards, title-txt-position-ani-partJ 0.6s 1.2s ease forwards;
}
div.slide-inner-image p.worldchallengeasia02 span.spanwrap span:nth-child(4),
div.slide-inner-image p.interprotoseries02 span.spanwrap span:nth-child(4),
div.slide-inner-image p.Okayamachallengecup02 span.spanwrap span:nth-child(4),
div.slide-inner-image p.speedart02 span.spanwrap span:nth-child(4) {
  opacity: 0;
  transform: translate(50%, 50%);
  animation: title-txt-ani-partD 0.8s 1.2s ease forwards, title-txt-position-ani-partK 0.8s 1.2s ease forwards;
}
div.slide-inner-image p.worldchallengeasia02 span.spanwrap span:nth-child(5),
div.slide-inner-image p.interprotoseries02 span.spanwrap span:nth-child(5),
div.slide-inner-image p.Okayamachallengecup02 span.spanwrap span:nth-child(5),
div.slide-inner-image p.speedart02 span.spanwrap span:nth-child(5) {
  opacity: 0;
  transform: translate(-100%, -100%);
  animation: title-txt-ani-partE 0.8s 1.2s ease forwards, title-txt-position-ani-partL 0.8s 1.2s ease forwards;
}
div.slide-inner-image p.worldchallengeasia02 span.spanwrap span:nth-child(6),
div.slide-inner-image p.interprotoseries02 span.spanwrap span:nth-child(6),
div.slide-inner-image p.Okayamachallengecup02 span.spanwrap span:nth-child(6),
div.slide-inner-image p.speedart02 span.spanwrap span:nth-child(6) {
  opacity: 0;
  transform: translate(150%, 0);
  animation: title-txt-ani-partA 1s 1.2s ease forwards, title-txt-position-ani-partA 0.8s 1.2s ease forwards;
}
div.slide-inner-image p.worldchallengeasia02 span.spanwrap span:nth-child(7),
div.slide-inner-image p.interprotoseries02 span.spanwrap span:nth-child(7),
div.slide-inner-image p.Okayamachallengecup02 span.spanwrap span:nth-child(7),
div.slide-inner-image p.speedart02 span.spanwrap span:nth-child(7) {
  opacity: 0;
  transform: translate(0%, -150%);
  animation: title-txt-ani-partA 1s 1.2s ease forwards, title-txt-position-ani-partB 0.8s 0.8s ease forwards;
}
div.slide-inner-image p.worldchallengeasia02 span.spanwrap span:nth-child(8),
div.slide-inner-image p.interprotoseries02 span.spanwrap span:nth-child(8),
div.slide-inner-image p.Okayamachallengecup02 span.spanwrap span:nth-child(8),
div.slide-inner-image p.speedart02 span.spanwrap span:nth-child(8) {
  opacity: 0;
  transform: translate(-100%, 0%);
  animation: title-txt-ani-partC 1.2s 1.2s ease forwards, title-txt-position-ani-partC 0.8s 1.2s ease forwards;
}
div.slide-inner-image p.worldchallengeasia02 span.spanwrap span:nth-child(9),
div.slide-inner-image p.interprotoseries02 span.spanwrap span:nth-child(9),
div.slide-inner-image p.Okayamachallengecup02 span.spanwrap span:nth-child(9),
div.slide-inner-image p.speedart02 span.spanwrap span:nth-child(9) {
  opacity: 0;
  transform: translate(100%, 100%);
  animation: title-txt-ani-partD 1s 1.2s ease forwards, title-txt-position-ani-partD 1s 1.2s ease forwards;
}
div.slide-inner-image p.worldchallengeasia02 span.spanwrap span:nth-child(10),
div.slide-inner-image p.interprotoseries02 span.spanwrap span:nth-child(10),
div.slide-inner-image p.Okayamachallengecup02 span.spanwrap span:nth-child(10),
div.slide-inner-image p.speedart02 span.spanwrap span:nth-child(10) {
  opacity: 0;
  transform: translate(80%, 0);
  animation: title-txt-ani-partA 0.6s 1.2s ease forwards, title-txt-position-ani-partG 0.4s 1.2s ease forwards;
}
div.slide-inner-image p.worldchallengeasia02 span.spanwrap span:nth-child(11),
div.slide-inner-image p.interprotoseries02 span.spanwrap span:nth-child(11),
div.slide-inner-image p.Okayamachallengecup02 span.spanwrap span:nth-child(11),
div.slide-inner-image p.speedart02 span.spanwrap span:nth-child(11) {
  opacity: 0;
  transform: translate(0%, -30%);
  animation: title-txt-ani-partA 0.6s 1.2s ease forwards, title-txt-position-ani-partH 0.4s 1.4s ease forwards;
}
div.slide-inner-image p.worldchallengeasia02 span.spanwrap span:nth-child(12),
div.slide-inner-image p.interprotoseries02 span.spanwrap span:nth-child(12),
div.slide-inner-image p.Okayamachallengecup02 span.spanwrap span:nth-child(12),
div.slide-inner-image p.speedart02 span.spanwrap span:nth-child(12) {
  opacity: 0;
  transform: translate(-50%, 0%);
  animation: title-txt-ani-partC 0.8s 1.2s ease forwards, title-txt-position-ani-partJ 0.6s 1.2s ease forwards;
}
div.slide-inner-image p.worldchallengeasia02 span.spanwrap span:nth-child(13),
div.slide-inner-image p.interprotoseries02 span.spanwrap span:nth-child(13),
div.slide-inner-image p.Okayamachallengecup02 span.spanwrap span:nth-child(13),
div.slide-inner-image p.speedart02 span.spanwrap span:nth-child(13) {
  opacity: 0;
  transform: translate(50%, 50%);
  animation: title-txt-ani-partD 0.8s 1.2s ease forwards, title-txt-position-ani-partK 0.8s 1.2s ease forwards;
}
div.slide-inner-image p.worldchallengeasia02 span.spanwrap span:nth-child(14),
div.slide-inner-image p.interprotoseries02 span.spanwrap span:nth-child(14),
div.slide-inner-image p.Okayamachallengecup02 span.spanwrap span:nth-child(14),
div.slide-inner-image p.speedart02 span.spanwrap span:nth-child(14) {
  opacity: 0;
  transform: translate(-100%, -100%);
  animation: title-txt-ani-partE 0.8s 1.2s ease forwards, title-txt-position-ani-partL 0.8s 1.2s ease forwards;
}
div.slide-inner-image p.worldchallengeasia02 span.spanwrap span:nth-child(15),
div.slide-inner-image p.interprotoseries02 span.spanwrap span:nth-child(15),
div.slide-inner-image p.Okayamachallengecup02 span.spanwrap span:nth-child(15),
div.slide-inner-image p.speedart02 span.spanwrap span:nth-child(15) {
  opacity: 0;
  transform: translate(150%, 0);
  animation: title-txt-ani-partA 1s 1.2s ease forwards, title-txt-position-ani-partA 0.8s 1.2s ease forwards;
}
div.slide-inner-image p.worldchallengeasia02 span.spanwrap span:nth-child(16),
div.slide-inner-image p.interprotoseries02 span.spanwrap span:nth-child(16),
div.slide-inner-image p.Okayamachallengecup02 span.spanwrap span:nth-child(16),
div.slide-inner-image p.speedart02 span.spanwrap span:nth-child(16) {
  opacity: 0;
  transform: translate(0%, -150%);
  animation: title-txt-ani-partA 1s 1.2s ease forwards, title-txt-position-ani-partB 0.8s 0.8s ease forwards;
}
div.slide-inner-image p.worldchallengeasia02 span.spanwrap span:nth-child(17),
div.slide-inner-image p.interprotoseries02 span.spanwrap span:nth-child(17),
div.slide-inner-image p.Okayamachallengecup02 span.spanwrap span:nth-child(17),
div.slide-inner-image p.speedart02 span.spanwrap span:nth-child(17) {
  opacity: 0;
  transform: translate(-100%, 0%);
  animation: title-txt-ani-partC 1.2s 1.2s ease forwards, title-txt-position-ani-partC 0.8s 1.2s ease forwards;
}
div.slide-inner-image p.worldchallengeasia02 span.spanwrap span:nth-child(18),
div.slide-inner-image p.interprotoseries02 span.spanwrap span:nth-child(18),
div.slide-inner-image p.Okayamachallengecup02 span.spanwrap span:nth-child(18),
div.slide-inner-image p.speedart02 span.spanwrap span:nth-child(18) {
  opacity: 0;
  transform: translate(100%, 100%);
  animation: title-txt-ani-partD 1s 1.2s ease forwards, title-txt-position-ani-partD 1s 1.2s ease forwards;
}
div.slide-inner-image p.worldchallengeasia02 span.spanwrap span:nth-child(19),
div.slide-inner-image p.interprotoseries02 span.spanwrap span:nth-child(19),
div.slide-inner-image p.Okayamachallengecup02 span.spanwrap span:nth-child(19),
div.slide-inner-image p.speedart02 span.spanwrap span:nth-child(19) {
  opacity: 0;
  transform: translate(80%, 0);
  animation: title-txt-ani-partA 0.6s 1.2s ease forwards, title-txt-position-ani-partG 0.4s 1.2s ease forwards;
}
div.slide-inner-image p.worldchallengeasia02 span.spanwrap span:nth-child(20),
div.slide-inner-image p.interprotoseries02 span.spanwrap span:nth-child(20),
div.slide-inner-image p.Okayamachallengecup02 span.spanwrap span:nth-child(20),
div.slide-inner-image p.speedart02 span.spanwrap span:nth-child(20) {
  opacity: 0;
  transform: translate(0%, -30%);
  animation: title-txt-ani-partA 0.6s 1.2s ease forwards, title-txt-position-ani-partH 0.4s 1.4s ease forwards;
}
div.slide-inner-image p.worldchallengeasia02 span.spanwrap span:nth-child(21),
div.slide-inner-image p.interprotoseries02 span.spanwrap span:nth-child(21),
div.slide-inner-image p.Okayamachallengecup02 span.spanwrap span:nth-child(21),
div.slide-inner-image p.speedart02 span.spanwrap span:nth-child(21) {
  opacity: 0;
  transform: translate(-50%, 0%);
  animation: title-txt-ani-partC 0.8s 1.2s ease forwards, title-txt-position-ani-partJ 0.6s 1.2s ease forwards;
}
div.slide-inner-image p.worldchallengeasia02 span.spanwrap span:nth-child(22),
div.slide-inner-image p.interprotoseries02 span.spanwrap span:nth-child(22),
div.slide-inner-image p.Okayamachallengecup02 span.spanwrap span:nth-child(22),
div.slide-inner-image p.speedart02 span.spanwrap span:nth-child(22) {
  opacity: 0;
  transform: translate(50%, 50%);
  animation: title-txt-ani-partD 0.8s 1.2s ease forwards, title-txt-position-ani-partK 0.8s 1.2s ease forwards;
}
div.slide-inner-image p.worldchallengeasia02 span.spanwrap span:nth-child(23),
div.slide-inner-image p.interprotoseries02 span.spanwrap span:nth-child(23),
div.slide-inner-image p.Okayamachallengecup02 span.spanwrap span:nth-child(23),
div.slide-inner-image p.speedart02 span.spanwrap span:nth-child(23) {
  opacity: 0;
  transform: translate(-100%, -100%);
  animation: title-txt-ani-partE 0.8s 1.2s ease forwards, title-txt-position-ani-partL 0.8s 1.2s ease forwards;
}
div.slide-inner-image p.worldchallengeasia02 span.spanwrap span:nth-child(24),
div.slide-inner-image p.interprotoseries02 span.spanwrap span:nth-child(24),
div.slide-inner-image p.Okayamachallengecup02 span.spanwrap span:nth-child(24),
div.slide-inner-image p.speedart02 span.spanwrap span:nth-child(24) {
  opacity: 0;
  transform: translate(150%, 0);
  animation: title-txt-ani-partA 1s 1.2s ease forwards, title-txt-position-ani-partA 0.8s 1.2s ease forwards;
}
div.slide-inner-image p.worldchallengeasia02 span.spanwrap span:nth-child(25),
div.slide-inner-image p.interprotoseries02 span.spanwrap span:nth-child(25),
div.slide-inner-image p.Okayamachallengecup02 span.spanwrap span:nth-child(25),
div.slide-inner-image p.speedart02 span.spanwrap span:nth-child(25) {
  opacity: 0;
  transform: translate(0%, -150%);
  animation: title-txt-ani-partA 1s 1.2s ease forwards, title-txt-position-ani-partB 0.8s 0.8s ease forwards;
}
div.slide-inner-image p.worldchallengeasia02 span.spanwrap span:nth-child(26),
div.slide-inner-image p.interprotoseries02 span.spanwrap span:nth-child(26),
div.slide-inner-image p.Okayamachallengecup02 span.spanwrap span:nth-child(26),
div.slide-inner-image p.speedart02 span.spanwrap span:nth-child(26) {
  opacity: 0;
  transform: translate(-100%, 0%);
  animation: title-txt-ani-partC 1.2s 1.2s ease forwards, title-txt-position-ani-partC 0.8s 1.2s ease forwards;
}
div.slide-inner-image p.worldchallengeasia02 span.spanwrap span:nth-child(27),
div.slide-inner-image p.interprotoseries02 span.spanwrap span:nth-child(27),
div.slide-inner-image p.Okayamachallengecup02 span.spanwrap span:nth-child(27),
div.slide-inner-image p.speedart02 span.spanwrap span:nth-child(27) {
  opacity: 0;
  transform: translate(100%, 100%);
  animation: title-txt-ani-partD 1s 1.2s ease forwards, title-txt-position-ani-partD 1s 1.2s ease forwards;
}
div.slide-inner-image p.worldchallengeasia02 span.spanwrap span:nth-child(28),
div.slide-inner-image p.interprotoseries02 span.spanwrap span:nth-child(28),
div.slide-inner-image p.Okayamachallengecup02 span.spanwrap span:nth-child(28),
div.slide-inner-image p.speedart02 span.spanwrap span:nth-child(28) {
  opacity: 0;
  transform: translate(80%, 0);
  animation: title-txt-ani-partA 0.6s 1.2s ease forwards, title-txt-position-ani-partG 0.4s 1.2s ease forwards;
}
div.slide-inner-image p.worldchallengeasia02 span.spanwrap span:nth-child(29),
div.slide-inner-image p.interprotoseries02 span.spanwrap span:nth-child(29),
div.slide-inner-image p.Okayamachallengecup02 span.spanwrap span:nth-child(29),
div.slide-inner-image p.speedart02 span.spanwrap span:nth-child(29) {
  opacity: 0;
  transform: translate(0%, -30%);
  animation: title-txt-ani-partA 0.6s 1.2s ease forwards, title-txt-position-ani-partH 0.4s 1.4s ease forwards;
}
div.slide-inner-image p.worldchallengeasia02 span.spanwrap span:nth-child(30),
div.slide-inner-image p.interprotoseries02 span.spanwrap span:nth-child(30),
div.slide-inner-image p.Okayamachallengecup02 span.spanwrap span:nth-child(30),
div.slide-inner-image p.speedart02 span.spanwrap span:nth-child(30) {
  opacity: 0;
  transform: translate(-50%, 0%);
  animation: title-txt-ani-partC 0.8s 1.2s ease forwards, title-txt-position-ani-partJ 0.6s 1.2s ease forwards;
}
div.slide-inner-image p.worldchallengeasia02 span.spanwrap span:nth-child(31),
div.slide-inner-image p.interprotoseries02 span.spanwrap span:nth-child(31),
div.slide-inner-image p.Okayamachallengecup02 span.spanwrap span:nth-child(31),
div.slide-inner-image p.speedart02 span.spanwrap span:nth-child(31) {
  opacity: 0;
  transform: translate(50%, 50%);
  animation: title-txt-ani-partD 0.8s 1.2s ease forwards, title-txt-position-ani-partK 0.8s 1.2s ease forwards;
}
div.slide-inner-image p.worldchallengeasia02 span.spanwrap span:nth-child(32),
div.slide-inner-image p.interprotoseries02 span.spanwrap span:nth-child(32),
div.slide-inner-image p.Okayamachallengecup02 span.spanwrap span:nth-child(32),
div.slide-inner-image p.speedart02 span.spanwrap span:nth-child(32) {
  opacity: 0;
  transform: translate(-100%, -100%);
  animation: title-txt-ani-partE 0.8s 1.2s ease forwards, title-txt-position-ani-partL 0.8s 1.2s ease forwards;
}
div.slide-inner-image p.worldchallengeasia02 span.spanwrap span:nth-child(33),
div.slide-inner-image p.interprotoseries02 span.spanwrap span:nth-child(33),
div.slide-inner-image p.Okayamachallengecup02 span.spanwrap span:nth-child(33),
div.slide-inner-image p.speedart02 span.spanwrap span:nth-child(33) {
  opacity: 0;
  transform: translate(150%, 0);
  animation: title-txt-ani-partA 1s 1.2s ease forwards, title-txt-position-ani-partA 0.8s 1.2s ease forwards;
}
div.slide-inner-image p.worldchallengeasia02 span.spanwrap span:nth-child(34),
div.slide-inner-image p.interprotoseries02 span.spanwrap span:nth-child(34),
div.slide-inner-image p.Okayamachallengecup02 span.spanwrap span:nth-child(34),
div.slide-inner-image p.speedart02 span.spanwrap span:nth-child(34) {
  opacity: 0;
  transform: translate(0%, -150%);
  animation: title-txt-ani-partA 1s 1.2s ease forwards, title-txt-position-ani-partB 0.8s 0.8s ease forwards;
}
div.slide-inner-image p.worldchallengeasia02 span.spanwrap span:nth-child(35),
div.slide-inner-image p.interprotoseries02 span.spanwrap span:nth-child(35),
div.slide-inner-image p.Okayamachallengecup02 span.spanwrap span:nth-child(35),
div.slide-inner-image p.speedart02 span.spanwrap span:nth-child(35) {
  opacity: 0;
  transform: translate(-100%, 0%);
  animation: title-txt-ani-partC 1.2s 1.2s ease forwards, title-txt-position-ani-partC 0.8s 1.2s ease forwards;
}
div.slide-inner-image p.worldchallengeasia02 span.spanwrap span:nth-child(36),
div.slide-inner-image p.interprotoseries02 span.spanwrap span:nth-child(36),
div.slide-inner-image p.Okayamachallengecup02 span.spanwrap span:nth-child(36),
div.slide-inner-image p.speedart02 span.spanwrap span:nth-child(36) {
  opacity: 0;
  transform: translate(100%, 100%);
  animation: title-txt-ani-partD 1s 1.2s ease forwards, title-txt-position-ani-partD 1s 1.2s ease forwards;
}
div.slide-inner-image p.worldchallengeasia02 span.spanwrap span:nth-child(37),
div.slide-inner-image p.interprotoseries02 span.spanwrap span:nth-child(37),
div.slide-inner-image p.Okayamachallengecup02 span.spanwrap span:nth-child(37),
div.slide-inner-image p.speedart02 span.spanwrap span:nth-child(37) {
  opacity: 0;
  transform: translate(80%, 0);
  animation: title-txt-ani-partA 0.6s 1.2s ease forwards, title-txt-position-ani-partG 0.4s 1.2s ease forwards;
}
div.slide-inner-image p.worldchallengeasia02 span.spanwrap span:nth-child(38),
div.slide-inner-image p.interprotoseries02 span.spanwrap span:nth-child(38),
div.slide-inner-image p.Okayamachallengecup02 span.spanwrap span:nth-child(38),
div.slide-inner-image p.speedart02 span.spanwrap span:nth-child(38) {
  opacity: 0;
  transform: translate(0%, -30%);
  animation: title-txt-ani-partA 0.6s 1.2s ease forwards, title-txt-position-ani-partH 0.4s 1.4s ease forwards;
}
div.slide-inner-image p.worldchallengeasia02 span.spanwrap span:nth-child(39),
div.slide-inner-image p.interprotoseries02 span.spanwrap span:nth-child(39),
div.slide-inner-image p.Okayamachallengecup02 span.spanwrap span:nth-child(39),
div.slide-inner-image p.speedart02 span.spanwrap span:nth-child(39) {
  opacity: 0;
  transform: translate(-50%, 0%);
  animation: title-txt-ani-partC 0.8s 1.2s ease forwards, title-txt-position-ani-partJ 0.6s 1.2s ease forwards;
}
div.slide-inner-image p.worldchallengeasia02 span.spanwrap span:nth-child(40),
div.slide-inner-image p.interprotoseries02 span.spanwrap span:nth-child(40),
div.slide-inner-image p.Okayamachallengecup02 span.spanwrap span:nth-child(40),
div.slide-inner-image p.speedart02 span.spanwrap span:nth-child(40) {
  opacity: 0;
  transform: translate(50%, 50%);
  animation: title-txt-ani-partD 0.8s 1.2s ease forwards, title-txt-position-ani-partK 0.8s 1.2s ease forwards;
}
div.slide-inner-image p.worldchallengeasia02 span.spanwrap span:nth-child(41),
div.slide-inner-image p.interprotoseries02 span.spanwrap span:nth-child(41),
div.slide-inner-image p.Okayamachallengecup02 span.spanwrap span:nth-child(41),
div.slide-inner-image p.speedart02 span.spanwrap span:nth-child(41) {
  opacity: 0;
  transform: translate(-100%, -100%);
  animation: title-txt-ani-partE 0.8s 1.2s ease forwards, title-txt-position-ani-partL 0.8s 1.2s ease forwards;
}
div.slide-inner-image p.worldchallengeasia02 span.spanwrap span:nth-child(42),
div.slide-inner-image p.interprotoseries02 span.spanwrap span:nth-child(42),
div.slide-inner-image p.Okayamachallengecup02 span.spanwrap span:nth-child(42),
div.slide-inner-image p.speedart02 span.spanwrap span:nth-child(42) {
  opacity: 0;
  transform: translate(150%, 0);
  animation: title-txt-ani-partA 1s 1.2s ease forwards, title-txt-position-ani-partA 0.8s 1.2s ease forwards;
}
div.slide-inner-image p.worldchallengeasia02 span.spanwrap span:nth-child(43),
div.slide-inner-image p.interprotoseries02 span.spanwrap span:nth-child(43),
div.slide-inner-image p.Okayamachallengecup02 span.spanwrap span:nth-child(43),
div.slide-inner-image p.speedart02 span.spanwrap span:nth-child(43) {
  opacity: 0;
  transform: translate(0%, -150%);
  animation: title-txt-ani-partA 1s 1.2s ease forwards, title-txt-position-ani-partB 0.8s 0.8s ease forwards;
}
div.slide-inner-image p.worldchallengeasia02 span.spanwrap span:nth-child(44),
div.slide-inner-image p.interprotoseries02 span.spanwrap span:nth-child(44),
div.slide-inner-image p.Okayamachallengecup02 span.spanwrap span:nth-child(44),
div.slide-inner-image p.speedart02 span.spanwrap span:nth-child(44) {
  opacity: 0;
  transform: translate(-100%, 0%);
  animation: title-txt-ani-partC 1.2s 1.2s ease forwards, title-txt-position-ani-partC 0.8s 1.2s ease forwards;
}
div.slide-inner-image p.worldchallengeasia02 span.spanwrap span:nth-child(45),
div.slide-inner-image p.interprotoseries02 span.spanwrap span:nth-child(45),
div.slide-inner-image p.Okayamachallengecup02 span.spanwrap span:nth-child(45),
div.slide-inner-image p.speedart02 span.spanwrap span:nth-child(45) {
  opacity: 0;
  transform: translate(100%, 100%);
  animation: title-txt-ani-partD 1s 1.2s ease forwards, title-txt-position-ani-partD 1s 1.2s ease forwards;
}
@media screen and (min-width: 768px) {
  div.slide-inner-image p.worldchallengeasia02,
  div.slide-inner-image p.interprotoseries02,
  div.slide-inner-image p.Okayamachallengecup02,
  div.slide-inner-image p.speedart02 {
    font-size: 1.6rem;
    font-weight: bold;
    top: 55%;
  }
}
div.slide-inner-image p.Okayamachallengecup02 {
  top: 61%;
}
div.slide-inner-image p.interprotoseries02 {
  top: 61%;
}
div.slide-inner-image p.worldchallengeasia02 {
  top: 61%;
}
div.slide-inner-image span {
  display: block;
  position: absolute;
}
div.slide-inner-image span.border-top {
  width: 100%;
  height: 3px;
  background: #FFF;
  left: 0;
  top: 0;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(0, 0, 0) 100%);
  background-size: 200% 100%;
  animation: gradientAnimation 0.2s ease infinite, main-border-top 1.6s 0.4s cubic-bezier(0, 0.56, 0.75, 0.35) forwards;
}
div.slide-inner-image span.border-right {
  width: 3px;
  height: 100%;
  background: #FFF;
  right: 0;
  top: 0;
  transform: scaleY(0);
  transform-origin: center top;
  background: linear-gradient(180deg, rgb(0, 0, 0) 0%, rgb(255, 255, 255) 100%);
  background-size: 100% 200%;
  animation: gradientAnimation-C 0.2s ease infinite, main-border-right 1.6s 0.4s cubic-bezier(0, 0.56, 0.75, 0.35) forwards;
}
div.slide-inner-image span.border-bottom {
  width: 100%;
  height: 3px;
  background: #FFF;
  left: 0;
  bottom: 0;
  transform: scaleX(0);
  transform-origin: right center;
  background: linear-gradient(90deg, rgb(0, 0, 0) 0%, rgb(255, 255, 255) 100%);
  background-size: 200% 100%;
  animation: gradientAnimation-B 0.2s ease infinite, main-border-bottom 1.6s 0.4s cubic-bezier(0, 0.56, 0.75, 0.35) forwards;
}
div.slide-inner-image span.border-left {
  width: 3px;
  height: 100%;
  background: #FFF;
  left: 0;
  top: 0;
  transform: scaleY(0);
  transform-origin: center bottom;
  background: linear-gradient(180deg, rgb(0, 0, 0) 0%, rgb(255, 255, 255) 100%);
  background-size: 100% 200%;
  animation: gradientAnimation-D 0.2s ease infinite, main-border-left 1.6s 0.4s cubic-bezier(0, 0.56, 0.75, 0.35) forwards;
}

/*div.slide-inner-image*/
.eyecatch-image {
  width: calc(100% - 4em);
  margin: 0 auto; /* 中央揃え */
  aspect-ratio: 300/450; /* アスペクト比を保持 */
  position: relative;
  /*    margin-bottom: -12%;*/
  /*span*/
}
@media screen and (min-width: 768px) {
  .eyecatch-image {
    aspect-ratio: 1200/594; /* アスペクト比を保持 */
    /*        margin-bottom: -5%;*/
  }
}
@media screen and (min-width: 1000px) {
  .eyecatch-image {
    /*        margin-bottom: -5%;*/
  }
}
.eyecatch-image div.eyecatch-inner {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.eyecatch-image div.eyecatch-inner div.main-slide-wrapper p.speedart01 {
  width: 82%;
  position: absolute;
  left: 50%;
  top: 45%;
  transform: translate(-50%, -50%);
  z-index: 5;
}
@media screen and (min-width: 768px) {
  .eyecatch-image div.eyecatch-inner div.main-slide-wrapper p.speedart01 {
    width: 58%;
    max-width: 730px;
    top: 40%;
  }
}
.eyecatch-image div.eyecatch-inner div.main-slide-wrapper p.speedart02 {
  width: 100%;
  font-size: 1.2rem;
  font-weight: 600;
  color: #FFF;
  text-align: center;
  position: absolute;
  left: 50%;
  top: 58%;
  transform: translate(-50%, 0%);
  z-index: 5;
}
.eyecatch-image div.eyecatch-inner div.main-slide-wrapper p.speedart02 span.spanwrap {
  display: block;
  position: relative;
}
.eyecatch-image div.eyecatch-inner div.main-slide-wrapper p.speedart02 span.spanwrap span {
  display: inline-block;
  position: relative;
}
.eyecatch-image div.eyecatch-inner div.main-slide-wrapper p.speedart02 span.spanwrap span:nth-child(1) {
  opacity: 0;
  transform: translate(80%, 0);
  animation: title-txt-ani-partA 0.6s 1.2s ease forwards, title-txt-position-ani-partG 0.4s 1.2s ease forwards;
}
.eyecatch-image div.eyecatch-inner div.main-slide-wrapper p.speedart02 span.spanwrap span:nth-child(2) {
  opacity: 0;
  transform: translate(0%, -30%);
  animation: title-txt-ani-partA 0.6s 1.2s ease forwards, title-txt-position-ani-partH 0.4s 1.4s ease forwards;
}
.eyecatch-image div.eyecatch-inner div.main-slide-wrapper p.speedart02 span.spanwrap span:nth-child(3) {
  opacity: 0;
  transform: translate(-50%, 0%);
  animation: title-txt-ani-partC 0.8s 1.2s ease forwards, title-txt-position-ani-partJ 0.6s 1.2s ease forwards;
}
.eyecatch-image div.eyecatch-inner div.main-slide-wrapper p.speedart02 span.spanwrap span:nth-child(4) {
  opacity: 0;
  transform: translate(50%, 50%);
  animation: title-txt-ani-partD 0.8s 1.2s ease forwards, title-txt-position-ani-partK 0.8s 1.2s ease forwards;
}
.eyecatch-image div.eyecatch-inner div.main-slide-wrapper p.speedart02 span.spanwrap span:nth-child(5) {
  opacity: 0;
  transform: translate(-100%, -100%);
  animation: title-txt-ani-partE 0.8s 1.2s ease forwards, title-txt-position-ani-partL 0.8s 1.2s ease forwards;
}
.eyecatch-image div.eyecatch-inner div.main-slide-wrapper p.speedart02 span.spanwrap span:nth-child(6) {
  opacity: 0;
  transform: translate(150%, 0);
  animation: title-txt-ani-partA 1s 1.2s ease forwards, title-txt-position-ani-partA 0.8s 1.2s ease forwards;
}
.eyecatch-image div.eyecatch-inner div.main-slide-wrapper p.speedart02 span.spanwrap span:nth-child(7) {
  opacity: 0;
  transform: translate(0%, -150%);
  animation: title-txt-ani-partA 1s 1.2s ease forwards, title-txt-position-ani-partB 0.8s 0.8s ease forwards;
}
.eyecatch-image div.eyecatch-inner div.main-slide-wrapper p.speedart02 span.spanwrap span:nth-child(8) {
  opacity: 0;
  transform: translate(-100%, 0%);
  animation: title-txt-ani-partC 1.2s 1.2s ease forwards, title-txt-position-ani-partC 0.8s 1.2s ease forwards;
}
.eyecatch-image div.eyecatch-inner div.main-slide-wrapper p.speedart02 span.spanwrap span:nth-child(9) {
  opacity: 0;
  transform: translate(100%, 100%);
  animation: title-txt-ani-partD 1s 1.2s ease forwards, title-txt-position-ani-partD 1s 1.2s ease forwards;
}
@media screen and (min-width: 768px) {
  .eyecatch-image div.eyecatch-inner div.main-slide-wrapper p.speedart02 {
    font-size: 1.6rem;
    font-weight: bold;
    top: 55%;
  }
}
.eyecatch-image div.eyecatch-inner div.main-slide-wrapper p.speedart03 {
  width: 100%;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.8em;
  text-align: center;
  color: #FFF;
  position: absolute;
  left: 50%;
  top: 67%;
  transform: translate(-50%, 0%);
  z-index: 5;
}
@media screen and (min-width: 768px) {
  .eyecatch-image div.eyecatch-inner div.main-slide-wrapper p.speedart03 {
    top: 63%;
  }
}
.eyecatch-image div.eyecatch-inner img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 50%, 0 50%);
          clip-path: polygon(0 50%, 100% 50%, 100% 50%, 0 50%);
  animation: image-clip-ani 1.4s 0.4s cubic-bezier(0.83, 0.24, 1, 1) forwards;
}
.eyecatch-image span {
  display: block;
  position: absolute;
}
.eyecatch-image span.border-top {
  width: 100%;
  height: 3px;
  background: #FFF;
  left: 0;
  top: 0;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(0, 0, 0) 100%);
  background-size: 200% 100%;
  animation: gradientAnimation 0.2s ease infinite, main-border-top 1.6s 0.4s cubic-bezier(0, 0.56, 0.75, 0.35) forwards;
}
.eyecatch-image span.border-right {
  width: 3px;
  height: 100%;
  background: #FFF;
  right: 0;
  top: 0;
  transform: scaleY(0);
  transform-origin: center top;
  background: linear-gradient(180deg, rgb(0, 0, 0) 0%, rgb(255, 255, 255) 100%);
  background-size: 100% 200%;
  animation: gradientAnimation-C 0.2s ease infinite, main-border-right 1.6s 0.4s cubic-bezier(0, 0.56, 0.75, 0.35) forwards;
}
.eyecatch-image span.border-bottom {
  width: 100%;
  height: 3px;
  background: #FFF;
  left: 0;
  bottom: 0;
  transform: scaleX(0);
  transform-origin: right center;
  background: linear-gradient(90deg, rgb(0, 0, 0) 0%, rgb(255, 255, 255) 100%);
  background-size: 200% 100%;
  animation: gradientAnimation-B 0.2s ease infinite, main-border-bottom 1.6s 0.4s cubic-bezier(0, 0.56, 0.75, 0.35) forwards;
}
.eyecatch-image span.border-left {
  width: 3px;
  height: 100%;
  background: #FFF;
  left: 0;
  top: 0;
  transform: scaleY(0);
  transform-origin: center bottom;
  background: linear-gradient(180deg, rgb(0, 0, 0) 0%, rgb(255, 255, 255) 100%);
  background-size: 100% 200%;
  animation: gradientAnimation-D 0.2s ease infinite, main-border-left 1.6s 0.4s cubic-bezier(0, 0.56, 0.75, 0.35) forwards;
}

/*メイン部分のアニメーション*/
/**/
@keyframes gradientAnimation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 200% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}
@keyframes gradientAnimation-B {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 200% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}
@keyframes gradientAnimation-C {
  0% {
    background-position: 50% 0%;
  }
  50% {
    background-position: 50% 200%;
  }
  100% {
    background-position: 50% 100%;
  }
}
@keyframes gradientAnimation-D {
  0% {
    background-position: 50% 0%;
  }
  50% {
    background-position: 50% 200%;
  }
  100% {
    background-position: 50% 100%;
  }
}
@keyframes main-border-top {
  0% {
    transform: scaleX(0);
    transform-origin: left center;
  }
  50% {
    transform: scaleX(1);
    transform-origin: left center;
  }
  51% {
    transform: scaleX(1);
    transform-origin: right center;
  }
  100% {
    transform: scaleX(0);
    transform-origin: right center;
  }
}
@keyframes main-border-right {
  0% {
    transform: scaleY(0);
    transform-origin: center top;
  }
  50% {
    transform: scaleY(1);
    transform-origin: center top;
  }
  51% {
    transform: scaleY(1);
    transform-origin: center bottom;
  }
  100% {
    transform: scaleY(0);
    transform-origin: center bottom;
  }
}
@keyframes main-border-bottom {
  0% {
    transform: scaleX(0);
    transform-origin: right center;
  }
  50% {
    transform: scaleX(1);
    transform-origin: right center;
  }
  51% {
    transform: scaleX(1);
    transform-origin: left center;
  }
  100% {
    transform: scaleX(0);
    transform-origin: left center;
  }
}
@keyframes main-border-left {
  0% {
    transform: scaleY(0);
    transform-origin: center bottom;
  }
  50% {
    transform: scaleY(1);
    transform-origin: center bottom;
  }
  51% {
    transform: scaleY(1);
    transform-origin: center top;
  }
  100% {
    transform: scaleY(0);
    transform-origin: center top;
  }
}
@keyframes latest-information-bg-ani {
  0% {
    -webkit-clip-path: polygon(0 100%, 0 100%, 0 0, 0 0);
            clip-path: polygon(0 100%, 0 100%, 0 0, 0 0);
  }
  100% {
    -webkit-clip-path: polygon(100% 100%, 0 100%, 0 0, 100% 0);
            clip-path: polygon(100% 100%, 0 100%, 0 0, 100% 0);
  }
}
/*メイン部分のアニメーション*/
/**/
div.latest-information-box {
  width: 90%;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  opacity: 1;
}
div.latest-information-box h3 {
  width: 80%;
  margin: 0 auto;
  font-size: 1.125rem;
  line-height: 1.4em;
  text-align: center;
  padding-top: 2%;
  margin-bottom: 4%;
}
@media screen and (min-width: 768px) {
  div.latest-information-box h3 {
    font-size: 28px;
    line-height: 1.3em;
    padding-top: 1%;
    margin-bottom: 10px;
  }
}
@media screen and (min-width: 1000px) {
  div.latest-information-box h3 {
    font-size: 35px;
    margin-bottom: 15px;
  }
}
div.latest-information-box p.excerpt-txt {
  text-align: center;
  word-break: break-all;
  font-size: 0.875rem;
  line-height: 1.6em;
}
@media screen and (min-width: 768px) {
  div.latest-information-box p.excerpt-txt {
    text-align: center;
  }
}
div.latest-information-box div.author-box {
  word-break: break-all;
  font-size: 0.75rem;
  line-height: 1.6em;
  margin-top: 4%;
}
@media screen and (min-width: 768px) {
  div.latest-information-box div.author-box {
    margin-top: 8px;
  }
}
div.latest-information-box div.author-box p {
  text-align: center;
}

/*div.latest-information-box　メインビジュアル部分*/
div.article-category-list {
  margin-top: 2%;
}
div.article-category-list ul {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}
div.article-category-list ul li {
  text-align: center;
}
div.article-category-list ul li a {
  display: inline-block;
  min-width: 80px;
  white-space: nowrap;
  line-height: 1.5em;
  border: solid 1px #333;
  border-radius: 30px;
  font-size: 0.875rem;
  padding: 1% 15px;
  transition: all 0.4s;
  /*                pointer-events: none; /*リンク無効*/
}
@media screen and (min-width: 1000px) {
  div.article-category-list ul li a {
    min-width: 165px;
  }
}
@media screen and (min-width: 1280px) {
  div.article-category-list ul li a {
    min-width: 184px;
  }
}
div.article-category-list ul li a:hover {
  background: #333;
  color: #FFF;
  transition: all 0.4s;
}

h2.cormorant-garamond.ani span.autospan span {
  opacity: 0;
}
h2.cormorant-garamond.animation span.autospan {
  display: inline-block;
  position: relative;
}
h2.cormorant-garamond.animation span.autospan span {
  display: inline-block;
  opacity: 0;
}
h2.cormorant-garamond.animation span.autospan span:nth-child(1) {
  opacity: 0;
  transform: translate(100%, 0);
  animation: title-txt-ani-partA 0.4s 0.2s ease forwards, title-txt-position-ani-partF 0.6s 0.2s ease forwards;
}
h2.cormorant-garamond.animation span.autospan span:nth-child(2) {
  opacity: 0;
  transform: translate(100%, 0);
  animation: title-txt-ani-partB 0.4s 0.2s ease forwards, title-txt-position-ani-partB 0.6s 0.2s ease forwards;
}
h2.cormorant-garamond.animation span.autospan span:nth-child(3) {
  opacity: 0;
  transform: translate(100%, 0);
  animation: title-txt-ani-partD 0.4s 0.2s ease forwards, title-txt-position-ani-partC 0.6s 0.2s ease forwards;
}
h2.cormorant-garamond.animation span.autospan span:nth-child(4) {
  opacity: 0;
  transform: translate(100%, 0);
  animation: title-txt-ani-partD 0.4s 0.2s ease forwards, title-txt-position-ani-partF 0.6s 0.2s ease forwards;
}
h2.cormorant-garamond.animation span.autospan span:nth-child(5) {
  opacity: 0;
  transform: translate(100%, 0);
  animation: title-txt-ani-partE 0.4s 0.2s ease forwards, title-txt-position-ani-partE 0.6s 0.2s ease forwards;
}
h2.cormorant-garamond.animation span.autospan span:nth-child(6) {
  opacity: 0;
  transform: translate(100%, 0);
  animation: title-txt-ani-partA 0.4s 0.2s ease forwards, title-txt-position-ani-partF 0.6s 0.2s ease forwards;
}
h2.cormorant-garamond.animation span.autospan span:nth-child(7) {
  opacity: 0;
  transform: translate(100%, 0);
  animation: title-txt-ani-partB 0.4s 0.2s ease forwards, title-txt-position-ani-partB 0.6s 0.2s ease forwards;
}
h2.cormorant-garamond.animation span.autospan span:nth-child(8) {
  opacity: 0;
  transform: translate(100%, 0);
  animation: title-txt-ani-partD 0.4s 0.2s ease forwards, title-txt-position-ani-partC 0.6s 0.2s ease forwards;
}
h2.cormorant-garamond.animation span.autospan span:nth-child(9) {
  opacity: 0;
  transform: translate(100%, 0);
  animation: title-txt-ani-partD 0.4s 0.2s ease forwards, title-txt-position-ani-partF 0.6s 0.2s ease forwards;
}
h2.cormorant-garamond.animation span.autospan span:nth-child(10) {
  opacity: 0;
  transform: translate(100%, 0);
  animation: title-txt-ani-partE 0.4s 0.2s ease forwards, title-txt-position-ani-partE 0.6s 0.2s ease forwards;
}
h2.cormorant-garamond.animation span.autospan span:nth-child(11) {
  opacity: 0;
  transform: translate(100%, 0);
  animation: title-txt-ani-partA 0.4s 0.2s ease forwards, title-txt-position-ani-partF 0.6s 0.2s ease forwards;
}
h2.cormorant-garamond.animation span.autospan span:nth-child(12) {
  opacity: 0;
  transform: translate(100%, 0);
  animation: title-txt-ani-partB 0.4s 0.2s ease forwards, title-txt-position-ani-partB 0.6s 0.2s ease forwards;
}
h2.cormorant-garamond.animation span.autospan span:nth-child(13) {
  opacity: 0;
  transform: translate(100%, 0);
  animation: title-txt-ani-partD 0.4s 0.2s ease forwards, title-txt-position-ani-partC 0.6s 0.2s ease forwards;
}
h2.cormorant-garamond.animation span.autospan span:nth-child(14) {
  opacity: 0;
  transform: translate(100%, 0);
  animation: title-txt-ani-partD 0.4s 0.2s ease forwards, title-txt-position-ani-partF 0.6s 0.2s ease forwards;
}
h2.cormorant-garamond.animation span.autospan span:nth-child(15) {
  opacity: 0;
  transform: translate(100%, 0);
  animation: title-txt-ani-partE 0.4s 0.2s ease forwards, title-txt-position-ani-partE 0.6s 0.2s ease forwards;
}
h2.cormorant-garamond.animation span.autospan span:nth-child(16) {
  opacity: 0;
  transform: translate(100%, 0);
  animation: title-txt-ani-partA 0.4s 0.2s ease forwards, title-txt-position-ani-partF 0.6s 0.2s ease forwards;
}
h2.cormorant-garamond.animation span.autospan span:nth-child(17) {
  opacity: 0;
  transform: translate(100%, 0);
  animation: title-txt-ani-partB 0.4s 0.2s ease forwards, title-txt-position-ani-partB 0.6s 0.2s ease forwards;
}
h2.cormorant-garamond.animation span.autospan span:nth-child(18) {
  opacity: 0;
  transform: translate(100%, 0);
  animation: title-txt-ani-partD 0.4s 0.2s ease forwards, title-txt-position-ani-partC 0.6s 0.2s ease forwards;
}
h2.cormorant-garamond.animation span.autospan span:nth-child(19) {
  opacity: 0;
  transform: translate(100%, 0);
  animation: title-txt-ani-partD 0.4s 0.2s ease forwards, title-txt-position-ani-partF 0.6s 0.2s ease forwards;
}
h2.cormorant-garamond.animation span.autospan span:nth-child(20) {
  opacity: 0;
  transform: translate(100%, 0);
  animation: title-txt-ani-partE 0.4s 0.2s ease forwards, title-txt-position-ani-partE 0.6s 0.2s ease forwards;
}

/***コンテンツ部分**/
section.new-article-box {
  width: calc(100% - 4em);
  max-width: 1360px;
  margin: 0 auto;
  margin-top: 16%;
  /*new-article-category-list*/
  /*div.article-list{*/
}
@media screen and (min-width: 768px) {
  section.new-article-box {
    margin-top: 80px;
  }
  section.new-article-box h2.cormorant-garamond {
    margin-bottom: 30px;
  }
}
section.new-article-box div.new-article-category-list ul {
  display: flex;
  flex-wrap: wrap;
  gap: 2%;
}
@media screen and (min-width: 768px) {
  section.new-article-box div.new-article-category-list ul {
    gap: 8px;
  }
}
section.new-article-box div.new-article-category-list ul li {
  text-align: center;
  width: 49%;
  margin-bottom: 2%;
}
@media screen and (min-width: 768px) {
  section.new-article-box div.new-article-category-list ul li {
    width: auto;
    margin-bottom: 0;
  }
}
section.new-article-box div.new-article-category-list ul li a {
  display: block;
  white-space: collapse;
  line-height: 1.4em;
  letter-spacing: -0.02em;
  border: solid 1px #333;
  border-radius: 30px;
  font-size: 0.875rem;
  padding: 1% 15px;
  transition: all 0.4s;
  position: relative;
  /*                    pointer-events: none; /*リンク無効*/
  /*@include mq(pc) {*/
}
@media screen and (min-width: 768px) {
  section.new-article-box div.new-article-category-list ul li a {
    display: inline-block;
    font-size: 0.9rem;
    min-width: 165px;
  }
  section.new-article-box div.new-article-category-list ul li a:hover {
    background: #333;
    color: #FFF;
    transition: all 0.4s;
  }
}
@media screen and (min-width: 1280px) {
  section.new-article-box div.new-article-category-list ul li a {
    min-width: 184px;
  }
}
section.new-article-box div.article-list {
  margin-top: 8%;
  /*ul*/
}
@media screen and (min-width: 768px) {
  section.new-article-box div.article-list {
    margin-top: 30px;
  }
}
section.new-article-box div.article-list ul {
  /*li*/
}
@media screen and (min-width: 768px) {
  section.new-article-box div.article-list ul {
    display: flex;
    flex-wrap: wrap;
    gap: 30px 2%;
  }
}
section.new-article-box div.article-list ul li {
  width: 100%;
  margin-bottom: 8%;
  /*a*/
  /*thumnail-imgサムネイル画像*/
}
@media screen and (min-width: 768px) {
  section.new-article-box div.article-list ul li {
    width: 32%;
    margin-bottom: 50px;
  }
}
section.new-article-box div.article-list ul li a {
  display: block;
  position: relative;
  /* @include mq(pc) */
}
@media screen and (min-width: 768px) {
  section.new-article-box div.article-list ul li a {
    /*hover*/
  }
  section.new-article-box div.article-list ul li a:hover article {
    /*div.thumnail-img*/
  }
  section.new-article-box div.article-list ul li a:hover article div.thumnail-img span.img-span::before {
    animation: img-flash 0.6s ease forwards;
  }
  section.new-article-box div.article-list ul li a:hover article div.thumnail-img span.img-span img {
    transform: scale(1.1);
    transition: all 0.6s;
    filter: grayscale(0%);
  }
  section.new-article-box div.article-list ul li a:hover article div.thumnail-img span.border-top {
    transform: scaleX(0);
    transform-origin: left center;
    background: linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(0, 0, 0) 100%);
    background-size: 200% 100%;
    animation: gradientAnimation 0.2s ease infinite, main-border-top 1.6s 0.4s cubic-bezier(0, 0.56, 0.75, 0.35) forwards;
  }
  section.new-article-box div.article-list ul li a:hover article div.thumnail-img span.border-right {
    transform: scaleY(0);
    transform-origin: center top;
    background: linear-gradient(180deg, rgb(0, 0, 0) 0%, rgb(255, 255, 255) 100%);
    background-size: 100% 200%;
    animation: gradientAnimation-C 0.2s ease infinite, main-border-right 1.6s 0.4s cubic-bezier(0, 0.56, 0.75, 0.35) forwards;
  }
  section.new-article-box div.article-list ul li a:hover article div.thumnail-img span.border-bottom {
    transform: scaleX(0);
    transform-origin: right center;
    background: linear-gradient(90deg, rgb(0, 0, 0) 0%, rgb(255, 255, 255) 100%);
    background-size: 200% 100%;
    animation: gradientAnimation-B 0.2s ease infinite, main-border-bottom 1.6s 0.4s cubic-bezier(0, 0.56, 0.75, 0.35) forwards;
  }
  section.new-article-box div.article-list ul li a:hover article div.thumnail-img span.border-left {
    transform-origin: center bottom;
    background: linear-gradient(180deg, rgb(0, 0, 0) 0%, rgb(255, 255, 255) 100%);
    background-size: 100% 200%;
    animation: gradientAnimation-D 0.2s ease infinite, main-border-left 1.6s 0.4s cubic-bezier(0, 0.56, 0.75, 0.35) forwards;
  }
  section.new-article-box div.article-list ul li a:hover h3 {
    position: relative;
    z-index: 1;
    /*                                word-break: keep-all; /* 単語の途中での改行を制御 */
    overflow-wrap: break-word; /* 必要に応じて単語を分割して改行 */
    /*
    color: #FFF;
    /*
    &::before{
        content: " ";
        display: block;
        width: 100%;
        height: 100%;
        background: #000;
        position: absolute;
        left: 0;
        top: 0;
        transform-origin: left center;
        transform: translate(0) scaleX(0);
        z-index: -1;
        animation:  bg-cartain 0.6s cubic-bezier(0, 0.56, 0.75, 0.35) forwards;
    }
        */
  }
}
section.new-article-box div.article-list ul li div.thumnail-img {
  width: 100%;
  position: relative;
  padding-top: 68.75%;
  overflow: hidden;
  /*span*/
}
section.new-article-box div.article-list ul li div.thumnail-img span.img-span {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
}
section.new-article-box div.article-list ul li div.thumnail-img span.img-span::before {
  content: " ";
  display: block;
  width: 100%;
  height: 100%;
  background: #FFF;
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(0, 0);
  z-index: 1;
  opacity: 0;
}
section.new-article-box div.article-list ul li div.thumnail-img span.img-span img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
@media screen and (min-width: 768px) {
  section.new-article-box div.article-list ul li div.thumnail-img span.img-span img {
    transition: all 0.6s;
    filter: grayscale(100%);
  }
}
section.new-article-box div.article-list ul li div.thumnail-img span.border-top, section.new-article-box div.article-list ul li div.thumnail-img span.border-right, section.new-article-box div.article-list ul li div.thumnail-img span.border-bottom, section.new-article-box div.article-list ul li div.thumnail-img span.border-left {
  display: block;
  position: absolute;
  z-index: 6;
}
section.new-article-box div.article-list ul li div.thumnail-img span.border-top {
  width: 100%;
  height: 3px;
  left: 0;
  top: 0;
}
section.new-article-box div.article-list ul li div.thumnail-img span.border-right {
  width: 3px;
  height: 100%;
  right: 0;
  top: 0;
}
section.new-article-box div.article-list ul li div.thumnail-img span.border-bottom {
  width: 100%;
  height: 3px;
  left: 0;
  bottom: 0;
}
section.new-article-box div.article-list ul li div.thumnail-img span.border-left {
  width: 3px;
  height: 100%;
  left: 0;
  top: 0;
}
section.new-article-box div.article-list ul li h3 {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.5em;
  margin-top: 3%;
  margin-bottom: 2%;
}
section.new-article-box div.article-list ul li p {
  font-size: 0.875rem;
  line-height: 1.6em;
}

/*section.new-article-box*/
@keyframes bg-cartain {
  0% {
    transform: translate(0) scaleX(0);
  }
  100% {
    transform: translate(0) scaleX(1);
  }
}
@keyframes dot-move {
  0% {
    background-position: 0 0, 2px 2px;
  }
  50% {
    background-position: 4px 4px, 8px 8px; /* 中間の位置 */
  }
  100% {
    background-position: 0 0, 2px 2px; /* 最終的に元に戻る */
  }
}
@keyframes img-flash {
  0% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
}
/*
@keyframes glitch {
    0% { transform: translate(0) scaleX(0); }
    40% { transform: translate(4px, 0) scaleX(1); }
    80% { transform: translate(-4px, 0) scaleX(1); }
    100% { transform: translate(0); }
}
@keyframes glitch02 {
    0% { transform: translate(0) scaleX(0); }
    30% { transform: translate(4px, 0) scaleX(1); }
    60% { transform: translate(-4px, 0) scaleX(1); }
    100% { transform: translate(0) scaleX(0.5); }
}
    */
span.more-txtA {
  opacity: 0;
  transform: translate(100%, 0);
  animation: title-txt-ani-partA 0.6s 0.2s ease forwards, title-txt-position-ani-partF 0.6s 0.2s ease forwards;
}

span.more-txtB {
  opacity: 0;
  transform: translate(100%, 0);
  animation: title-txt-ani-partB 0.6s 0.2s ease forwards, title-txt-position-ani-partB 0.6s 0.2s ease forwards;
}

span.more-txtC {
  opacity: 0;
  transform: translate(100%, 0);
  animation: title-txt-ani-partD 0.4s 0.2s ease forwards, title-txt-position-ani-partC 0.6s 0.2s ease forwards;
}

span.more-txtD {
  opacity: 0;
  transform: translate(100%, 0);
  animation: title-txt-ani-partD 0.4s 0.2s ease forwards, title-txt-position-ani-partF 0.6s 0.2s ease forwards;
}

span.more-txtE {
  opacity: 0;
  transform: translate(100%, 0);
  animation: title-txt-ani-partE 0.4s 0.2s ease forwards, title-txt-position-ani-partE 0.6s 0.2s ease forwards;
}

@media screen and (min-width: 768px) {
  div.teamsdrivers {
    margin-top: 100px;
  }
}
div.teamsdrivers a {
  display: block;
  width: 100%;
  padding: 15% 0;
  position: relative;
  background: #999;
  z-index: 1;
  color: #FFF;
}
@media screen and (min-width: 768px) {
  div.teamsdrivers a {
    max-height: 390px;
    padding: 80px 0;
    box-sizing: border-box;
    overflow: hidden;
  }
  div.teamsdrivers a:hover div.text-box div.btn {
    transition: all 0.4s;
    background: #FFF;
  }
  div.teamsdrivers a:hover div.text-box div.btn span {
    color: #000;
  }
}
@media screen and (min-width: 1000px) {
  div.teamsdrivers a {
    padding-top: 150px;
    padding-bottom: 80px;
  }
}
div.teamsdrivers div.img-box {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, 0);
  z-index: 0;
}
div.teamsdrivers div.img-box img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
@media screen and (min-width: 1280px) {
  div.teamsdrivers div.img-box img {
    width: 100%;
    height: auto;
  }
}
div.teamsdrivers div.img-box::after {
  content: " ";
  display: block;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  mix-blend-mode: multiply;
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(0, 0);
  -webkit-clip-path: polygon(45% 0, 100% 0, 100% 100%, 0 100%, 0 90%);
          clip-path: polygon(45% 0, 100% 0, 100% 100%, 0 100%, 0 90%);
}
div.teamsdrivers div.text-box {
  position: relative;
  z-index: 2;
}
@media screen and (min-width: 768px) {
  div.teamsdrivers div.text-box h2 {
    margin-bottom: 20px;
  }
}
div.teamsdrivers div.text-box p {
  line-height: 1.5em;
  text-align: center;
}
div.teamsdrivers div.text-box div.btn {
  display: block;
  margin: 0 auto;
  width: 56%;
  background: #000;
  border: solid 1px #FFF;
  text-align: center;
}
@media screen and (min-width: 768px) {
  div.teamsdrivers div.text-box div.btn {
    max-width: 220px;
    margin-top: 20px;
    transition: all 0.4s;
  }
}
div.teamsdrivers div.text-box div.btn span {
  display: inline-block;
  color: #FFF;
}

/*div.teamsdrivers*/
/**raceambassdor**/
div.raceambassdor {
  margin-top: 15%;
  /*div.ambassador-inner*/
}
div.raceambassdor div.ambassador-inner {
  width: calc(100% - 4em);
  max-width: 1360px;
  margin: 0 auto;
  /*        background: #000;
          padding-bottom: 2%;
           @include mq(pc) {
              padding-top: 15px;
              padding-bottom: 15px;
           }
              */
  /*
  @include mq(pc) {
      width: calc(100% - 4em);
      max-width: 1360px;
      margin: 0 auto;
      a{
          display: flex;
          align-items: center;
      }
  }
      */
  /*div.wing-box01*/
  /* div.div.wing-box02*/
}
div.raceambassdor div.ambassador-inner a {
  display: block;
}
@media screen and (min-width: 768px) {
  div.raceambassdor div.ambassador-inner a {
    transition: all 0.6s;
  }
  div.raceambassdor div.ambassador-inner a:hover {
    opacity: 0.4;
    transition: all 0.6s;
  }
}
div.raceambassdor div.ambassador-inner div.wing-box01 {
  display: flex;
  align-items: center;
  padding: 5% 0;
}
@media screen and (min-width: 768px) {
  div.raceambassdor div.ambassador-inner div.wing-box01 {
    display: block;
    align-items: baseline;
    width: 37.4%;
  }
}
div.raceambassdor div.ambassador-inner div.wing-box01 h4 {
  width: 42.6%;
}
@media screen and (min-width: 768px) {
  div.raceambassdor div.ambassador-inner div.wing-box01 h4 {
    width: 44%;
    margin: 0 auto;
  }
}
div.raceambassdor div.ambassador-inner div.wing-box01 h4 span {
  display: block;
  width: 62%;
  margin: 0 auto;
}
div.raceambassdor div.ambassador-inner div.wing-box01 P {
  font-size: 0.75rem;
  line-height: 1.5em;
  width: 57.4%;
  color: #FFF;
}
@media screen and (min-width: 768px) {
  div.raceambassdor div.ambassador-inner div.wing-box01 P {
    width: 100%;
    text-align: center;
    font-size: 1.125rem;
    margin-top: 4%;
  }
}
div.raceambassdor div.ambassador-inner div.wing-box02 {
  display: flex;
}
@media screen and (min-width: 768px) {
  div.raceambassdor div.ambassador-inner div.wing-box02 {
    width: 62.6%;
  }
}
div.raceambassdor div.ambassador-inner div.wing-box02 div {
  width: 25%;
}
div.raceambassdor div.ambassador-inner div.wing-box02 div.ani {
  opacity: 0;
  transform: translate(-80%, 0);
}
div.raceambassdor div.ambassador-inner div.wing-box02 div.animation {
  animation: wing-fade-in 0.6s 0.2s ease forwards;
}
div.raceambassdor div.ambassador-inner div.wing-box02 div:nth-child(2).animation {
  animation-delay: 0.3s;
}
div.raceambassdor div.ambassador-inner div.wing-box02 div:nth-child(3).animation {
  animation-delay: 0.4s;
}
div.raceambassdor div.ambassador-inner div.wing-box02 div:nth-child(4).animation {
  animation-delay: 0.5s;
}

@keyframes wing-fade-in {
  0% {
    opacity: 0;
    transform: translate(-80%, 0);
  }
  100% {
    opacity: 1;
    transform: translate(0%, 0);
  }
}
/*******movie-gallery-wrap*********/
div.movie-gallery-wrap {
  margin-top: 15%;
}
@media screen and (min-width: 768px) {
  div.movie-gallery-wrap {
    margin-top: 100px;
  }
}
@media screen and (min-width: 768px) {
  div.movie-gallery-wrap h2 {
    margin-bottom: 25px;
  }
}
div.movie-gallery-wrap p {
  font-size: 0.8rem;
  line-height: 1.5em;
  text-align: center;
}
@media screen and (min-width: 768px) {
  div.movie-gallery-wrap p {
    font-size: 1rem;
  }
}
div.movie-gallery-wrap ul {
  width: calc(100% - 4em);
  max-width: 1360px;
  margin: 0 auto;
  margin-top: 6%;
}
@media screen and (min-width: 768px) {
  div.movie-gallery-wrap ul {
    display: flex;
    margin-top: 20px;
  }
}
div.movie-gallery-wrap ul li {
  margin-bottom: 6%;
}
@media screen and (min-width: 768px) {
  div.movie-gallery-wrap ul li {
    width: 32%;
    margin-left: 2%;
    margin-bottom: 0;
  }
  div.movie-gallery-wrap ul li:first-child {
    margin-left: 0;
  }
}
div.movie-gallery-wrap ul li div {
  position: relative;
  width: 100%;
  /*
  padding-top: 56.25%;
  a,
  iframe{
      position: absolute;
      top: 0;
      right: 0;
      width: 100%;
      height: 100%;
  }
  */
}
div.movie-gallery-wrap ul li div a {
  display: block;
}
@media screen and (min-width: 768px) {
  div.movie-gallery-wrap ul li div a:hover {
    opacity: 0.6;
    transition: all 0.4s;
  }
}

/*****online-shop-box*****/
div.online-shop-box {
  margin-top: 15%;
}
@media screen and (min-width: 768px) {
  div.online-shop-box {
    margin-top: 100px;
  }
}
@media screen and (min-width: 768px) {
  div.online-shop-box h2 {
    margin-bottom: 25px;
  }
}
div.online-shop-box p {
  font-size: 0.8rem;
  line-height: 1.5em;
  text-align: center;
}
@media screen and (min-width: 768px) {
  div.online-shop-box p {
    font-size: 1rem;
    margin-bottom: 30px;
  }
}
div.online-shop-box div.shop-item-slider-wrap { /*スマホ時はスライド、*/
  position: relative;
  overflow: hidden;
}
div.online-shop-box div.swiper-wrapper {
  padding-bottom: 8%;
}
@media screen and (min-width: 768px) {
  div.online-shop-box div.swiper-wrapper {
    width: 90%;
    max-width: 1360px;
    margin: 0 auto;
    padding-bottom: 0;
    justify-content: center;
  }
}
div.online-shop-box div.swiper-wrapper div.swiper-slide p {
  text-align: center;
  line-height: 1.5em;
}
@media screen and (min-width: 768px) {
  div.online-shop-box div.swiper-wrapper div.swiper-slide {
    width: 25%;
  }
}

.swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
  bottom: -1%;
}

.swiper-pagination-bullet-active {
  background: #000;
}

.swiper-pagination {
  display: block;
}
@media screen and (min-width: 768px) {
  .swiper-pagination {
    display: none;
  }
}

/****partnership-wrap*****/
section.partnership-wrap {
  width: calc(100% - 4em);
  max-width: 1360px;
  margin: 0 auto;
  margin-top: 16%;
  /*div.partnership-list*/
}
@media screen and (min-width: 768px) {
  section.partnership-wrap {
    margin-top: 100px;
  }
  section.partnership-wrap h2.cormorant-garamond {
    margin-bottom: 80px;
  }
  section.partnership-wrap a {
    transition: all 0.3s;
  }
  section.partnership-wrap a:hover {
    opacity: 0.4;
    transition: all 0.3s;
  }
}
section.partnership-wrap div.partnership-list {
  margin-bottom: 10%;
  /*h3*/
  /*diamond-partner*/
  /*div.platinum-partner{*/
  /*div.gold-partner*/
  /*silver-partner-list*/
}
@media screen and (min-width: 768px) {
  section.partnership-wrap div.partnership-list {
    margin-bottom: 80px;
  }
}
section.partnership-wrap div.partnership-list h3 {
  text-align: center;
  line-height: 1.5em;
  position: relative;
  z-index: 1;
  margin-bottom: 5%;
}
section.partnership-wrap div.partnership-list h3::before {
  content: " ";
  display: block;
  width: 100%;
  height: 1px;
  background: #aaa;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(0, -50%);
  z-index: -1;
}
@media screen and (min-width: 768px) {
  section.partnership-wrap div.partnership-list h3 {
    margin-bottom: 40px;
  }
}
section.partnership-wrap div.partnership-list h3 span.sub-title-inner {
  display: inline-block;
  line-height: 1.4em;
  background: #FFF;
  padding: 0 1em;
}
section.partnership-wrap div.partnership-list h3 span.sub-title-inner span.en {
  font-size: 1.2em;
}
@media screen and (min-width: 768px) {
  section.partnership-wrap div.partnership-list h3 span.sub-title-inner span.en {
    font-size: 1.75em;
  }
}
section.partnership-wrap div.partnership-list h3 span.sub-title-inner span.ja {
  font-size: 0.8em;
}
@media screen and (min-width: 768px) {
  section.partnership-wrap div.partnership-list h3 span.sub-title-inner span.ja {
    font-size: 0.875em;
  }
}
section.partnership-wrap div.partnership-list a.diamond-partner {
  display: block;
  width: 80%;
  margin: 0 auto;
  pointer-events: none;
}
@media screen and (min-width: 768px) {
  section.partnership-wrap div.partnership-list a.diamond-partner {
    width: 80%;
    max-width: 570px;
    margin: 0 auto;
  }
}
section.partnership-wrap div.partnership-list div.platinum-partner {
  /*platinum-column2*/
}
@media screen and (min-width: 768px) {
  section.partnership-wrap div.partnership-list div.platinum-partner {
    width: 80%;
    margin: 0 auto;
  }
}
section.partnership-wrap div.partnership-list div.platinum-partner a {
  display: block;
  width: 88%;
  margin: 0 auto;
  pointer-events: none;
}
@media screen and (min-width: 768px) {
  section.partnership-wrap div.partnership-list div.platinum-partner a.okatpchi {
    max-width: 570px;
  }
}
@media screen and (min-width: 768px) {
  section.partnership-wrap div.partnership-list div.platinum-partner div.platinum-column2 {
    display: flex;
    justify-content: center;
  }
  section.partnership-wrap div.partnership-list div.platinum-partner div.platinum-column2 a.okatsu {
    width: 33%;
    margin: 0;
    margin-right: 20PX;
  }
  section.partnership-wrap div.partnership-list div.platinum-partner div.platinum-column2 a.toyotalf {
    width: 33%;
    margin: 0;
  }
}
@media screen and (min-width: 768px) {
  section.partnership-wrap div.partnership-list div.platinum-partner a.ielove {
    max-width: 422px;
  }
}
@media screen and (min-width: 768px) {
  section.partnership-wrap div.partnership-list div.platinum-partner a.toyotarenta {
    max-width: 470px;
  }
}
@media screen and (min-width: 768px) {
  section.partnership-wrap div.partnership-list div.gold-partner {
    width: 80%;
    margin: 0 auto;
  }
}
@media screen and (min-width: 768px) {
  section.partnership-wrap div.partnership-list div.gold-partner ul.gold-partner-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
}
section.partnership-wrap div.partnership-list div.gold-partner ul.gold-partner-list li a {
  display: block;
  pointer-events: none;
}
@media screen and (min-width: 768px) {
  section.partnership-wrap div.partnership-list div.gold-partner ul.gold-partner-list li {
    margin-right: 30px;
  }
  section.partnership-wrap div.partnership-list div.gold-partner ul.gold-partner-list li:nth-child(3), section.partnership-wrap div.partnership-list div.gold-partner ul.gold-partner-list li:nth-child(5) {
    margin-right: 0;
  }
  section.partnership-wrap div.partnership-list div.gold-partner ul.gold-partner-list li.nxone {
    width: 22%;
  }
  section.partnership-wrap div.partnership-list div.gold-partner ul.gold-partner-list li.saintmarc {
    width: 31.8%;
  }
  section.partnership-wrap div.partnership-list div.gold-partner ul.gold-partner-list li.toctt {
    width: 20%;
  }
  section.partnership-wrap div.partnership-list div.gold-partner ul.gold-partner-list li.toyotahome {
    width: 37.8%;
  }
  section.partnership-wrap div.partnership-list div.gold-partner ul.gold-partner-list li.idomu {
    width: 37.2%;
  }
}
section.partnership-wrap div.partnership-list ul.silver-partner-list {
  display: flex;
  flex-wrap: wrap;
}
@media screen and (min-width: 768px) {
  section.partnership-wrap div.partnership-list ul.silver-partner-list {
    justify-content: center;
  }
}
section.partnership-wrap div.partnership-list ul.silver-partner-list li {
  width: 48.4%;
}
section.partnership-wrap div.partnership-list ul.silver-partner-list li a {
  pointer-events: none;
}
@media screen and (min-width: 768px) {
  section.partnership-wrap div.partnership-list ul.silver-partner-list li {
    margin-right: 30px;
    margin-bottom: 25px;
  }
  section.partnership-wrap div.partnership-list ul.silver-partner-list li.cpc {
    width: 14.8%;
  }
  section.partnership-wrap div.partnership-list ul.silver-partner-list li.konken {
    width: 17.1%;
  }
  section.partnership-wrap div.partnership-list ul.silver-partner-list li.iga {
    width: 18.2%;
  }
  section.partnership-wrap div.partnership-list ul.silver-partner-list li.aquasite {
    width: 21.1%;
  }
  section.partnership-wrap div.partnership-list ul.silver-partner-list li.natec {
    width: 19.3%;
    margin-left: calc((40.2% - 90px) / 2);
  }
  section.partnership-wrap div.partnership-list ul.silver-partner-list li.castrol {
    width: 19.3%;
  }
  section.partnership-wrap div.partnership-list ul.silver-partner-list li.jims {
    width: 8.6%;
  }
  section.partnership-wrap div.partnership-list ul.silver-partner-list li.dia {
    width: 12.6%;
    margin-right: calc((40.2% - 90px) / 2);
  }
  section.partnership-wrap div.partnership-list ul.silver-partner-list li.meiken {
    width: 12.2%;
    margin-left: calc((58.8% - 60px) / 2);
  }
  section.partnership-wrap div.partnership-list ul.silver-partner-list li.taion {
    width: 12%;
  }
  section.partnership-wrap div.partnership-list ul.silver-partner-list li.daishingroup {
    width: 17%;
    margin-right: calc((58.8% - 60px) / 2);
  }
  section.partnership-wrap div.partnership-list ul.silver-partner-list li.worldcleangroup {
    width: 9.6%;
  }
  section.partnership-wrap div.partnership-list ul.silver-partner-list li.compass {
    width: 14.5%;
  }
  section.partnership-wrap div.partnership-list ul.silver-partner-list li.oberon {
    width: 19.1%;
  }
  section.partnership-wrap div.partnership-list ul.silver-partner-list li.econtat {
    width: 11.4%;
  }
}
section.partnership-wrap div.partnership-list ul.bronze-partner-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
section.partnership-wrap div.partnership-list ul.bronze-partner-list li {
  display: block;
}
@media screen and (min-width: 768px) {
  section.partnership-wrap div.partnership-list ul.bronze-partner-list li {
    margin-bottom: 20px;
  }
}
section.partnership-wrap div.partnership-list ul.bronze-partner-list li.chugin {
  width: 30.4%;
}
@media screen and (min-width: 768px) {
  section.partnership-wrap div.partnership-list ul.bronze-partner-list li.chugin {
    width: 12%;
    margin-left: calc((43.4% - 120px) / 2);
  }
}
section.partnership-wrap div.partnership-list ul.bronze-partner-list li.obayashigumi {
  width: 30.4%;
}
@media screen and (min-width: 768px) {
  section.partnership-wrap div.partnership-list ul.bronze-partner-list li.obayashigumi {
    width: 12%;
  }
}
section.partnership-wrap div.partnership-list ul.bronze-partner-list li.usagiya {
  width: 30.4%;
}
@media screen and (min-width: 768px) {
  section.partnership-wrap div.partnership-list ul.bronze-partner-list li.usagiya {
    width: 11.6%;
  }
}
section.partnership-wrap div.partnership-list ul.bronze-partner-list li.uk {
  width: 16.6%;
}
@media screen and (min-width: 768px) {
  section.partnership-wrap div.partnership-list ul.bronze-partner-list li.uk {
    width: 6.2%;
  }
}
section.partnership-wrap div.partnership-list ul.bronze-partner-list li.ryobiresola {
  width: 40%;
}
@media screen and (min-width: 768px) {
  section.partnership-wrap div.partnership-list ul.bronze-partner-list li.ryobiresola {
    width: 14.8%;
    margin-right: calc((43.4% - 120px) / 2);
  }
}
section.partnership-wrap div.partnership-list ul.bronze-partner-list li.grand {
  width: 35%;
}
@media screen and (min-width: 768px) {
  section.partnership-wrap div.partnership-list ul.bronze-partner-list li.grand {
    width: 12%;
  }
}
section.partnership-wrap div.partnership-list ul.bronze-partner-list li.ohk {
  width: 24%;
}
@media screen and (min-width: 768px) {
  section.partnership-wrap div.partnership-list ul.bronze-partner-list li.ohk {
    width: 9%;
  }
}
section.partnership-wrap div.partnership-list ul.bronze-partner-list li.fujix {
  width: 35%;
}
@media screen and (min-width: 768px) {
  section.partnership-wrap div.partnership-list ul.bronze-partner-list li.fujix {
    width: 12.5%;
  }
}
section.partnership-wrap div.partnership-list ul.bronze-partner-list li.motul {
  width: 32.6%;
}
@media screen and (min-width: 768px) {
  section.partnership-wrap div.partnership-list ul.bronze-partner-list li.motul {
    width: 9.6%;
  }
}
section.partnership-wrap div.partnership-list ul.bronze-partner-list li.tws {
  width: 26.8%;
}
@media screen and (min-width: 768px) {
  section.partnership-wrap div.partnership-list ul.bronze-partner-list li.tws {
    width: 10%;
  }
}
section.partnership-wrap div.partnership-list ul.bronze-partner-list li.kobetoyota {
  width: 35%;
}
@media screen and (min-width: 768px) {
  section.partnership-wrap div.partnership-list ul.bronze-partner-list li.kobetoyota {
    width: 13.2%;
  }
}
section.partnership-wrap div.partnership-list ul.bronze-partner-list li.nnc {
  width: 29.5%;
}
@media screen and (min-width: 768px) {
  section.partnership-wrap div.partnership-list ul.bronze-partner-list li.nnc {
    width: 9%;
  }
}

/* モーダル内の動画コンテナを16:9の比率にする */
.modaal-video-wrap {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  .modaal-video-wrap {
    width: 80%;
  }
}

.modaal-content .video-container,
.modaal-video-container { /* modaalが自動生成するクラス名も確認 */
  position: relative;
  width: 100%;
  max-width: none;
  max-height: none;
  padding-bottom: 56.25%; /* 16:9 = 9/16 = 56.25% */
  height: 0;
  overflow: hidden;
}

/* iframe をコンテナ内にフィットさせる */
.modaal-content .video-container iframe,
.modaal-video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

div.archive-bnr {
  width: 100%;
  margin-top: 15%;
}
@media screen and (min-width: 768px) {
  div.archive-bnr {
    width: 86%;
    max-width: 1080px;
    margin: 0 auto;
    margin-top: 120px;
  }
}
div.archive-bnr a {
  display: block;
  position: relative;
}
@media screen and (min-width: 768px) {
  div.archive-bnr a:hover {
    opacity: 0.6;
    transition: all 0.4s;
  }
}
div.archive-bnr a div {
  position: absolute;
  width: 100%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
div.archive-bnr a div p {
  color: #FFF;
}
div.archive-bnr a div p.large {
  font-size: 3.6rem;
  letter-spacing: 0.1em;
  text-align: center;
  font-weight: bold;
  transform: scaleX(0.9);
}
div.archive-bnr a div p.small {
  text-align: center;
  font-weight: bold;
  margin-top: 3%;
}/*# sourceMappingURL=style.css.map */