@charset "UTF-8";
/** abe追記 **/
/** //abe追記 **/
.animation_point {
  display: block;
  height: 0;
  position: relative;
  pointer-events: none;
  z-index: 1000;
  width: 100%;
  opacity: 0;
}
.animation_point::before {
  content: "";
  width: 100%;
  height: 40px;
  background-color: red;
  position: absolute;
  left: 0;
  top: 0;
}
.animation_point.animated_on::before {
  background-color: blue;
}

@keyframes imgloop {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
.octopathtraveler0[data-ln=about] .menu-btn b {
  opacity: 1;
}
.octopathtraveler0[data-ln=about] #contents * {
  box-sizing: border-box;
}
.octopathtraveler0[data-ln=about] #contents img {
  width: 100%;
  display: block;
}
.octopathtraveler0[data-ln=about] .about-content {
  padding: 0 0 40.531vw;
}
.octopathtraveler0[data-ln=about] .about_bg {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
}
.octopathtraveler0[data-ln=about] .about_bg .about_bg_wrap {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: 0.5s;
}
.octopathtraveler0[data-ln=about] .about_bg .about_bg_wrap.active {
  opacity: 1;
}
.octopathtraveler0[data-ln=about] .about_bg .about_bg_wrap img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.octopathtraveler0[data-ln=about] .page-header {
  position: absolute;
  left: 0;
  top: 0;
}
.octopathtraveler0[data-ln=about] .pagetitle {
  position: absolute;
  top: -6.348vw;
  background: url(/octopathtraveler0/assets/img/about/bg-pagetitle.webp) no-repeat center top/100% auto;
}
.octopathtraveler0[data-ln=about] .pagetitle i {
  display: block;
  background: url(/octopathtraveler0/assets/img/common/line-pagetitle.webp) no-repeat center top/100% auto;
  width: 56.348vw;
  height: 4.688vw;
  position: absolute;
  bottom: 8.789vw;
  right: 50%;
  margin-right: 25.195vw;
}
.octopathtraveler0[data-ln=about] .pagetitle i ~ i {
  transform: rotate(180deg);
  right: auto;
  left: 50%;
  margin: 0 0 0 25.195vw;
}
.octopathtraveler0[data-ln=about] .pagetitle img {
  width: 100%;
}
.octopathtraveler0[data-ln=about] .mv img {
  transform: translateY(-6.348vw);
}
.octopathtraveler0[data-ln=about] .mv .mv-illustration {
  position: absolute;
  left: 0;
  top: 0;
  width: 125vw;
}
.octopathtraveler0[data-ln=about] .mv .mv-illustration img {
  width: 100%;
}
.octopathtraveler0[data-ln=about] .first-detail {
  text-align: center;
  margin: -11.2vw 0 0;
}
.octopathtraveler0[data-ln=about] .first-detail .catch {
  width: 88.281vw;
  margin: 0 auto;
}
.octopathtraveler0[data-ln=about] .first-detail .note {
  font-size: 2.051vw;
  font-weight: 200;
  line-height: 3.05;
  letter-spacing: 0.0656em;
  color: #fff;
  margin: 2.051vw 0 0;
}
.octopathtraveler0[data-ln=about] .box-frame {
  width: 90.137vw;
  height: 46.191vw;
  margin: 6.883vw auto 0;
  background: url("/octopathtraveler0/assets/img/about/frame01.png") no-repeat center center/100% 100%;
  padding: 6.93vw 8.301vw 1.953vw 8.301vw;
}
.octopathtraveler0[data-ln=about] .box-frame p {
  font-size: 3.223vw;
  font-weight: 200;
  line-height: 1.94;
  letter-spacing: 0.05em;
  text-align: left;
  color: #fff;
  font-feature-settings: "palt";
}
.octopathtraveler0[data-ln=about] .img-loop {
  display: flex;
  margin: 10.742vw 0 0;
}
.octopathtraveler0[data-ln=about] .img-loop .imgs {
  display: flex;
  animation: imgloop 25s linear infinite;
}
.octopathtraveler0[data-ln=about] .img-loop .imgs span {
  display: block;
  width: 63.574vw;
  height: 38.379vw;
  padding: 1.172vw;
  margin: 0 2.881vw;
  position: relative;
}
.octopathtraveler0[data-ln=about] .img-loop .imgs span:before {
  content: "";
  width: 100%;
  height: 100%;
  border: 2px solid #adb8ca;
  position: absolute;
  left: 0;
  top: 0;
}
.octopathtraveler0[data-ln=about] .img-loop .imgs span i {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
}
.octopathtraveler0[data-ln=about] .img-loop .imgs span i:before {
  content: "";
  width: 100%;
  height: 100%;
  border: 2px solid #adb8ca;
  position: absolute;
  left: 0;
  top: 0;
}
.octopathtraveler0[data-ln=about] .img-loop .imgs span img {
  width: 100%;
}
.octopathtraveler0[data-ln=about] .story {
  position: relative;
  margin: 26.172vw 0 0;
  padding: 0 0 76.172vw;
}
.octopathtraveler0[data-ln=about] .story .visual {
  position: absolute;
  left: 0;
  top: -23vw;
  z-index: 0;
}
.octopathtraveler0[data-ln=about] .story h2 {
  width: 70.605vw;
  margin: 0 auto 5.9vw;
  position: relative;
  z-index: 20;
}
.octopathtraveler0[data-ln=about] .story .text {
  position: relative;
  z-index: 20;
}
.octopathtraveler0[data-ln=about] .story .text p {
  font-size: 2.93vw;
  font-weight: 200;
  line-height: 2.07;
  letter-spacing: 0.07em;
  text-align: center;
  color: #fff;
  text-shadow: 0 0 0.586vw rgba(16, 26, 44, 0.8), 0 0 1.172vw rgba(16, 26, 44, 0.6), 0 0 2.441vw rgba(16, 26, 44, 0.8), 0 0 0.586vw rgba(16, 26, 44, 0.8), 0 0 1.172vw rgba(16, 26, 44, 0.6), 0 0 2.441vw rgba(16, 26, 44, 0.8), 0 0 0.586vw rgba(16, 26, 44, 0.8), 0 0 1.172vw rgba(16, 26, 44, 0.6), 0 0 2.441vw rgba(16, 26, 44, 0.8);
}
.octopathtraveler0[data-ln=about] .story .text p i {
  font-size: 4.443vw;
}
.octopathtraveler0[data-ln=about] .story .text p.text02 {
  margin-top: 0.853vw;
}
.octopathtraveler0[data-ln=about] .story .text p.text03 {
  margin-top: -1.2vw;
}
.octopathtraveler0[data-ln=about] .story .text p.important-text {
  font-size: 5.518vw;
  font-weight: 700;
  line-height: 1.36;
  letter-spacing: 0.06em;
  margin: 3.2vw 0 0;
  text-shadow: 0 0 0.586vw rgba(16, 26, 44, 0.8), 0 0 1.172vw rgba(16, 26, 44, 0.6), 0 0 2.441vw rgba(16, 26, 44, 0.8), 0 0 0.586vw rgba(16, 26, 44, 0.8), 0 0 1.172vw rgba(16, 26, 44, 0.6), 0 0 2.441vw rgba(16, 26, 44, 0.8);
}
.octopathtraveler0[data-ln=about] .revenge {
  padding: 2.31vw 0 0;
  position: relative;
}
.octopathtraveler0[data-ln=about] .revenge .sec-wrap01 {
  padding: 0 0 15.137vw;
}
.octopathtraveler0[data-ln=about] .revenge .sec-wrap01 .title {
  width: 75.879vw;
  margin: 5.953vw auto 0;
}
.octopathtraveler0[data-ln=about] .revenge .sec-wrap01 .text-frame {
  width: 90.137vw;
  height: 46.191vw;
  background: url("/octopathtraveler0/assets/img/about/revenge/frame.png") no-repeat center center/contain;
  margin: 6.6vw auto 0;
  font-weight: 200;
  line-height: 1.94;
  font-size: 3.223vw;
  padding: 7.5vw 8.301vw 0;
  letter-spacing: 0.05em;
}
.octopathtraveler0[data-ln=about] .revenge .sec-wrap01 .text-frame b.highlight {
  font-size: 3.711vw;
  display: inline-block;
  line-height: 1;
}
.octopathtraveler0[data-ln=about] .revenge .sec-wrap02 {
  position: relative;
  padding: 9.766vw 0 15.625vw;
}
.octopathtraveler0[data-ln=about] .revenge .sec-wrap02:before {
  content: "";
  width: 100%;
  height: 165.918vw;
  background: url("/octopathtraveler0/assets/img/about/slider/bg.png") no-repeat center center/100% auto;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
}
.octopathtraveler0[data-ln=about] .revenge .sec-wrap02:after {
  content: "";
  width: 100%;
  height: 165.918vw;
  background: url("/octopathtraveler0/assets/img/about/slider/bg.png") no-repeat center bottom/100% auto;
  position: absolute;
  left: 0;
  bottom: -37.109vw;
  z-index: -1;
}
.octopathtraveler0[data-ln=about] .revenge .sec-wrap02 h3.slider-title {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 100;
}
.octopathtraveler0[data-ln=about] .revenge .sec-wrap02 .revenge-slider-wrap {
  position: relative;
  z-index: 10;
}
.octopathtraveler0[data-ln=about] .revenge .sec-wrap02 .revenge-slider-wrap .swiper-button-prev, .octopathtraveler0[data-ln=about] .revenge .sec-wrap02 .revenge-slider-wrap .swiper-button-next {
  width: 12.598vw;
  height: 17.188vw;
  background: url("/octopathtraveler0/assets/img/about/slider/arr-btn.png") no-repeat center center/100% 100%;
  margin: 0;
  top: 111.2vw;
}
.octopathtraveler0[data-ln=about] .revenge .sec-wrap02 .revenge-slider-wrap .swiper-button-prev {
  left: 0;
}
.octopathtraveler0[data-ln=about] .revenge .sec-wrap02 .revenge-slider-wrap .swiper-button-next {
  transform: rotate(180deg);
  right: 0;
}
.octopathtraveler0[data-ln=about] .revenge .sec-wrap02 .revenge-slider {
  position: relative;
}
.octopathtraveler0[data-ln=about] .revenge .sec-wrap02 .revenge-slider .swiper-slide {
  padding: 130vw 0 0;
}
.octopathtraveler0[data-ln=about] .revenge .sec-wrap02 .revenge-slider .swiper-slide .slide-illust {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 1;
}
.octopathtraveler0[data-ln=about] .revenge .sec-wrap02 .revenge-slider .swiper-slide .profile-box {
  width: 90.137vw;
  height: 85.742vw;
  background: url("/octopathtraveler0/assets/img/about/slider/text-frame.png") no-repeat center center/contain;
  position: relative;
  z-index: 10;
  margin: 0 auto;
  padding: 26.97vw 0 0;
}
.octopathtraveler0[data-ln=about] .revenge .sec-wrap02 .revenge-slider .swiper-slide .profile-box .dot-illust {
  width: 19.629vw;
  height: 19.629vw;
  background: url("/octopathtraveler0/assets/img/about/slider/dots-base.png") no-repeat center center/contain;
  position: absolute;
  left: 4.56vw;
  top: 3.583vw;
}
.octopathtraveler0[data-ln=about] .revenge .sec-wrap02 .revenge-slider .swiper-slide .profile-box .character-names {
  width: 100%;
  height: 9.766vw;
  display: flex;
  align-items: center;
  z-index: 100;
  position: absolute;
  left: 0;
  top: 8.5vw;
  padding: 0 0 0 26.53vw;
}
.octopathtraveler0[data-ln=about] .revenge .sec-wrap02 .revenge-slider .swiper-slide .profile-box .character-names .name {
  font-size: 4.102vw;
  font-weight: 700;
  color: #03080d;
  line-height: 1;
  letter-spacing: 0.08em;
  padding: 0 4.273vw 0 0;
  position: relative;
}
.octopathtraveler0[data-ln=about] .revenge .sec-wrap02 .revenge-slider .swiper-slide .profile-box .character-names .name:before {
  content: "";
  width: 1.953vw;
  height: 1.953vw;
  background: url("/octopathtraveler0/assets/img/about/slider/name-parts.png") no-repeat center center/contain;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
.octopathtraveler0[data-ln=about] .revenge .sec-wrap02 .revenge-slider .swiper-slide .profile-box .character-names .cv {
  color: #03080d;
  font-size: 2.93vw;
  line-height: 1;
  font-weight: 700;
  padding: 0 0 0 3.223vw;
  transform: translateY(0.3vw);
}
.octopathtraveler0[data-ln=about] .revenge .sec-wrap02 .revenge-slider .swiper-slide .profile-box .character-names .cv i {
  font-size: 3.613vw;
  font-family: "Crimson Text", serif;
  font-weight: 600;
  padding: 0 2.1vw 0 0;
}
.octopathtraveler0[data-ln=about] .revenge .sec-wrap02 .revenge-slider .swiper-slide .profile-box .character-catch {
  position: relative;
  width: 73.633vw;
  padding: 0 0 4.102vw;
  margin: 0 auto 4vw;
  font-size: 5.566vw;
  font-weight: 700;
  background-image: linear-gradient(to bottom, #fff, #eee7d8);
  color: #fff;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
  letter-spacing: 0.05em;
}
.octopathtraveler0[data-ln=about] .revenge .sec-wrap02 .revenge-slider .swiper-slide .profile-box .character-catch:before {
  content: "";
  width: 100%;
  height: 2.051vw;
  background: url("/octopathtraveler0/assets/img/about/slider/frame-line.png") no-repeat center center/contain;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
.octopathtraveler0[data-ln=about] .revenge .sec-wrap02 .revenge-slider .swiper-slide .profile-box .detail-text {
  padding: 0 8.301vw;
}
.octopathtraveler0[data-ln=about] .revenge .sec-wrap02 .revenge-slider .swiper-slide .profile-box .detail-text p {
  font-size: 3.223vw;
  line-height: 1.94;
  letter-spacing: 0.05em;
  text-align: left;
  color: #fff;
}
.octopathtraveler0[data-ln=about] .revenge .sec-wrap02 .revenge-slider .swiper-slide .profile-thumb {
  width: 80.078vw;
  height: 44.434vw;
  position: relative;
  margin: 9.2vw auto 0;
}
.octopathtraveler0[data-ln=about] .revenge .sec-wrap02 .revenge-slider .swiper-slide .profile-thumb:before {
  content: "";
  width: 80.566vw;
  height: 44.531vw;
  background: url("/octopathtraveler0/assets/img/about/slider/thumb-frame.png") no-repeat center center/contain;
  position: absolute;
  left: -0.244vw;
  top: -0.293vw;
}
.octopathtraveler0[data-ln=about] .revenge .sec-wrap02 .slider-nav-wrap {
  position: relative;
  margin: 6.766vw 0 0;
}
.octopathtraveler0[data-ln=about] .revenge .sec-wrap02 .slider-nav-wrap:before {
  content: "";
  width: 100%;
  height: 16.016vw;
  background: url("/octopathtraveler0/assets/img/about/slider/line-bottom.png") no-repeat center center/auto 100%;
  position: absolute;
  left: 0;
  top: 0;
}
.octopathtraveler0[data-ln=about] .revenge .sec-wrap02 .slider-nav-wrap .slider-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18.95vw 0 0;
  gap: 0 1.367vw;
}
.octopathtraveler0[data-ln=about] .revenge .sec-wrap02 .slider-nav-wrap .slider-nav li {
  width: 17.383vw;
}
.octopathtraveler0[data-ln=about] .revenge .sec-wrap02 .slider-nav-wrap .slider-nav li a.current {
  filter: drop-shadow(0 0 0.977vw rgba(200, 238, 246, 0.8)) brightness(1.2);
}
.octopathtraveler0[data-ln=about] .revenge .sec-wrap03 {
  position: relative;
  padding: 9.766vw 0;
}
.octopathtraveler0[data-ln=about] .revenge .sec-wrap03:before {
  content: "";
  width: 100%;
  height: 388.281vw;
  background: url("/octopathtraveler0/assets/img/about/slider/bg02.png") no-repeat center center/100% auto;
  position: absolute;
  left: 0;
  top: 0.195vw;
  z-index: -1;
}
.octopathtraveler0[data-ln=about] .revenge .sec-wrap03:after {
  content: "";
  width: 100%;
  height: 388.281vw;
  background: url("/octopathtraveler0/assets/img/about/slider/bg02.png") no-repeat center bottom/100% auto;
  position: absolute;
  left: 0;
  bottom: -37.109vw;
  z-index: -1;
}
.octopathtraveler0[data-ln=about] .revenge .sec-wrap03 h3.slider-title {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 100;
}
.octopathtraveler0[data-ln=about] .revenge .sec-wrap03 .revenge-slider-wrap {
  position: relative;
  z-index: 10;
}
.octopathtraveler0[data-ln=about] .revenge .sec-wrap03 .revenge-slider-wrap .swiper-button-prev, .octopathtraveler0[data-ln=about] .revenge .sec-wrap03 .revenge-slider-wrap .swiper-button-next {
  width: 12.598vw;
  height: 17.188vw;
  background: url("/octopathtraveler0/assets/img/about/slider/arr-btn.png") no-repeat center center/100% 100%;
  margin: 0;
  top: 111.2vw;
}
.octopathtraveler0[data-ln=about] .revenge .sec-wrap03 .revenge-slider-wrap .swiper-button-prev {
  left: 0;
}
.octopathtraveler0[data-ln=about] .revenge .sec-wrap03 .revenge-slider-wrap .swiper-button-next {
  transform: rotate(180deg);
  right: 0;
}
.octopathtraveler0[data-ln=about] .revenge .sec-wrap03 .revenge-slider {
  position: relative;
}
.octopathtraveler0[data-ln=about] .revenge .sec-wrap03 .revenge-slider .swiper-slide {
  padding: 130vw 0 0;
}
.octopathtraveler0[data-ln=about] .revenge .sec-wrap03 .revenge-slider .swiper-slide .slide-illust {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 1;
}
.octopathtraveler0[data-ln=about] .revenge .sec-wrap03 .revenge-slider .swiper-slide .profile-box {
  width: 90.137vw;
  height: 85.742vw;
  background: url("/octopathtraveler0/assets/img/about/slider/text-frame02.png") no-repeat center center/contain;
  position: relative;
  z-index: 10;
  margin: 0 auto;
  padding: 26.97vw 0 0;
}
.octopathtraveler0[data-ln=about] .revenge .sec-wrap03 .revenge-slider .swiper-slide .profile-box .dot-illust {
  width: 19.629vw;
  height: 19.629vw;
  background: url("/octopathtraveler0/assets/img/about/slider/dots-base02.png") no-repeat center center/contain;
  position: absolute;
  left: 4.56vw;
  top: 3.583vw;
}
.octopathtraveler0[data-ln=about] .revenge .sec-wrap03 .revenge-slider .swiper-slide .profile-box .character-names {
  width: 100%;
  height: 9.766vw;
  display: flex;
  align-items: center;
  z-index: 100;
  position: absolute;
  left: 0;
  top: 8.5vw;
  padding: 0 0 0 26.53vw;
}
.octopathtraveler0[data-ln=about] .revenge .sec-wrap03 .revenge-slider .swiper-slide .profile-box .character-names .name {
  font-size: 4.102vw;
  font-weight: 700;
  color: #03080d;
  line-height: 1;
  letter-spacing: 0.08em;
  padding: 0 4.273vw 0 0;
  position: relative;
}
.octopathtraveler0[data-ln=about] .revenge .sec-wrap03 .revenge-slider .swiper-slide .profile-box .character-names .name:before {
  content: "";
  width: 1.953vw;
  height: 1.953vw;
  background: url("/octopathtraveler0/assets/img/about/slider/name-parts02.png") no-repeat center center/contain;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
.octopathtraveler0[data-ln=about] .revenge .sec-wrap03 .revenge-slider .swiper-slide .profile-box .character-names .cv {
  color: #03080d;
  font-size: 2.93vw;
  line-height: 1;
  font-weight: 700;
  padding: 0 0 0 3.223vw;
  transform: translateY(0.3vw);
}
.octopathtraveler0[data-ln=about] .revenge .sec-wrap03 .revenge-slider .swiper-slide .profile-box .character-names .cv i {
  font-size: 3.613vw;
  font-family: "Crimson Text", serif;
  font-weight: 600;
  padding: 0 2.1vw 0 0;
}
.octopathtraveler0[data-ln=about] .revenge .sec-wrap03 .revenge-slider .swiper-slide .profile-box .character-catch {
  position: relative;
  width: 73.633vw;
  padding: 0 0 4.102vw;
  margin: 0 auto 4vw;
  font-size: 5.566vw;
  font-weight: 700;
  background-image: linear-gradient(to bottom, #fffafd, #f4d8e6);
  color: #fff;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
  letter-spacing: 0.05em;
}
.octopathtraveler0[data-ln=about] .revenge .sec-wrap03 .revenge-slider .swiper-slide .profile-box .character-catch:before {
  content: "";
  width: 100%;
  height: 2.051vw;
  background: url("/octopathtraveler0/assets/img/about/slider/frame-line.png") no-repeat center center/contain;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
.octopathtraveler0[data-ln=about] .revenge .sec-wrap03 .revenge-slider .swiper-slide .profile-box .detail-text {
  padding: 0 8.301vw;
}
.octopathtraveler0[data-ln=about] .revenge .sec-wrap03 .revenge-slider .swiper-slide .profile-box .detail-text p {
  font-size: 3.223vw;
  line-height: 1.94;
  letter-spacing: 0.05em;
  text-align: left;
  color: #fff;
}
.octopathtraveler0[data-ln=about] .revenge .sec-wrap03 .revenge-slider .swiper-slide .profile-box02 {
  width: 90.137vw;
  height: 85.742vw;
  background: url("/octopathtraveler0/assets/img/about/slider/text-frame03.png") no-repeat center center/contain;
  position: relative;
  z-index: 10;
  margin: -14.648vw auto 0;
  padding: 26.97vw 0 0;
}
.octopathtraveler0[data-ln=about] .revenge .sec-wrap03 .revenge-slider .swiper-slide .profile-box02 .detail-text {
  padding: 0 8.301vw;
}
.octopathtraveler0[data-ln=about] .revenge .sec-wrap03 .revenge-slider .swiper-slide .profile-box02 .detail-text p {
  font-size: 3.223vw;
  line-height: 1.94;
  letter-spacing: 0.05em;
  text-align: left;
  color: #fff;
}
.octopathtraveler0[data-ln=about] .revenge .sec-wrap03 .revenge-slider .swiper-slide .profile-thumb {
  width: 80.078vw;
  height: 44.434vw;
  position: relative;
  margin: -9.961vw auto 0;
}
.octopathtraveler0[data-ln=about] .revenge .sec-wrap03 .revenge-slider .swiper-slide .profile-thumb:before {
  content: "";
  width: 80.566vw;
  height: 44.531vw;
  background: url("/octopathtraveler0/assets/img/about/slider/thumb-frame02.png") no-repeat center center/contain;
  position: absolute;
  left: -0.244vw;
  top: -0.293vw;
}
.octopathtraveler0[data-ln=about] .revenge .sec-wrap03 .slider-nav-wrap {
  position: relative;
  margin: 6.766vw 0 0;
}
.octopathtraveler0[data-ln=about] .revenge .sec-wrap03 .slider-nav-wrap:before {
  content: "";
  width: 100%;
  height: 16.016vw;
  background: url("/octopathtraveler0/assets/img/about/slider/line-bottom02.png") no-repeat center center/auto 100%;
  position: absolute;
  left: 0;
  top: 0;
}
.octopathtraveler0[data-ln=about] .revenge .sec-wrap03 .slider-nav-wrap .slider-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18.95vw 0 0;
  gap: 0 1.367vw;
}
.octopathtraveler0[data-ln=about] .revenge .sec-wrap03 .slider-nav-wrap .slider-nav li {
  width: 17.383vw;
}
.octopathtraveler0[data-ln=about] .revenge .sec-wrap03 .slider-nav-wrap .slider-nav li a.current {
  filter: drop-shadow(0 0 0.977vw rgba(200, 238, 246, 0.8)) brightness(1.2);
}
.octopathtraveler0[data-ln=about] .hd2d {
  position: relative;
  margin: -12.5vw 0 0;
  padding: 20.313vw 0 0;
}
.octopathtraveler0[data-ln=about] .hd2d h2 {
  width: 80.371vw;
  margin: 0 auto;
}
.octopathtraveler0[data-ln=about] .hd2d .visual {
  width: 86.133vw;
  margin: 3.953vw auto 0;
}
.octopathtraveler0[data-ln=about] .hd2d .text {
  padding: 0 4.883vw;
  margin: -0.781vw 0 0;
}
.octopathtraveler0[data-ln=about] .hd2d .text p {
  font-size: 3.223vw;
  font-weight: 200;
  line-height: 1.94;
  letter-spacing: 0.06em;
  text-align: center;
  color: #fff;
  text-shadow: 0 0 0.977vw rgba(17, 21, 26, 0.6), 0 0 2.344vw rgba(17, 21, 26, 0.5), 0 0 4.492vw rgba(17, 21, 26, 0.75);
}
.octopathtraveler0[data-ln=about] .hd2d .text p .highlight {
  font-size: 4.199vw;
  letter-spacing: 0.06em;
}
.octopathtraveler0[data-ln=about] .thumbs {
  margin: 6.483vw 0 0;
}
.octopathtraveler0[data-ln=about] .thumbs .thumb {
  width: 80.566vw;
  height: 44.531vw;
  margin: 0 auto;
  position: relative;
}
.octopathtraveler0[data-ln=about] .thumbs .thumb:before {
  content: "";
  width: 100%;
  height: 100%;
  background: url("/octopathtraveler0/assets/img/about/thumb-frame.png") no-repeat center center/100% 100%;
  position: absolute;
  left: 0;
  top: 0;
}
.octopathtraveler0[data-ln=about] .thumbs .thumb + .thumb {
  margin: 7.715vw auto 0;
}

@media screen and (min-width: 1024px) {
  .octopathtraveler0[data-ln=about] #revenge03 {
    scroll-margin-top: 100px;
  }
  .octopathtraveler0[data-ln=about] .about-content {
    padding: 0 0 clamp(270px, 14.063vw, 150vw);
  }
  .octopathtraveler0[data-ln=about] #contents * {
    box-sizing: border-box;
  }
  .octopathtraveler0[data-ln=about] #contents img {
    width: 100%;
    display: block;
  }
  .octopathtraveler0[data-ln=about] .about_bg {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    right: 0;
    margin: auto;
  }
  .octopathtraveler0[data-ln=about] .about_bg .about_bg_wrap {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: 0.5s;
    right: 0;
    margin: auto;
  }
  .octopathtraveler0[data-ln=about] .about_bg .about_bg_wrap.active {
    opacity: 1;
  }
  .octopathtraveler0[data-ln=about] .about_bg .about_bg_wrap img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }
  .octopathtraveler0[data-ln=about] .page-header {
    width: clamp(874px, 45.521vw, 150vw);
    position: absolute;
    left: 0;
    top: 0;
    margin: auto;
    right: 0;
  }
  .octopathtraveler0[data-ln=about] .pagetitle {
    width: clamp(1280px, 66.667vw, 150vw);
    height: clamp(206px, 10.729vw, 150vw);
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
    background: url(/octopathtraveler0/assets/img/common/bg-pagetitle@pc.webp) no-repeat center top/auto 100%;
  }
  .octopathtraveler0[data-ln=about] .pagetitle i {
    display: block;
    background: url(/octopathtraveler0/assets/img/common/line-pagetitle@pc.webp) no-repeat center top/100% auto;
    width: clamp(268px, 13.958vw, 150vw);
    height: clamp(32px, 1.667vw, 150vw);
    bottom: clamp(61px, 3.177vw, 150vw);
    margin-right: clamp(170px, 8.854vw, 150vw);
  }
  .octopathtraveler0[data-ln=about] .pagetitle i ~ i {
    transform: rotate(180deg);
    right: auto;
    left: 50%;
    margin: 0 0 0 clamp(170px, 8.854vw, 150vw);
  }
  .octopathtraveler0[data-ln=about] .pagetitle img {
    width: 100%;
  }
  .octopathtraveler0[data-ln=about] .mv {
    width: clamp(1084px, 84.688vw, 150vw);
  }
  .octopathtraveler0[data-ln=about] .mv img {
    transform: translateY(min(-24.67px, -1.927vw));
  }
  .octopathtraveler0[data-ln=about] .mv .mv-illustration {
    width: clamp(870px, 67.969vw, 150vw);
    top: clamp(126.13px, 9.854vw, 150vw);
    left: min(-73.33px, -5.729vw);
  }
  .octopathtraveler0[data-ln=about] .first-detail {
    text-align: center;
    margin: min(-493.33px, -38.542vw) 0 0;
    position: relative;
    z-index: 50;
    padding: 0 0 0 clamp(566.67px, 44.271vw, 150vw);
    transition: 1s 0s;
  }
  .octopathtraveler0[data-ln=about] .first-detail .catch {
    width: clamp(478px, 37.344vw, 150vw);
    margin: 0 auto;
  }
  .octopathtraveler0[data-ln=about] .first-detail .note {
    font-size: clamp(10.67px, 0.833vw, 150vw);
    line-height: 1;
    margin: clamp(24px, 1.875vw, 150vw) 0 0;
  }
  .octopathtraveler0[data-ln=about] .box-frame {
    width: clamp(512px, 40vw, 150vw);
    height: clamp(183.33px, 14.323vw, 150vw);
    margin: clamp(36.67px, 2.865vw, 150vw) auto 0;
    background: url("/octopathtraveler0/assets/img/about/frame01@pc.png") no-repeat center center/100% 100%;
    padding: clamp(38.67px, 3.021vw, 150vw) clamp(38.67px, 3.021vw, 150vw) clamp(18.67px, 1.458vw, 150vw) clamp(38.67px, 3.021vw, 150vw);
  }
  .octopathtraveler0[data-ln=about] .box-frame p {
    font-size: clamp(13.33px, 1.042vw, 150vw);
    font-weight: 200;
    line-height: 2.05;
    letter-spacing: 0.05em;
  }
  .octopathtraveler0[data-ln=about] .img-loop {
    display: flex;
    margin: clamp(77.33px, 6.042vw, 150vw) 0 0;
  }
  .octopathtraveler0[data-ln=about] .img-loop .imgs {
    display: flex;
    animation: imgloop 20s linear infinite;
  }
  .octopathtraveler0[data-ln=about] .img-loop .imgs span {
    width: clamp(308.67px, 24.115vw, 150vw);
    height: clamp(182.67px, 14.271vw, 150vw);
    padding: clamp(5.33px, 0.417vw, 150vw) clamp(5.33px, 0.417vw, 150vw) clamp(5.33px, 0.417vw, 150vw) clamp(6px, 0.469vw, 150vw);
    margin: 0 clamp(14.33px, 1.12vw, 150vw);
  }
  .octopathtraveler0[data-ln=about] .img-loop .imgs span:before {
    border: 3px solid #adb8ca;
  }
  .octopathtraveler0[data-ln=about] .story {
    position: relative;
    margin: clamp(272px, 14.167vw, 150vw) 0 0;
    padding: 0 0 clamp(370px, 19.271vw, 150vw);
  }
  .octopathtraveler0[data-ln=about] .story .visual {
    position: absolute;
    left: 0;
    top: min(-173.17px, -9.019vw);
    z-index: 0;
    width: clamp(1010px, 52.604vw, 150vw);
    right: 0;
    margin: auto;
  }
  .octopathtraveler0[data-ln=about] .story h2 {
    width: clamp(501px, 26.094vw, 150vw);
    margin: 0 auto clamp(38.38px, 1.999vw, 150vw);
    position: relative;
    z-index: 20;
  }
  .octopathtraveler0[data-ln=about] .story .text {
    position: relative;
    z-index: 20;
  }
  .octopathtraveler0[data-ln=about] .story .text p {
    font-size: clamp(20px, 1.042vw, 150vw);
    font-weight: 200;
    line-height: 2.05;
    letter-spacing: 0.07em;
    text-shadow: 0 0 clamp(6px, 0.313vw, 150vw) rgba(16, 26, 44, 0.8), 0 0 clamp(12px, 0.625vw, 150vw) rgba(16, 26, 44, 0.6), 0 0 clamp(25px, 1.302vw, 150vw) rgba(16, 26, 44, 0.8), 0 0 clamp(6px, 0.313vw, 150vw) rgba(16, 26, 44, 0.8), 0 0 clamp(12px, 0.625vw, 150vw) rgba(16, 26, 44, 0.6), 0 0 clamp(25px, 1.302vw, 150vw) rgba(16, 26, 44, 0.8), 0 0 clamp(6px, 0.313vw, 150vw) rgba(16, 26, 44, 0.8), 0 0 clamp(12px, 0.625vw, 150vw) rgba(16, 26, 44, 0.6), 0 0 clamp(25px, 1.302vw, 150vw) rgba(16, 26, 44, 0.8);
  }
  .octopathtraveler0[data-ln=about] .story .text p i {
    font-size: clamp(30px, 1.563vw, 150vw);
  }
  .octopathtraveler0[data-ln=about] .story .text p.text02 {
    margin-top: clamp(9px, 0.469vw, 150vw);
  }
  .octopathtraveler0[data-ln=about] .story .text p.text03 {
    margin-top: min(-7px, -0.365vw);
  }
  .octopathtraveler0[data-ln=about] .story .text p.important-text {
    font-size: clamp(37.5px, 1.953vw, 150vw);
    font-weight: 700;
    line-height: 1.36;
    letter-spacing: 0.06em;
    margin: clamp(18px, 0.938vw, 150vw) 0 0;
    text-shadow: 0 0 clamp(6px, 0.313vw, 150vw) rgba(16, 26, 44, 0.8), 0 0 clamp(12px, 0.625vw, 150vw) rgba(16, 26, 44, 0.6), 0 0 clamp(25px, 1.302vw, 150vw) rgba(16, 26, 44, 0.8), 0 0 clamp(6px, 0.313vw, 150vw) rgba(16, 26, 44, 0.8), 0 0 clamp(12px, 0.625vw, 150vw) rgba(16, 26, 44, 0.6), 0 0 clamp(25px, 1.302vw, 150vw) rgba(16, 26, 44, 0.8), 0 0 clamp(6px, 0.313vw, 150vw) rgba(16, 26, 44, 0.8), 0 0 clamp(12px, 0.625vw, 150vw) rgba(16, 26, 44, 0.6), 0 0 clamp(25px, 1.302vw, 150vw) rgba(16, 26, 44, 0.8);
  }
  .octopathtraveler0[data-ln=about] .revenge {
    padding: clamp(88.67px, 6.927vw, 150vw) 0 0;
  }
  .octopathtraveler0[data-ln=about] .revenge .sec-wrap01 {
    padding: 0 0 clamp(56.67px, 4.427vw, 150vw);
    position: relative;
  }
  .octopathtraveler0[data-ln=about] .revenge .sec-wrap01 .visual {
    width: clamp(699.33px, 54.635vw, 150vw);
    margin: 0 0 0 0;
  }
  .octopathtraveler0[data-ln=about] .revenge .sec-wrap01 .text {
    position: absolute;
    right: clamp(104.67px, 8.177vw, 150vw);
    top: clamp(90px, 7.031vw, 150vw);
  }
  .octopathtraveler0[data-ln=about] .revenge .sec-wrap01 .title {
    width: clamp(371.33px, 29.01vw, 150vw);
    margin: 0 auto 0;
  }
  .octopathtraveler0[data-ln=about] .revenge .sec-wrap01 .text-frame {
    width: clamp(512px, 40vw, 150vw);
    height: clamp(183.33px, 14.323vw, 150vw);
    background: url("/octopathtraveler0/assets/img/about/revenge/frame@pc.png") no-repeat center center/contain;
    margin: clamp(33.33px, 2.604vw, 150vw) auto 0;
    font-weight: 200;
    line-height: 2.05;
    font-size: clamp(13.33px, 1.042vw, 150vw);
    padding: 0 clamp(38.67px, 3.021vw, 150vw) 0;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
  }
  .octopathtraveler0[data-ln=about] .revenge .sec-wrap01 .text-frame b.highlight {
    font-size: clamp(16.67px, 1.302vw, 150vw);
  }
  .octopathtraveler0[data-ln=about] .revenge .sec-wrap02 {
    position: relative;
    padding: 0 0;
  }
  .octopathtraveler0[data-ln=about] .revenge .sec-wrap02:before {
    height: clamp(731.33px, 57.135vw, 150vw);
    background: url("/octopathtraveler0/assets/img/about/slider/bg@pc.png") no-repeat center center/100% auto;
    position: absolute;
    top: clamp(15.33px, 1.198vw, 150vw);
    z-index: -1;
  }
  .octopathtraveler0[data-ln=about] .revenge .sec-wrap02:after {
    content: none;
  }
  .octopathtraveler0[data-ln=about] .revenge .sec-wrap02 h3.slider-title {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 100;
  }
  .octopathtraveler0[data-ln=about] .revenge .sec-wrap02 .revenge-slider-wrap {
    position: relative;
    z-index: 10;
  }
  .octopathtraveler0[data-ln=about] .revenge .sec-wrap02 .revenge-slider-wrap .swiper-button-prev, .octopathtraveler0[data-ln=about] .revenge .sec-wrap02 .revenge-slider-wrap .swiper-button-next {
    width: clamp(24.67px, 1.927vw, 150vw);
    height: clamp(40px, 3.125vw, 150vw);
    background: url("/octopathtraveler0/assets/img/about/slider/arr-btn@pc.png") no-repeat center center/100% 100%;
    top: clamp(266.67px, 20.833vw, 150vw);
    transition: 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  .octopathtraveler0[data-ln=about] .revenge .sec-wrap02 .revenge-slider-wrap .swiper-button-prev:hover, .octopathtraveler0[data-ln=about] .revenge .sec-wrap02 .revenge-slider-wrap .swiper-button-next:hover {
    filter: drop-shadow(0 0 clamp(6px, 0.313vw, 150vw) rgba(200, 238, 246, 0.6)) brightness(1.2);
  }
  .octopathtraveler0[data-ln=about] .revenge .sec-wrap02 .revenge-slider-wrap .swiper-button-prev {
    left: clamp(13.33px, 1.042vw, 150vw);
  }
  .octopathtraveler0[data-ln=about] .revenge .sec-wrap02 .revenge-slider-wrap .swiper-button-next {
    right: clamp(13.33px, 1.042vw, 150vw);
  }
  .octopathtraveler0[data-ln=about] .revenge .sec-wrap02 .revenge-slider {
    position: relative;
    height: clamp(559.33px, 43.698vw, 150vw);
  }
  .octopathtraveler0[data-ln=about] .revenge .sec-wrap02 .revenge-slider .swiper-slide {
    padding: 0;
    height: clamp(540px, 42.188vw, 150vw);
    overflow: hidden;
  }
  .octopathtraveler0[data-ln=about] .revenge .sec-wrap02 .revenge-slider .swiper-slide .slide-illust {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 1;
  }
  .octopathtraveler0[data-ln=about] .revenge .sec-wrap02 .revenge-slider .swiper-slide .profile-box {
    width: clamp(372.67px, 29.115vw, 150vw);
    height: clamp(326.67px, 25.521vw, 150vw);
    background: url("/octopathtraveler0/assets/img/about/slider/text-frame@pc.png") no-repeat center center/contain;
    margin: clamp(120px, 9.375vw, 150vw) 0 0 clamp(66.67px, 5.208vw, 150vw);
    padding: clamp(100.67px, 7.865vw, 150vw) 0 0;
  }
  .octopathtraveler0[data-ln=about] .revenge .sec-wrap02 .revenge-slider .swiper-slide .profile-box .dot-illust {
    width: clamp(75.33px, 5.885vw, 150vw);
    height: clamp(74.67px, 5.833vw, 150vw);
    left: clamp(16.6px, 1.297vw, 150vw);
    top: clamp(16.33px, 1.276vw, 150vw);
  }
  .octopathtraveler0[data-ln=about] .revenge .sec-wrap02 .revenge-slider .swiper-slide .profile-box .character-names {
    height: clamp(39.33px, 3.073vw, 150vw);
    top: clamp(33.33px, 2.604vw, 150vw);
    padding: 0 0 0 clamp(106.67px, 8.333vw, 150vw);
  }
  .octopathtraveler0[data-ln=about] .revenge .sec-wrap02 .revenge-slider .swiper-slide .profile-box .character-names .name {
    font-size: clamp(16.67px, 1.302vw, 150vw);
    padding: 0 clamp(22.67px, 1.771vw, 150vw) 0 0;
    letter-spacing: 0.06em;
  }
  .octopathtraveler0[data-ln=about] .revenge .sec-wrap02 .revenge-slider .swiper-slide .profile-box .character-names .name:before {
    width: clamp(9.33px, 0.729vw, 150vw);
    height: clamp(9.33px, 0.729vw, 150vw);
    top: clamp(0.67px, 0.052vw, 150vw);
  }
  .octopathtraveler0[data-ln=about] .revenge .sec-wrap02 .revenge-slider .swiper-slide .profile-box .character-names .cv {
    font-size: clamp(12.67px, 0.99vw, 150vw);
    padding: 0 0 0 clamp(12px, 0.938vw, 150vw);
    transform: translateY(clamp(1.33px, 0.104vw, 150vw));
  }
  .octopathtraveler0[data-ln=about] .revenge .sec-wrap02 .revenge-slider .swiper-slide .profile-box .character-names .cv i {
    font-size: clamp(15.33px, 1.198vw, 150vw);
    padding: 0 clamp(9.33px, 0.729vw, 150vw) 0 0;
  }
  .octopathtraveler0[data-ln=about] .revenge .sec-wrap02 .revenge-slider .swiper-slide .profile-box .character-catch {
    width: clamp(292.67px, 22.865vw, 150vw);
    padding: 0 0 clamp(20.67px, 1.615vw, 150vw);
    margin: 0 auto clamp(11.33px, 0.885vw, 150vw);
    font-size: clamp(22px, 1.719vw, 150vw);
  }
  .octopathtraveler0[data-ln=about] .revenge .sec-wrap02 .revenge-slider .swiper-slide .profile-box .character-catch:before {
    width: 100%;
    height: clamp(11.33px, 0.885vw, 150vw);
  }
  .octopathtraveler0[data-ln=about] .revenge .sec-wrap02 .revenge-slider .swiper-slide .profile-box .detail-text {
    padding: 0 clamp(40px, 3.125vw, 150vw);
  }
  .octopathtraveler0[data-ln=about] .revenge .sec-wrap02 .revenge-slider .swiper-slide .profile-box .detail-text p {
    font-size: clamp(12px, 0.938vw, 150vw);
    line-height: 2;
    letter-spacing: 0.05em;
  }
  .octopathtraveler0[data-ln=about] .revenge .sec-wrap02 .revenge-slider .swiper-slide .profile-thumb {
    width: clamp(375.2px, 29.312vw, 150vw);
    height: clamp(209.87px, 16.396vw, 150vw);
    margin: 0;
    position: absolute;
    right: clamp(61.33px, 4.792vw, 150vw);
    top: clamp(180px, 14.063vw, 150vw);
    z-index: 100;
  }
  .octopathtraveler0[data-ln=about] .revenge .sec-wrap02 .revenge-slider .swiper-slide .profile-thumb:before {
    width: clamp(382.67px, 29.896vw, 150vw);
    height: clamp(211.33px, 16.51vw, 150vw);
    left: min(-4.67px, -0.365vw);
    top: min(-1.33px, -0.104vw);
  }
  .octopathtraveler0[data-ln=about] .revenge .sec-wrap02 .slider-nav-wrap {
    position: relative;
    margin: min(-56.67px, -4.427vw) 0 0;
    z-index: 30;
  }
  .octopathtraveler0[data-ln=about] .revenge .sec-wrap02 .slider-nav-wrap:before {
    height: clamp(63.33px, 4.948vw, 150vw);
    background: url("/octopathtraveler0/assets/img/about/slider/line-bottom@pc.png") no-repeat center center/auto 100%;
  }
  .octopathtraveler0[data-ln=about] .revenge .sec-wrap02 .slider-nav-wrap .slider-nav {
    padding: clamp(78px, 6.094vw, 150vw) 0 0;
    gap: 0 clamp(4px, 0.313vw, 150vw);
  }
  .octopathtraveler0[data-ln=about] .revenge .sec-wrap02 .slider-nav-wrap .slider-nav li {
    width: clamp(68.67px, 5.365vw, 150vw);
  }
  .octopathtraveler0[data-ln=about] .revenge .sec-wrap02 .slider-nav-wrap .slider-nav li a {
    transition: 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform: translateZ(0);
    will-change: filter;
    display: block;
  }
  .octopathtraveler0[data-ln=about] .revenge .sec-wrap02 .slider-nav-wrap .slider-nav li a:hover {
    filter: brightness(1.2) drop-shadow(0 0 clamp(6px, 0.313vw, 150vw) rgba(200, 238, 246, 0.6));
  }
  .octopathtraveler0[data-ln=about] .revenge .sec-wrap02 .slider-nav-wrap .slider-nav li a.current {
    filter: brightness(1.2) drop-shadow(0 0 clamp(6px, 0.313vw, 150vw) rgba(200, 238, 246, 0.6));
  }
  .octopathtraveler0[data-ln=about] .revenge .sec-wrap03 {
    position: relative;
    padding: 0 0;
    margin-top: clamp(33.33px, 2.604vw, 150vw);
  }
  .octopathtraveler0[data-ln=about] .revenge .sec-wrap03:before {
    height: clamp(731.33px, 57.135vw, 150vw);
    background: url("/octopathtraveler0/assets/img/about/slider/bg02@pc.png") no-repeat center center/100% auto;
    position: absolute;
    top: clamp(15.33px, 1.198vw, 150vw);
    z-index: -1;
  }
  .octopathtraveler0[data-ln=about] .revenge .sec-wrap03:after {
    content: none;
  }
  .octopathtraveler0[data-ln=about] .revenge .sec-wrap03 h3.slider-title {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 100;
  }
  .octopathtraveler0[data-ln=about] .revenge .sec-wrap03 .revenge-slider-wrap {
    position: relative;
    z-index: 10;
  }
  .octopathtraveler0[data-ln=about] .revenge .sec-wrap03 .revenge-slider-wrap .swiper-button-prev, .octopathtraveler0[data-ln=about] .revenge .sec-wrap03 .revenge-slider-wrap .swiper-button-next {
    width: clamp(24.67px, 1.927vw, 150vw);
    height: clamp(40px, 3.125vw, 150vw);
    background: url("/octopathtraveler0/assets/img/about/slider/arr-btn@pc.png") no-repeat center center/100% 100%;
    top: clamp(266.67px, 20.833vw, 150vw);
    transition: 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  .octopathtraveler0[data-ln=about] .revenge .sec-wrap03 .revenge-slider-wrap .swiper-button-prev:hover, .octopathtraveler0[data-ln=about] .revenge .sec-wrap03 .revenge-slider-wrap .swiper-button-next:hover {
    filter: drop-shadow(0 0 clamp(6px, 0.313vw, 150vw) rgba(200, 238, 246, 0.6)) brightness(1.2);
  }
  .octopathtraveler0[data-ln=about] .revenge .sec-wrap03 .revenge-slider-wrap .swiper-button-prev {
    left: clamp(13.33px, 1.042vw, 150vw);
  }
  .octopathtraveler0[data-ln=about] .revenge .sec-wrap03 .revenge-slider-wrap .swiper-button-next {
    right: clamp(13.33px, 1.042vw, 150vw);
  }
  .octopathtraveler0[data-ln=about] .revenge .sec-wrap03 .revenge-slider {
    position: relative;
    height: clamp(573.33px, 44.792vw, 150vw);
  }
  .octopathtraveler0[data-ln=about] .revenge .sec-wrap03 .revenge-slider .swiper-slide {
    padding: 0;
    height: clamp(580px, 45.313vw, 150vw);
    overflow: hidden;
  }
  .octopathtraveler0[data-ln=about] .revenge .sec-wrap03 .revenge-slider .swiper-slide .slide-illust {
    position: absolute;
    left: 0;
    top: clamp(6.67px, 0.521vw, 150vw);
    width: 100%;
    z-index: 1;
  }
  .octopathtraveler0[data-ln=about] .revenge .sec-wrap03 .revenge-slider .swiper-slide .profile-box {
    width: clamp(372.67px, 29.115vw, 150vw);
    height: clamp(286.67px, 22.396vw, 150vw);
    background: url("/octopathtraveler0/assets/img/about/slider/text-frame02@pc.png") no-repeat center center/contain;
    margin: clamp(72px, 5.625vw, 150vw) 0 0 clamp(66.67px, 5.208vw, 150vw);
    padding: clamp(108px, 8.438vw, 150vw) 0 0;
  }
  .octopathtraveler0[data-ln=about] .revenge .sec-wrap03 .revenge-slider .swiper-slide .profile-box .dot-illust {
    width: clamp(75.33px, 5.885vw, 150vw);
    height: clamp(74.67px, 5.833vw, 150vw);
    left: clamp(16.6px, 1.297vw, 150vw);
    top: clamp(18px, 1.406vw, 150vw);
  }
  .octopathtraveler0[data-ln=about] .revenge .sec-wrap03 .revenge-slider .swiper-slide .profile-box .character-names {
    height: clamp(39.33px, 3.073vw, 150vw);
    top: clamp(32.67px, 2.552vw, 150vw);
    padding: 0 0 0 clamp(106.67px, 8.333vw, 150vw);
  }
  .octopathtraveler0[data-ln=about] .revenge .sec-wrap03 .revenge-slider .swiper-slide .profile-box .character-names .name {
    font-size: clamp(16.67px, 1.302vw, 150vw);
    padding: 0 clamp(22.67px, 1.771vw, 150vw) 0 0;
    letter-spacing: 0.06em;
  }
  .octopathtraveler0[data-ln=about] .revenge .sec-wrap03 .revenge-slider .swiper-slide .profile-box .character-names .name:before {
    width: clamp(9.33px, 0.729vw, 150vw);
    height: clamp(9.33px, 0.729vw, 150vw);
    top: clamp(0.67px, 0.052vw, 150vw);
  }
  .octopathtraveler0[data-ln=about] .revenge .sec-wrap03 .revenge-slider .swiper-slide .profile-box .character-names .cv {
    font-size: clamp(12.67px, 0.99vw, 150vw);
    padding: 0 0 0 clamp(12px, 0.938vw, 150vw);
    transform: translateY(clamp(1.33px, 0.104vw, 150vw));
  }
  .octopathtraveler0[data-ln=about] .revenge .sec-wrap03 .revenge-slider .swiper-slide .profile-box .character-names .cv i {
    font-size: clamp(15.33px, 1.198vw, 150vw);
    padding: 0 clamp(9.33px, 0.729vw, 150vw) 0 0;
  }
  .octopathtraveler0[data-ln=about] .revenge .sec-wrap03 .revenge-slider .swiper-slide .profile-box .character-catch {
    width: clamp(292.67px, 22.865vw, 150vw);
    padding: 0 0 clamp(20.67px, 1.615vw, 150vw);
    margin: 0 auto clamp(11.33px, 0.885vw, 150vw);
    font-size: clamp(22px, 1.719vw, 150vw);
  }
  .octopathtraveler0[data-ln=about] .revenge .sec-wrap03 .revenge-slider .swiper-slide .profile-box .character-catch:before {
    width: 100%;
    height: clamp(11.33px, 0.885vw, 150vw);
  }
  .octopathtraveler0[data-ln=about] .revenge .sec-wrap03 .revenge-slider .swiper-slide .profile-box .detail-text {
    padding: 0 clamp(40px, 3.125vw, 150vw);
  }
  .octopathtraveler0[data-ln=about] .revenge .sec-wrap03 .revenge-slider .swiper-slide .profile-box .detail-text p {
    font-size: clamp(12px, 0.938vw, 150vw);
    line-height: 2;
    letter-spacing: 0.05em;
  }
  .octopathtraveler0[data-ln=about] .revenge .sec-wrap03 .revenge-slider .swiper-slide .profile-box02 {
    width: clamp(372.67px, 29.115vw, 150vw);
    height: clamp(166.67px, 13.021vw, 150vw);
    background: url("/octopathtraveler0/assets/img/about/slider/text-frame03@pc.png") no-repeat center center/contain;
    margin: clamp(20px, 1.563vw, 150vw) 0 0 clamp(66.67px, 5.208vw, 150vw);
    padding: clamp(36px, 2.813vw, 150vw) 0 0;
  }
  .octopathtraveler0[data-ln=about] .revenge .sec-wrap03 .revenge-slider .swiper-slide .profile-box02 .detail-text {
    padding: 0 clamp(40px, 3.125vw, 150vw);
  }
  .octopathtraveler0[data-ln=about] .revenge .sec-wrap03 .revenge-slider .swiper-slide .profile-box02 .detail-text p {
    font-size: clamp(12px, 0.938vw, 150vw);
    line-height: 2;
    letter-spacing: 0.05em;
  }
  .octopathtraveler0[data-ln=about] .revenge .sec-wrap03 .revenge-slider .swiper-slide .profile-thumb {
    width: clamp(375.2px, 29.312vw, 150vw);
    height: clamp(209.87px, 16.396vw, 150vw);
    margin: 0;
    position: absolute;
    right: clamp(61.33px, 4.792vw, 150vw);
    top: clamp(180px, 14.063vw, 150vw);
    z-index: 100;
  }
  .octopathtraveler0[data-ln=about] .revenge .sec-wrap03 .revenge-slider .swiper-slide .profile-thumb:before {
    width: clamp(382.67px, 29.896vw, 150vw);
    height: clamp(211.33px, 16.51vw, 150vw);
    left: min(-4.67px, -0.365vw);
    top: min(-1.33px, -0.104vw);
  }
  .octopathtraveler0[data-ln=about] .revenge .sec-wrap03 .slider-nav-wrap {
    position: relative;
    margin: min(-28px, -2.188vw) 0 0;
    z-index: 30;
  }
  .octopathtraveler0[data-ln=about] .revenge .sec-wrap03 .slider-nav-wrap:before {
    height: clamp(63.33px, 4.948vw, 150vw);
    background: url("/octopathtraveler0/assets/img/about/slider/line-bottom02@pc.png") no-repeat center center/auto 100%;
  }
  .octopathtraveler0[data-ln=about] .revenge .sec-wrap03 .slider-nav-wrap .slider-nav {
    padding: clamp(78px, 6.094vw, 150vw) 0 0;
    gap: 0 clamp(4px, 0.313vw, 150vw);
  }
  .octopathtraveler0[data-ln=about] .revenge .sec-wrap03 .slider-nav-wrap .slider-nav li {
    width: clamp(68.67px, 5.365vw, 150vw);
  }
  .octopathtraveler0[data-ln=about] .revenge .sec-wrap03 .slider-nav-wrap .slider-nav li a {
    transition: 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform: translateZ(0);
    will-change: filter;
    display: block;
  }
  .octopathtraveler0[data-ln=about] .revenge .sec-wrap03 .slider-nav-wrap .slider-nav li a:hover {
    filter: brightness(1.2) drop-shadow(0 0 clamp(6px, 0.313vw, 150vw) rgba(200, 238, 246, 0.6));
  }
  .octopathtraveler0[data-ln=about] .revenge .sec-wrap03 .slider-nav-wrap .slider-nav li a.current {
    filter: brightness(1.2) drop-shadow(0 0 clamp(6px, 0.313vw, 150vw) rgba(200, 238, 246, 0.6));
  }
  .octopathtraveler0[data-ln=about] .hd2d {
    position: relative;
    margin: min(0px, 0vw) 0 0;
    padding: clamp(146px, 7.604vw, 150vw) 0 0;
    pointer-events: none;
  }
  .octopathtraveler0[data-ln=about] .hd2d:before {
    height: clamp(95px, 4.948vw, 150vw);
    background: url("/octopathtraveler0/assets/img/about/line01@pc.png") no-repeat center center/clamp(1920px, 100vw, 150vw) 100%;
  }
  .octopathtraveler0[data-ln=about] .hd2d h2 {
    width: clamp(559px, 29.115vw, 150vw);
    margin: 0 auto;
  }
  .octopathtraveler0[data-ln=about] .hd2d .visual {
    width: clamp(784px, 40.833vw, 150vw);
    margin: min(-13.3px, -0.693vw) auto 0;
    transform: translateX(min(-10px, -0.521vw));
  }
  .octopathtraveler0[data-ln=about] .hd2d .text {
    padding: 0 clamp(50px, 2.604vw, 150vw);
    margin: min(-2.21px, -0.115vw) 0 0;
  }
  .octopathtraveler0[data-ln=about] .hd2d .text p {
    font-size: clamp(20px, 1.042vw, 150vw);
    font-weight: 200;
    line-height: 1.94;
    letter-spacing: 0.06em;
    text-shadow: 0 0 clamp(6px, 0.313vw, 150vw) rgba(16, 26, 44, 0.8), 0 0 clamp(12px, 0.625vw, 150vw) rgba(16, 26, 44, 0.6), 0 0 clamp(25px, 1.302vw, 150vw) rgba(16, 26, 44, 0.8), 0 0 clamp(6px, 0.313vw, 150vw) rgba(16, 26, 44, 0.8), 0 0 clamp(12px, 0.625vw, 150vw) rgba(16, 26, 44, 0.6), 0 0 clamp(25px, 1.302vw, 150vw) rgba(16, 26, 44, 0.8), 0 0 clamp(6px, 0.313vw, 150vw) rgba(16, 26, 44, 0.8), 0 0 clamp(12px, 0.625vw, 150vw) rgba(16, 26, 44, 0.6), 0 0 clamp(25px, 1.302vw, 150vw) rgba(16, 26, 44, 0.8);
  }
  .octopathtraveler0[data-ln=about] .hd2d .text p .highlight {
    font-size: clamp(30px, 1.563vw, 150vw);
    letter-spacing: 0.06em;
  }
  .octopathtraveler0[data-ln=about] .thumbs {
    margin: clamp(56.1px, 2.922vw, 150vw) 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(42px, 2.188vw, 150vw);
  }
  .octopathtraveler0[data-ln=about] .thumbs .thumb {
    width: clamp(514px, 26.771vw, 150vw);
    height: clamp(286px, 14.896vw, 150vw);
    margin: 0;
  }
  .octopathtraveler0[data-ln=about] .thumbs .thumb + .thumb {
    margin: 0;
  }
}
@media screen and (min-width: 1024px) and (max-width: 1500px) {
  .octopathtraveler0[data-ln=about] .first-detail {
    padding-top: clamp(33.33px, 2.604vw, 150vw);
  }
}
@media screen and (max-width: 1023px) {
  .octopathtraveler0[data-ln=about] .page-header h1 {
    transform: scale(1.2);
    opacity: 0;
  }
  .octopathtraveler0[data-ln=about] .pagetitle h1 {
    transform: scale(1.2) translateY(-3.8%);
    opacity: 0;
  }
  .octopathtraveler0[data-ln=about] .pagetitle i {
    opacity: 0;
    right: 44%;
  }
  .octopathtraveler0[data-ln=about] .pagetitle i ~ i {
    left: 44%;
  }
  .octopathtraveler0[data-ln=about] .mv-illustration {
    transform: translate(-9.766vw) scale(1);
  }
  .octopathtraveler0[data-ln=about] .mv-illustration img {
    filter: grayscale(100%) sepia(30%);
  }
  .imgloaded .octopathtraveler0[data-ln=about] .page-header h1 {
    transform: scale(1);
    opacity: 1;
    transition: 1s 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  .imgloaded .octopathtraveler0[data-ln=about] .pagetitle h1 {
    transform: scale(1);
    opacity: 1;
    transition: 1.2s 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  .imgloaded .octopathtraveler0[data-ln=about] .pagetitle i {
    opacity: 1;
    right: 50%;
    transition: 1.2s 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  .imgloaded .octopathtraveler0[data-ln=about] .pagetitle i ~ i {
    right: auto;
    left: 50%;
  }
  .imgloaded .octopathtraveler0[data-ln=about] .mv-illustration {
    transform: translate(0) scale(1);
    transition: 2.6s 0s cubic-bezier(0.39, 0.575, 0.565, 1);
  }
  .imgloaded .octopathtraveler0[data-ln=about] .mv-illustration img {
    filter: grayscale(0) sepia(0);
    transition: 2.6s 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
  }
  .first-detail .catch, .first-detail .note, .first-detail .box-frame {
    transform: translateY(3vw);
    opacity: 0;
  }
  .first-detail.animated_on .catch, .first-detail.animated_on .note {
    opacity: 1;
    transform: translateY(0vw);
    transition: 1s 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  .first-detail.animated_on .box-frame {
    opacity: 1;
    transform: translateY(0vw);
    transition: 1s 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  .img-loop {
    transform: translateY(3vw);
    opacity: 0;
  }
  .img-loop.animated_on {
    opacity: 1;
    transform: translateY(0vw);
    transition: 1s 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  .story .visual {
    transform: scale(1.04) translate(0, 7.813vw);
    -webkit-mask-image: url("/octopathtraveler0/assets/img/common/mask01.png");
            mask-image: url("/octopathtraveler0/assets/img/common/mask01.png");
    mask-mode: alpha;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: 0% 0%;
            mask-size: 0% 0%;
    -webkit-mask-position: center center;
            mask-position: center center;
  }
  .story .visual img {
    filter: grayscale(100%) blur(5px);
  }
  .story h2 {
    transform: scale(1.2);
    opacity: 0;
  }
  .story .text01, .story .text02, .story .text03, .story .important-text {
    opacity: 0;
    filter: blur(5px);
  }
  .story.animated_on .visual {
    -webkit-mask-size: 360% 160%;
            mask-size: 360% 160%;
    transform: scale(1) translate(0);
    transition: 1.8s 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  .story.animated_on .visual img {
    filter: grayscale(0) blur(0);
    transition: 2.1s 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  .story.animated_on h2 {
    transform: scale(1);
    opacity: 1;
    transition: 1s 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  .story.animated_on .text01, .story.animated_on .text02, .story.animated_on .text03, .story.animated_on .important-text {
    opacity: 1;
    filter: blur(0);
  }
  .story.animated_on .text01 {
    transition: 1.5s 1.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  .story.animated_on .text02 {
    transition: 1.5s 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  .story.animated_on .text03 {
    transition: 1.5s 2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  .story.animated_on .important-text {
    transition: 1.5s 2.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  .revenge .animation_point.-revenge01 {
    position: relative;
    top: 4.883vw;
  }
  .revenge .visual {
    position: relative;
    -webkit-mask-image: url(/octopathtraveler0/assets/img/about/revenge/illust@mask.webp);
    -webkit-mask-mode: match-source;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 0 80%;
    -webkit-mask-position: right bottom;
    filter: blur(1px) brightness(0.5);
    transform: translate(-9.766vw, -2.93vw) scale(1);
  }
  .revenge .visual img {
    filter: grayscale(100%) sepia(30%);
  }
  .revenge.animated_on .animation_point.-revenge01.animated_on ~ .sec-wrap.sec-wrap01 .visual {
    transform: translate(0) scale(1);
    transition: 2.4s 0s cubic-bezier(0.165, 0.84, 0.44, 1), transform 2.8s 0s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-mask 2.4s cubic-bezier(0.19, 1, 0.22, 1);
    transition: 2.4s 0s cubic-bezier(0.165, 0.84, 0.44, 1), transform 2.8s 0s cubic-bezier(0.165, 0.84, 0.44, 1), mask 2.4s cubic-bezier(0.19, 1, 0.22, 1);
    transition: 2.4s 0s cubic-bezier(0.165, 0.84, 0.44, 1), transform 2.8s 0s cubic-bezier(0.165, 0.84, 0.44, 1), mask 2.4s cubic-bezier(0.19, 1, 0.22, 1), -webkit-mask 2.4s cubic-bezier(0.19, 1, 0.22, 1);
    -webkit-mask-position: right 50%;
    -webkit-mask-size: 130% 130%;
    filter: blur(0) brightness(1);
  }
  .revenge.animated_on .animation_point.-revenge01.animated_on ~ .sec-wrap.sec-wrap01 .visual img {
    filter: grayscale(0) sepia(0);
    transition: 2.6s 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
  }
  .revenge .text .title, .revenge .text .text-frame {
    transform: translateY(3vw);
    opacity: 0;
  }
  .revenge .text.animated_on .title {
    opacity: 1;
    transform: translateY(0vw);
    transition: 1s 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  .revenge .text.animated_on .text-frame {
    opacity: 1;
    transform: translateY(0vw);
    transition: 1s 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  .revenge .sec-wrap02 .revenge-slider-wrap .slide-illust {
    transform: scale(1.12) translate(0, 3%);
    filter: blur(0px) brightness(60%);
  }
  .revenge .sec-wrap02 .revenge-slider-wrap .slide-illust img {
    filter: grayscale(100%) sepia(10%);
  }
  .revenge .sec-wrap02 .profile-box, .revenge .sec-wrap02 .profile-thumb {
    opacity: 0;
    transform: translateY(3vw);
  }
  .revenge .sec-wrap02 .profile-box.animated_on, .revenge .sec-wrap02 .profile-thumb.animated_on {
    opacity: 1;
    transform: translateY(0);
    transition: 1s 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  .revenge .sec-wrap02.animated_on .revenge-slider-wrap .slide-illust {
    transform: scale(1) translate(0);
    filter: blur(0) brightness(1);
    transition: 1.8s 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  .revenge .sec-wrap02.animated_on .revenge-slider-wrap .slide-illust img {
    filter: grayscale(0%) sepia(0%);
    transition: 2.4s 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  .revenge .sec-wrap02 .slider-nav {
    opacity: 0;
    transform: translateY(3vw);
  }
  .revenge .sec-wrap02 .slider-nav.animated_on {
    opacity: 1;
    transform: translateY(0);
    transition: 1s 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  .revenge .sec-wrap03 .revenge-slider-wrap .slide-illust {
    transform: scale(1.12) translate(0, 3%);
    filter: blur(0px) brightness(60%);
  }
  .revenge .sec-wrap03 .revenge-slider-wrap .slide-illust img {
    filter: grayscale(100%) sepia(10%);
  }
  .revenge .sec-wrap03 .profile-box, .revenge .sec-wrap03 .profile-box02, .revenge .sec-wrap03 .profile-thumb {
    opacity: 0;
    transform: translateY(3vw);
  }
  .revenge .sec-wrap03 .profile-box.animated_on, .revenge .sec-wrap03 .profile-box02.animated_on, .revenge .sec-wrap03 .profile-thumb.animated_on {
    opacity: 1;
    transform: translateY(0);
    transition: 1s 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  .revenge .sec-wrap03.animated_on .revenge-slider-wrap .slide-illust {
    transform: scale(1) translate(0);
    filter: blur(0) brightness(1);
    transition: 1.8s 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  .revenge .sec-wrap03.animated_on .revenge-slider-wrap .slide-illust img {
    filter: grayscale(0%) sepia(0%);
    transition: 2.4s 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  .revenge .sec-wrap03 .slider-nav {
    opacity: 0;
    transform: translateY(3vw);
  }
  .revenge .sec-wrap03 .slider-nav.animated_on {
    opacity: 1;
    transform: translateY(0);
    transition: 1s 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  .hd2d h2 {
    transform: scale(1.2);
    opacity: 0;
  }
  .hd2d .visual, .hd2d .text, .hd2d .thumbs {
    transform: translateY(3vw);
    opacity: 0;
  }
  .hd2d.animated_on .visual, .hd2d.animated_on .text {
    transform: translateY(0);
    opacity: 1;
  }
  .hd2d.animated_on h2 {
    transform: scale(1);
    opacity: 1;
    transition: 1s 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  .hd2d.animated_on .visual {
    transition: 1s 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  .hd2d.animated_on .text {
    transition: 1s 1.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  .hd2d .thumbs.animated_on {
    transform: scale(1);
    opacity: 1;
    transition: 1s 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
}
@media screen and (min-width: 1024px) {
  .octopathtraveler0[data-ln=about] .pagetitle h1 {
    transform: scale(1.2) translateY(-3.8%);
    opacity: 0;
  }
  .octopathtraveler0[data-ln=about] .pagetitle i {
    opacity: 0;
    right: 44%;
  }
  .octopathtraveler0[data-ln=about] .pagetitle i ~ i {
    left: 44%;
  }
  .octopathtraveler0[data-ln=about] .mv-illustration {
    transform: translate(min(-66.67px, -5.208vw)) scale(1);
  }
  .octopathtraveler0[data-ln=about] .mv-illustration img {
    filter: grayscale(100%) sepia(30%);
  }
  .imgloaded .octopathtraveler0[data-ln=about] .page-header h1 {
    transform: scale(1);
    opacity: 1;
    transition: 1s 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  .imgloaded .octopathtraveler0[data-ln=about] .pagetitle h1 {
    transform: scale(1);
    opacity: 1;
    transition: 1.6s 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  }
  .imgloaded .octopathtraveler0[data-ln=about] .pagetitle i {
    opacity: 1;
    right: 50%;
    transition: 2s 0.6s cubic-bezier(0.19, 1, 0.22, 1);
  }
  .imgloaded .octopathtraveler0[data-ln=about] .pagetitle i ~ i {
    right: auto;
    left: 50%;
  }
  .imgloaded .octopathtraveler0[data-ln=about] .mv-illustration {
    transform: translate(0) scale(1);
    transition: 1.8s 0s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  .imgloaded .octopathtraveler0[data-ln=about] .mv-illustration img {
    filter: grayscale(0) sepia(0);
    transition: 2.3s 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
  }
  .first-detail .catch, .first-detail .note, .first-detail .box-frame {
    transform: translateY(0px) scale(1.06);
    opacity: 0;
    filter: blur(2px);
  }
  .first-detail.animated_on .catch, .first-detail.animated_on .note {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0vw);
    transition: 1.4s 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  .first-detail.animated_on .box-frame {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0vw);
    transition: 1.4s 1.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  .img-loop {
    transform: translateY(30px);
    opacity: 0;
  }
  .img-loop.animated_on {
    opacity: 1;
    transform: translateY(0vw);
    transition: 1s 0s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  .story .visual {
    transform: scale(1.06) translate(0, clamp(40px, 2.083vw, 150vw));
    opacity: 0;
    filter: blur(12);
    -webkit-mask-image: url("/octopathtraveler0/assets/img/common/mask01.png");
            mask-image: url("/octopathtraveler0/assets/img/common/mask01.png");
    mask-mode: alpha;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: 0% 0%;
            mask-size: 0% 0%;
    -webkit-mask-position: center center;
            mask-position: center center;
  }
  .story .visual img {
    filter: grayscale(100%);
  }
  .story h2 {
    transform: scale(1.2);
    opacity: 0;
  }
  .story .text01, .story .text02, .story .text03, .story .important-text {
    opacity: 0;
    filter: blur(3px);
  }
  .story.animated_on .visual {
    -webkit-mask-size: 360% 260%;
            mask-size: 360% 260%;
    opacity: 1;
    filter: blur(0);
    transform: scale(1) translate(0);
    transition: 2.8s 0s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 1.2s 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 1.8s 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.8s 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  .story.animated_on .visual img {
    filter: grayscale(0);
    transition: 3s 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  .story.animated_on h2 {
    transform: scale(1);
    opacity: 1;
    transition: 1.6s 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  .story.animated_on .text01, .story.animated_on .text02, .story.animated_on .text03, .story.animated_on .important-text {
    opacity: 1;
    filter: blur(0);
  }
  .story.animated_on .text01 {
    transition: 1.6s 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  .story.animated_on .text02 {
    transition: 1.6s 1.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  .story.animated_on .text03 {
    transition: 1.6s 1.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  .story.animated_on .important-text {
    transition: 1.6s 2.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  .revenge .animation_point.-revenge01 {
    position: relative;
    top: clamp(150px, 7.813vw, 150vw);
  }
  .revenge .visual {
    -webkit-mask-image: url(/octopathtraveler0/assets/img/about/revenge/illust@mask.webp);
    -webkit-mask-mode: match-source;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 0 80%;
    -webkit-mask-position: right bottom;
    filter: blur(1px) brightness(0.5);
    transform: translate(min(-54.67px, -1.927vw), -0.5vw) scale(1);
  }
  .revenge .visual img {
    filter: grayscale(100%) sepia(30%);
  }
  .revenge.animated_on .animation_point.-revenge01.animated_on ~ .sec-wrap.sec-wrap01 .visual {
    transform: translate(0) scale(1);
    transition: 2.4s 0s cubic-bezier(0.165, 0.84, 0.44, 1), transform 3.2s 0s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-mask 3.2s cubic-bezier(0.19, 1, 0.22, 1);
    transition: 2.4s 0s cubic-bezier(0.165, 0.84, 0.44, 1), transform 3.2s 0s cubic-bezier(0.165, 0.84, 0.44, 1), mask 3.2s cubic-bezier(0.19, 1, 0.22, 1);
    transition: 2.4s 0s cubic-bezier(0.165, 0.84, 0.44, 1), transform 3.2s 0s cubic-bezier(0.165, 0.84, 0.44, 1), mask 3.2s cubic-bezier(0.19, 1, 0.22, 1), -webkit-mask 3.2s cubic-bezier(0.19, 1, 0.22, 1);
    -webkit-mask-position: right 50%;
    -webkit-mask-size: 130% 150%;
    filter: blur(0) brightness(1);
  }
  .revenge.animated_on .animation_point.-revenge01.animated_on ~ .sec-wrap.sec-wrap01 .visual img {
    filter: grayscale(0) sepia(0);
    transition: 2.6s 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
  }
  .revenge .text .title, .revenge .text .text-frame {
    transform: translateY(0px) scale(1.06);
    opacity: 0;
  }
  .revenge .text.animated_on .title {
    opacity: 1;
    transform: translateY(0vw);
    transition: 1.4s 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  .revenge .text.animated_on .text-frame {
    opacity: 1;
    transform: translateY(0vw);
    transition: 1.4s 1.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  .revenge .sec-wrap02 .revenge-slider-wrap .slide-illust {
    transform: scale(1.12) translate(0, 3%);
    filter: blur(0px) brightness(60%);
  }
  .revenge .sec-wrap02 .revenge-slider-wrap .slide-illust img {
    filter: grayscale(100%) sepia(10%);
  }
  .revenge .sec-wrap02 .profile-box {
    opacity: 0;
    transform: translateX(-30px);
  }
  .revenge .sec-wrap02 .profile-box.animated_on {
    opacity: 1;
    transform: translate(0);
    transition: 1s 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  .revenge .sec-wrap02 .profile-thumb {
    opacity: 0;
    transform: translateX(30px);
  }
  .revenge .sec-wrap02 .profile-thumb.animated_on {
    opacity: 1;
    transform: translate(0);
    transition: 1s 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  .revenge .sec-wrap02.animated_on .revenge-slider-wrap .slide-illust {
    transform: scale(1) translate(0);
    filter: blur(0) brightness(1);
    transition: 1.8s 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  .revenge .sec-wrap02.animated_on .revenge-slider-wrap .slide-illust img {
    filter: grayscale(0%) sepia(0%);
    transition: 2.4s 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  .revenge .sec-wrap02 .slider-nav {
    opacity: 0;
    transform: translateY(30px);
  }
  .revenge .sec-wrap02 .slider-nav.animated_on {
    opacity: 1;
    transform: translateY(0);
    transition: 1s 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  .revenge .sec-wrap03 .revenge-slider-wrap .slide-illust {
    transform: scale(1.12) translate(0, 3%);
    filter: blur(0px) brightness(60%);
  }
  .revenge .sec-wrap03 .revenge-slider-wrap .slide-illust img {
    filter: grayscale(100%) sepia(10%);
  }
  .revenge .sec-wrap03 .profile-box {
    opacity: 0;
    transform: translateX(-30px);
  }
  .revenge .sec-wrap03 .profile-box.animated_on {
    opacity: 1;
    transform: translate(0);
    transition: 1s 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  .revenge .sec-wrap03 .profile-box02 {
    opacity: 0;
    transform: translateX(-30px);
  }
  .revenge .sec-wrap03 .profile-box02.animated_on {
    opacity: 1;
    transform: translate(0);
    transition: 1s 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  .revenge .sec-wrap03 .profile-thumb {
    opacity: 0;
    transform: translateX(30px);
  }
  .revenge .sec-wrap03 .profile-thumb.animated_on {
    opacity: 1;
    transform: translate(0);
    transition: 1s 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  .revenge .sec-wrap03.animated_on .revenge-slider-wrap .slide-illust {
    transform: scale(1) translate(0);
    filter: blur(0) brightness(1);
    transition: 1.8s 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  .revenge .sec-wrap03.animated_on .revenge-slider-wrap .slide-illust img {
    filter: grayscale(0%) sepia(0%);
    transition: 2.4s 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  .revenge .sec-wrap03 .slider-nav {
    opacity: 0;
    transform: translateY(30px);
  }
  .revenge .sec-wrap03 .slider-nav.animated_on {
    opacity: 1;
    transform: translateY(0);
    transition: 1s 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  .hd2d h2 {
    transform: scale(1.2);
    opacity: 0;
  }
  .hd2d .visual, .hd2d .text, .hd2d .thumbs {
    transform: translateY(30px);
    opacity: 0;
  }
  .hd2d.animated_on .visual, .hd2d.animated_on .text, .hd2d.animated_on .thumbs {
    transform: translateY(0);
    opacity: 1;
  }
  .hd2d.animated_on h2 {
    transform: scale(1);
    opacity: 1;
    transition: 1s 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  .hd2d.animated_on .visual {
    transition: 1s 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  .hd2d.animated_on .text {
    transition: 1s 1.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  .hd2d.animated_on .thumbs {
    transition: 1s 2.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
}/*# sourceMappingURL=p_about.css.map */