@charset "UTF-8";
.untitle-onepiece__lp {
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
  color: #171A23;
  font-weight: 400;
  overflow-x: hidden;
  inline-size: calc(375 * 100vw/375);
}
@media screen and (min-width: 768px) {
  .untitle-onepiece__lp {
    inline-size: 1190px;
    margin-inline: auto;
  }
}
.untitle-onepiece__lp a {
  display: inline-block;
  cursor: pointer;
  transition: opacity 0.2s;
  text-decoration: none;
}
.untitle-onepiece__lp a:hover {
  opacity: 0.8;
}
.untitle-onepiece__lp img {
  inline-size: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.untitle-onepiece__lp ul:after {
  display: none;
}
.untitle-onepiece__lp .sp_no {
  display: none;
}
@media screen and (min-width: 768px) {
  .untitle-onepiece__lp .sp_no {
    display: block;
  }
}
.untitle-onepiece__lp .pc_no {
  display: block;
}
@media screen and (min-width: 768px) {
  .untitle-onepiece__lp .pc_no {
    display: none;
  }
}
.untitle-onepiece__lp .hero-area {
  inline-size: calc(375 * 100vw/375);
  block-size: calc(450 * 100vw/375);
  position: relative;
  margin-block-end: calc(30 * 100vw/375);
}
@media screen and (min-width: 768px) {
  .untitle-onepiece__lp .hero-area {
    inline-size: 1190px;
    block-size: 650px;
    margin-block-end: 100px;
  }
}
.untitle-onepiece__lp .hero-area.fade {
  opacity: 0;
}
.untitle-onepiece__lp .hero-area.fade .hero-visual {
  opacity: 0;
}
.untitle-onepiece__lp .hero-area.fade .hero-heading {
  opacity: 0;
}
.untitle-onepiece__lp .hero-area.fade .hero-txt {
  opacity: 0;
}
.untitle-onepiece__lp .hero-area.fade .hero-box > p {
  opacity: 0;
}
.untitle-onepiece__lp .hero-area.fade .hero-ttl > div {
  opacity: 0;
}
.untitle-onepiece__lp .hero-area.fade .hero-ttl > p {
  opacity: 0;
}
.untitle-onepiece__lp .hero-area.fade.is-active {
  animation: mv1 1s ease-out 0.5s 1 normal forwards;
}
.untitle-onepiece__lp .hero-area.fade.is-active .hero-visual {
  animation: mv2 5s ease-out 1s 1 normal forwards;
}
.untitle-onepiece__lp .hero-area.fade.is-active .hero-txt {
  animation: mv3 0.7s ease-out 1s 1 normal forwards;
}
.untitle-onepiece__lp .hero-area.fade.is-active .hero-box > p {
  animation: mv3 0.7s ease-out 1.5s 1 normal forwards;
}
.untitle-onepiece__lp .hero-area.fade.is-active .hero-ttl > div {
  animation: mv3 0.7s ease-out 2s 1 normal forwards;
}
.untitle-onepiece__lp .hero-area.fade.is-active .hero-ttl > p {
  animation: mv4 0.7s ease-out 2.5s 1 normal forwards;
}
.untitle-onepiece__lp .hero-area.fade.is-active .hero-heading {
  animation: mv4 0.7s ease-out 3s 1 normal forwards;
}
.untitle-onepiece__lp .hero-visual {
  inline-size: 100%;
  block-size: 100%;
}
.untitle-onepiece__lp .hero-box {
  position: absolute;
  inset-block-start: calc(325 * 100vw/375);
  inset-inline-start: 50%;
  transform: translateX(-50%);
  color: #fff;
}
.untitle-onepiece__lp .hero-box > p {
  font-family: "yu-mincho-pr6n", sans-serif;
  font-size: calc(22 * 100vw/375);
  line-height: 1;
  text-align: center;
  margin-block-end: calc(17 * 100vw/375);
}
@media screen and (min-width: 768px) {
  .untitle-onepiece__lp .hero-box > p {
    font-size: 48px;
    line-height: 1;
    margin-block-end: 34px;
  }
}
@media screen and (min-width: 768px) {
  .untitle-onepiece__lp .hero-box {
    inset-block-start: 408px;
  }
}
.untitle-onepiece__lp .hero-ttl {
  display: flex;
  gap: calc(12 * 100vw/375);
  align-items: center;
  justify-content: flex-start;
  margin-block-end: calc(12 * 100vw/375);
}
@media screen and (min-width: 768px) {
  .untitle-onepiece__lp .hero-ttl {
    gap: 30px;
    margin-block-end: 24px;
  }
}
.untitle-onepiece__lp .hero-ttl > div {
  inline-size: calc(140 * 100vw/375);
  block-size: calc(40 * 100vw/375);
}
@media screen and (min-width: 768px) {
  .untitle-onepiece__lp .hero-ttl > div {
    inline-size: 280px;
    block-size: 78px;
  }
}
.untitle-onepiece__lp .hero-ttl > p {
  font-size: calc(38 * 100vw/375);
  line-height: 1;
  background-color: rgba(77, 99, 198, 0.75);
  white-space: nowrap;
  font-family: "yu-mincho-pr6n", sans-serif;
}
@media screen and (min-width: 768px) {
  .untitle-onepiece__lp .hero-ttl > p {
    font-size: 80px;
  }
}
.untitle-onepiece__lp .hero-txt {
  inline-size: calc(100 * 100vw/375);
  block-size: calc(43 * 100vw/375);
  inset-block-start: calc(300 * 100vw/375);
  inset-inline-start: 0;
  position: absolute;
}
@media screen and (min-width: 768px) {
  .untitle-onepiece__lp .hero-txt {
    inline-size: 212px;
    block-size: 90px;
    inset-inline-start: 180px;
    inset-block-start: 372px;
  }
}
.untitle-onepiece__lp .hero-heading {
  inline-size: calc(158 * 100vw/375);
  block-size: calc(18 * 100vw/375);
  margin-inline: auto;
}
@media screen and (min-width: 768px) {
  .untitle-onepiece__lp .hero-heading {
    inline-size: 316px;
    block-size: 36px;
  }
}
.untitle-onepiece__lp .read-area {
  margin-block-end: calc(70 * 100vw/375);
  margin-inline: calc(42 * 100vw/375);
}
@media screen and (min-width: 768px) {
  .untitle-onepiece__lp .read-area {
    margin-block-end: 100px;
    margin-inline: 0;
  }
}
.untitle-onepiece__lp .read-area p {
  font-size: calc(14 * 100vw/375);
  line-height: 2;
  letter-spacing: 0.01em;
  font-weight: 500;
  text-align: center;
  text-wrap: balance;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .untitle-onepiece__lp .read-area p {
    font-size: 18px;
    line-height: 1.8;
  }
}
.untitle-onepiece__lp .look-area {
  margin-block-end: calc(70 * 100vw/375);
}
@media screen and (min-width: 768px) {
  .untitle-onepiece__lp .look-area {
    margin-block-end: 150px;
  }
}
.untitle-onepiece__lp .look-cnt {
  margin-block-end: calc(70 * 100vw/375);
}
@media screen and (min-width: 768px) {
  .untitle-onepiece__lp .look-cnt {
    inline-size: 990px;
    margin-block-end: 200px;
    block-size: 532px;
    margin-inline: auto;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}
.untitle-onepiece__lp .look-cnt:nth-child(1) .look-ttl p::after {
  background-color: #4D63C6;
}
.untitle-onepiece__lp .look-cnt:nth-child(1) .look-buy {
  background-color: #4D63C6;
}
.untitle-onepiece__lp .look-cnt:nth-child(2) .look-ttl p::after {
  background-color: #4C4B5D;
}
.untitle-onepiece__lp .look-cnt:nth-child(2) .look-buy {
  background-color: #4C4B5D;
}
.untitle-onepiece__lp .look-cnt:nth-child(3) .look-ttl p::after {
  background-color: #EB4554;
}
.untitle-onepiece__lp .look-cnt:nth-child(3) .look-buy {
  background-color: #EB4554;
}
.untitle-onepiece__lp .look-cnt:nth-child(4) .look-ttl p::after {
  background-color: #77A579;
}
.untitle-onepiece__lp .look-cnt:nth-child(4) .look-buy {
  background-color: #77A579;
}
.untitle-onepiece__lp .look-cnt:nth-child(5) .look-ttl p::after {
  background-color: #DFDAD1;
}
.untitle-onepiece__lp .look-cnt:nth-child(5) .look-ttl.fade p::after {
  opacity: 0;
}
.untitle-onepiece__lp .look-cnt:nth-child(5) .look-ttl.fade span {
  opacity: 0;
}
.untitle-onepiece__lp .look-cnt:nth-child(5) .look-ttl.fade.is-active p:first-child::after {
  animation: fade-left 0.7s ease-out 0s 1 normal forwards;
}
.untitle-onepiece__lp .look-cnt:nth-child(5) .look-ttl.fade.is-active p:first-child span {
  animation: fade-left 0.7s ease-out 0.7s 1 normal forwards;
}
.untitle-onepiece__lp .look-cnt:nth-child(5) .look-ttl.fade.is-active p:last-child::after {
  animation: fade-right 0.7s ease-out 0s 1 normal forwards;
}
.untitle-onepiece__lp .look-cnt:nth-child(5) .look-ttl.fade.is-active p:last-child span {
  animation: fade-left 0.7s ease-out 2.1s 1 normal forwards;
}
.untitle-onepiece__lp .look-cnt:nth-child(5) .look-ttl.fade.is-active span:nth-child(2) {
  animation: fade-left 0.7s ease-out 1.4s 1 normal forwards;
}
.untitle-onepiece__lp .look-cnt:nth-child(5) .look-buy {
  background-color: #DFDAD1;
}
.untitle-onepiece__lp .look-cnt:nth-child(6) .look-ttl p::after {
  background-color: #8D7570;
}
.untitle-onepiece__lp .look-cnt:nth-child(6) .look-ttl span:nth-child(2) {
  text-align: left;
}
.untitle-onepiece__lp .look-cnt:nth-child(6) .look-ttl.fade p::after {
  opacity: 0;
}
.untitle-onepiece__lp .look-cnt:nth-child(6) .look-ttl.fade span {
  opacity: 0;
}
.untitle-onepiece__lp .look-cnt:nth-child(6) .look-ttl.fade.is-active p:first-child::after {
  animation: fade-left 0.7s ease-out 0s 1 normal forwards;
}
.untitle-onepiece__lp .look-cnt:nth-child(6) .look-ttl.fade.is-active p:first-child span {
  animation: fade-left 0.7s ease-out 0.7s 1 normal forwards;
}
.untitle-onepiece__lp .look-cnt:nth-child(6) .look-ttl.fade.is-active p:last-child::after {
  animation: fade-right 0.7s ease-out 0s 1 normal forwards;
}
.untitle-onepiece__lp .look-cnt:nth-child(6) .look-ttl.fade.is-active p:last-child span {
  animation: fade-left 0.7s ease-out 2.1s 1 normal forwards;
}
.untitle-onepiece__lp .look-cnt:nth-child(6) .look-ttl.fade.is-active span:nth-child(2) {
  animation: fade-left 0.7s ease-out 1.4s 1 normal forwards;
}
.untitle-onepiece__lp .look-cnt:nth-child(6) .look-buy {
  background-color: #8D7570;
}
@media screen and (min-width: 768px) {
  .untitle-onepiece__lp .look-cnt:nth-child(odd) .look-ttl {
    margin-inline: 0 auto;
  }
  .untitle-onepiece__lp .look-cnt:nth-child(odd) .look-slick {
    inset-inline-end: 0;
  }
  .untitle-onepiece__lp .look-cnt:nth-child(odd) .look-txt {
    margin-inline: 0 auto;
  }
  .untitle-onepiece__lp .look-cnt:nth-child(odd) .look-credit {
    margin-inline: 0 auto;
  }
}
@media screen and (min-width: 768px) {
  .untitle-onepiece__lp .look-cnt:nth-child(even) .look-ttl {
    margin-inline: auto 0;
  }
  .untitle-onepiece__lp .look-cnt:nth-child(even) .look-slick {
    inset-inline-start: 0;
  }
  .untitle-onepiece__lp .look-cnt:nth-child(even) .look-txt {
    margin-inline: auto 0;
  }
  .untitle-onepiece__lp .look-cnt:nth-child(even) .look-credit {
    margin-inline: auto 0;
  }
}
.untitle-onepiece__lp .look-ttl {
  margin-block-end: calc(30 * 100vw/375);
}
.untitle-onepiece__lp .look-ttl.fade p::after {
  opacity: 0;
}
.untitle-onepiece__lp .look-ttl.fade span {
  opacity: 0;
}
.untitle-onepiece__lp .look-ttl.fade.is-active p:first-child::after {
  animation: fade-left 0.7s ease-out 0s 1 normal forwards;
}
.untitle-onepiece__lp .look-ttl.fade.is-active p:first-child span {
  animation: fade-left 0.7s ease-out 0.7s 1 normal forwards;
}
.untitle-onepiece__lp .look-ttl.fade.is-active p:last-child::after {
  animation: fade-right 0.7s ease-out 0s 1 normal forwards;
}
.untitle-onepiece__lp .look-ttl.fade.is-active p:last-child span {
  animation: fade-left 0.7s ease-out 1.4s 1 normal forwards;
}
@media screen and (min-width: 768px) {
  .untitle-onepiece__lp .look-ttl {
    margin-block-end: 40px;
    inline-size: 440px;
  }
}
.untitle-onepiece__lp .look-ttl span {
  font-family: "yu-mincho-pr6n", sans-serif;
  font-size: calc(18 * 100vw/375);
  font-weight: bold;
  line-height: 1.5;
  display: block;
}
@media screen and (min-width: 768px) {
  .untitle-onepiece__lp .look-ttl span {
    font-size: 22px;
  }
}
.untitle-onepiece__lp .look-ttl span:nth-child(2) {
  padding-inline-end: calc(25 * 100vw/375);
  text-align: right;
}
@media screen and (min-width: 768px) {
  .untitle-onepiece__lp .look-ttl span:nth-child(2) {
    padding-inline-end: 0;
  }
}
.untitle-onepiece__lp .look-ttl p {
  position: relative;
  inline-size: -moz-fit-content;
  inline-size: fit-content;
}
.untitle-onepiece__lp .look-ttl p:first-child {
  padding-inline-start: calc(25 * 100vw/375);
}
@media screen and (min-width: 768px) {
  .untitle-onepiece__lp .look-ttl p:first-child {
    padding-inline-start: 0;
  }
}
.untitle-onepiece__lp .look-ttl p:first-child::after {
  inset-inline-start: 0;
  inset-block-start: calc(-10 * 100vw/375);
}
@media screen and (min-width: 768px) {
  .untitle-onepiece__lp .look-ttl p:first-child::after {
    inset-block-start: -10px;
  }
}
.untitle-onepiece__lp .look-ttl p:last-child {
  margin-inline-start: auto;
  padding-inline-end: calc(25 * 100vw/375);
}
@media screen and (min-width: 768px) {
  .untitle-onepiece__lp .look-ttl p:last-child {
    padding-inline-end: 0;
  }
}
.untitle-onepiece__lp .look-ttl p:last-child::after {
  inset-inline-end: 0;
  inset-block-end: calc(-10 * 100vw/375);
}
@media screen and (min-width: 768px) {
  .untitle-onepiece__lp .look-ttl p:last-child::after {
    inset-block-end: -10px;
  }
}
.untitle-onepiece__lp .look-ttl p::after {
  content: "";
  position: absolute;
  inline-size: 100%;
  block-size: 2px;
}
.untitle-onepiece__lp .look-txt {
  font-family: "yu-mincho-pr6n", sans-serif;
  inline-size: calc(325 * 100vw/375);
  margin-inline: auto;
  font-size: calc(13 * 100vw/375);
  line-height: 1.8;
  margin-block-end: calc(30 * 100vw/375);
}
@media screen and (min-width: 768px) {
  .untitle-onepiece__lp .look-txt {
    font-size: 14px;
    line-height: 2;
    inline-size: 440px;
    margin-block-end: 50px;
  }
}
.untitle-onepiece__lp .look-slick {
  inline-size: calc(375 * 100vw/375);
  block-size: calc(400 * 100vw/375);
  margin-block-end: calc(20 * 100vw/375);
  z-index: 100;
}
@media screen and (min-width: 768px) {
  .untitle-onepiece__lp .look-slick {
    position: absolute;
    inset-block-start: 0;
    inline-size: 500px;
    block-size: 532px;
    margin-block-end: 0;
  }
}
.untitle-onepiece__lp .look-slick .slick-arrow {
  inline-size: calc(30 * 100vw/375);
  block-size: calc(40 * 100vw/375);
  padding: calc(10 * 100vw/375);
  z-index: 100;
}
@media screen and (min-width: 768px) {
  .untitle-onepiece__lp .look-slick .slick-arrow {
    inline-size: 32px;
    block-size: 45px;
    padding: 10px;
  }
}
.untitle-onepiece__lp .look-slick .slick-arrow::before {
  display: none !important;
}
.untitle-onepiece__lp .look-slick .slick-arrow.slick-prev {
  left: calc(15 * 100vw/375) !important;
}
@media screen and (min-width: 768px) {
  .untitle-onepiece__lp .look-slick .slick-arrow.slick-prev {
    left: 5px !important;
  }
}
.untitle-onepiece__lp .look-slick .slick-arrow.slick-next {
  right: calc(15 * 100vw/375) !important;
}
@media screen and (min-width: 768px) {
  .untitle-onepiece__lp .look-slick .slick-arrow.slick-next {
    right: 5px !important;
  }
}
.untitle-onepiece__lp .look-slick__cnt {
  inline-size: calc(375 * 100vw/375);
  block-size: calc(400 * 100vw/375);
}
@media screen and (min-width: 768px) {
  .untitle-onepiece__lp .look-slick__cnt {
    inline-size: 500px;
    block-size: 532px;
  }
}
.untitle-onepiece__lp .look-slick__visual {
  inline-size: calc(375 * 100vw/375);
  block-size: calc(400 * 100vw/375);
}
@media screen and (min-width: 768px) {
  .untitle-onepiece__lp .look-slick__visual {
    inline-size: 500px;
    block-size: 532px;
  }
}
.untitle-onepiece__lp .look-credit {
  inline-size: calc(325 * 100vw/375);
  margin-inline: auto;
}
@media screen and (min-width: 768px) {
  .untitle-onepiece__lp .look-credit {
    inline-size: 440px;
  }
}
.untitle-onepiece__lp .look-credit li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-block-end: calc(8 * 100vw/375);
}
@media screen and (min-width: 768px) {
  .untitle-onepiece__lp .look-credit li {
    margin-block-end: 8px;
  }
}
.untitle-onepiece__lp .look-credit li a {
  font-size: calc(12 * 100vw/375);
  line-height: 2.8;
  font-weight: 500;
}
@media screen and (min-width: 768px) {
  .untitle-onepiece__lp .look-credit li a {
    font-size: 12px;
  }
}
.untitle-onepiece__lp .look-credit li a:last-child {
  display: flex;
  gap: calc(20 * 100vw/375);
}
@media screen and (min-width: 768px) {
  .untitle-onepiece__lp .look-credit li a:last-child {
    gap: 30px;
  }
}
.untitle-onepiece__lp .look-credit li a span {
  display: inline-block;
}
.untitle-onepiece__lp .look-credit li a span.look-buy {
  font-size: calc(11 * 100vw/375);
  font-weight: bold;
  line-height: 2.8;
  color: #fff;
  padding-inline: calc(20 * 100vw/375);
}
@media screen and (min-width: 768px) {
  .untitle-onepiece__lp .look-credit li a span.look-buy {
    font-size: 11px;
    padding-inline: 20px;
  }
}
.untitle-onepiece__lp .look-btn {
  inline-size: calc(275 * 100vw/375);
  block-size: calc(40 * 100vw/375);
  line-height: calc(40 * 100vw/375);
  font-family: "yu-mincho-pr6n", sans-serif;
  color: #fff;
  background-color: #171A23;
  font-size: calc(14 * 100vw/375);
  font-weight: bold;
  margin-inline: auto;
  display: block;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .untitle-onepiece__lp .look-btn {
    inline-size: 600px;
    block-size: 60px;
    line-height: 60px;
    font-size: 18px;
  }
}
.untitle-onepiece__lp .look-btn + .look-btn {
  margin-block-start: calc(70 * 100vw/375);
}
@media screen and (min-width: 768px) {
  .untitle-onepiece__lp .look-btn + .look-btn {
    margin-block-start: 150px;
  }
}
.untitle-onepiece__lp .sup-list {
  inline-size: calc(325 * 100vw/375);
  margin-inline: auto;
  margin-block-end: calc(100 * 100vw/375);
}
@media screen and (min-width: 768px) {
  .untitle-onepiece__lp .sup-list {
    inline-size: 1190px;
    margin-block-end: 200px;
  }
}
.untitle-onepiece__lp .sup-list li {
  font-size: calc(11 * 100vw/375);
  line-height: 1.7;
  font-weight: 500;
  padding-inline-start: calc(11 * 100vw/375);
  color: #888888;
  position: relative;
}
@media screen and (min-width: 768px) {
  .untitle-onepiece__lp .sup-list li {
    font-size: 11px;
    line-height: 1.8;
    padding-inline-start: 11px;
  }
}
.untitle-onepiece__lp .sup-list li::before {
  content: "※";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
}

@keyframes img-ani01 {
  from {
    -webkit-clip-path: inset(0 0% 100% 0%);
    clip-path: inset(0 0% 100% 0%);
    opacity: 1;
  }
  to {
    -webkit-clip-path: inset(0);
    clip-path: inset(0);
    opacity: 1;
  }
}
@keyframes img-ani02 {
  0% {
    opacity: 0;
    transform: scale(1.4) translateY(5%);
  }
  40% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0px);
  }
}
@keyframes fade-left {
  from {
    -webkit-clip-path: inset(0 100% 0% 0%);
    clip-path: inset(0 100% 0% 0%);
    opacity: 0;
  }
  to {
    -webkit-clip-path: inset(0);
    clip-path: inset(0);
    opacity: 1;
  }
}
@keyframes mv1 {
  from {
    -webkit-clip-path: inset(0 0% 100% 0%);
    clip-path: inset(0 0% 100% 0%);
    opacity: 1;
  }
  to {
    -webkit-clip-path: inset(0);
    clip-path: inset(0);
    opacity: 1;
  }
}
@keyframes fade-left {
  from {
    -webkit-clip-path: inset(0 100% 0% 0%);
    clip-path: inset(0 100% 0% 0%);
    opacity: 0;
  }
  to {
    -webkit-clip-path: inset(0);
    clip-path: inset(0);
    opacity: 1;
  }
}
@keyframes fade-right {
  from {
    -webkit-clip-path: inset(0 0% 0% 100%);
    clip-path: inset(0 0% 0% 100%);
    opacity: 0;
  }
  to {
    -webkit-clip-path: inset(0);
    clip-path: inset(0);
    opacity: 1;
  }
}
@keyframes mv1 {
  from {
    -webkit-clip-path: inset(0 0% 100% 0%);
    clip-path: inset(0 0% 100% 0%);
    opacity: 1;
  }
  to {
    -webkit-clip-path: inset(0);
    clip-path: inset(0);
    opacity: 1;
  }
}
@keyframes mv2 {
  0% {
    opacity: 1;
    transform: scale(1.1);
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes mv3 {
  0% {
    opacity: 0;
    transform: translateY(10%);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}
@keyframes mv4 {
  from {
    -webkit-clip-path: inset(0 100% 0% 0%);
    clip-path: inset(0 100% 0% 0%);
    opacity: 0;
  }
  to {
    -webkit-clip-path: inset(0);
    clip-path: inset(0);
    opacity: 1;
  }
}/*# sourceMappingURL=style.css.map */