/*! destyle.css v4.0.1 | MIT License | https://github.com/nicolas-cusan/destyle.css */

*,
::before,
::after {
  border-style: solid;
  border-width: 0;
  box-sizing: border-box;
  min-width: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  line-height: 1.15;
}

body {
  margin: 0;
}

main {
  display: block;
}

p,
table,
blockquote,
address,
pre,
iframe,
form,
figure,
dl {
  margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
  margin: 0;
}

ul,
ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

dd {
  margin-left: 0;
}

hr {
  border-top-width: 1px;
  box-sizing: content-box;
  clear: both;
  color: inherit;
  height: 0;
  margin: 0;
  overflow: visible;
}

pre {
  font-family: monospace,monospace;
  font-size: inherit;
}

address {
  font-style: inherit;
}

a {
  background-color: rgba(0,0,0,0);
  color: inherit;
  text-decoration: none;
}

abbr[title] {
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
}

b,
strong {
  font-weight: bolder;
}

code,
kbd,
samp {
  font-family: monospace,monospace;
  font-size: inherit;
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

svg,
img,
embed,
object,
iframe {
  vertical-align: bottom;
}

button,
input,
optgroup,
select,
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: rgba(0,0,0,0);
  border-radius: 0;
  color: inherit;
  font: inherit;
  margin: 0;
  padding: 0;
  text-align: inherit;
  text-transform: inherit;
  vertical-align: middle;
}

button,
[type=button],
[type=reset],
[type=submit] {
  cursor: pointer;
}

button:disabled,
[type=button]:disabled,
[type=reset]:disabled,
[type=submit]:disabled {
  cursor: default;
}

:-moz-focusring {
  outline: auto;
}

select:disabled {
  opacity: inherit;
}

option {
  padding: 0;
}

fieldset {
  margin: 0;
  min-width: 0;
  padding: 0;
}

legend {
  padding: 0;
}

progress {
  vertical-align: baseline;
}

textarea {
  overflow: auto;
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

[type=search] {
  outline-offset: -2px;
}

[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

[type=number] {
  -moz-appearance: textfield;
}

label[for] {
  cursor: pointer;
}

details {
  display: block;
}

summary {
  display: list-item;
}

[contenteditable]:focus {
  outline: auto;
}

table {
  border-collapse: collapse;
  border-color: inherit;
}

caption {
  text-align: left;
}

td,
th {
  padding: 0;
  vertical-align: top;
}

th {
  text-align: left;
}

.js-screen {
  height: 100vh;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  width: 100%;
  z-index: -9999;
}

.wrapper {
  opacity: 0;
  overflow: clip;
}

.pubSans {
  font-family: "Public Sans",sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 400;
}

.pubSans_M {
  font-family: "Public Sans",sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 500;
}

html {
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "palt";
  font-size: 1.3333333333vw;
}

body * {
  box-sizing: border-box;
}

a {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  color: inherit;
  display: block;
  text-decoration: inherit;
  width: 100%;
}

img,
video {
  display: block;
  width: 100%;
}

svg {
  overflow: visible;
}

.loading {
  height: 100vh;
  position: fixed;
  width: 100%;
  z-index: 50;
}

.loading-bg {
  background: #1c1f21;
  inset: 0;
  position: absolute;
  z-index: 2;
}

.loading-txt {
  color: #f93d61;
  font-size: 2.2rem;
  left: 0;
  margin: 62% 0 0 64.8%;
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  z-index: 3;
}

.loading-txt .char {
  opacity: 0;
}

.loading-txt .char:nth-of-type(1) {
  animation: appear-char .05s ease-out both .57s;
}

.loading-txt .char:nth-of-type(2) {
  animation: appear-char .05s ease-out both .64s;
}

.loading-txt .char:nth-of-type(3) {
  animation: appear-char .05s ease-out both .71s;
}

.loading-txt .char:nth-of-type(4) {
  animation: appear-char .05s ease-out both .78s;
}

.loading-txt .char:nth-of-type(5) {
  animation: appear-char .05s ease-out both .85s;
}

.loading-txt .char:nth-of-type(6) {
  animation: appear-char .05s ease-out both .92s;
}

.loading-txt .char:nth-of-type(7) {
  animation: appear-char .05s ease-out both .99s;
}

.loading-txt .char:nth-last-of-type(3) {
  animation: appear-char .05s ease-out both 1.06s,dot-flash 1s steps(2) infinite 1.79s;
}

.loading-txt .char:nth-last-of-type(2) {
  animation: appear-char .05s ease-out both 1.13s,dot-flash 1s steps(2) infinite 1.86s;
}

.loading-txt .char:nth-last-of-type(1) {
  animation: appear-char .05s ease-out both 1.2s,dot-flash 1s steps(2) infinite 1.93s;
}

@keyframes appear-char {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes dot-flash {
  0%, 40%, 100% {
    visibility: visible;
  }

  20% {
    visibility: hidden;
  }
}

.loading .poster {
  left: 0;
  margin: 43.3333333333% 0 0 calc(65.6% - 1px);
  opacity: 1;
  position: absolute;
  top: 0;
  transform: translate(-50%, -50%);
  width: 24rem;
}

.fixed {
  aspect-ratio: 1;
  backface-visibility: hidden;
  color: #000;
  position: absolute;
  right: 0;
  top: 8rem;
  transform: scaleZ(1.1);
  width: 10.4rem;
  z-index: 30;
}

.fixed__tabio,
.fixed__menu {
  align-items: center;
  border-radius: 50%;
  display: flex;
  inset: 0;
  justify-content: center;
  overflow: hidden;
  position: absolute;
  transition: background-color .2s;
}

.fixed__tabio svg,
.fixed__menu svg {
  transition: fill .2s;
}

.fixed__tabio {
  background: #ffd22a;
}

.fixed__tabio svg {
  width: 59.6153846154%;
}

.fixed__menu {
  background: var(--current, #f73e59);
  cursor: pointer;
  display: none;
  transition: .1s;
}

.fixed__menu svg {
  width: 66.3461538462%;
}

.main {
  color: #f73e59;
  position: relative;
}

.main-title {
  aspect-ratio: 756/1260;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: space-between;
  left: 50%;
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  width: 100%;
  z-index: 2;
}

.main-title .item {
  margin: 0 auto;
  width: 77.8666666667%;
}

.main-title .item:nth-of-type(2) {
  margin-top: 70.9333333333%;
}

.main-title .item:nth-of-type(3) {
  margin-top: auto;
}

.main-txt {
  font-size: 1.6rem;
  inset: 0;
  position: absolute;
  z-index: 2;
}

.main-txt .top,
.main-txt .bottom {
  position: absolute;
  top: 0;
}

.main-txt .top {
  left: 50%;
  margin: 18.6666666667% 0 0 -38.8%;
}

.main-txt .bottom {
  margin: 101.2% -38.2666666667% 0 0;
  right: 50%;
  text-align: right;
}

.main-video {
  pointer-events: none;
  position: relative;
}

.main-video .poster {
  inset: 0;
  position: absolute;
  z-index: 1;
}

.main-video .video {
  aspect-ratio: 756/1260;
  overflow: hidden;
  position: relative;
}

.main-video .video .ytPlayer {
  height: 200%;
  transform: translate(-1px, -25%);
  width: calc(100% + 2px);
}

.main-video .video .videoEl {
  inset: 0;
  position: absolute;
}

svg {
  overflow: visible;
}

.lead {
  font-size: 1.7rem;
  line-height: 1.3529411765;
  margin-top: 7.7rem;
  text-align: center;
}

.anc {
  display: flex;
  flex-wrap: wrap;
  font-size: 1rem;
  justify-content: center;
  margin: 11.7rem auto 0;
  width: 60rem;
}

.anc.is-stack .anc-item:nth-of-type(1) img {
  transform: translate(120%, 90.5882352941%) rotate(-2.6deg);
}

.anc.is-stack .anc-item:nth-of-type(2) img {
  transform: translate(11.7647058824%, 78.2352941176%);
}

.anc.is-stack .anc-item:nth-of-type(3) img {
  transform: translate(-115.2941176471%, 65.8823529412%) rotate(-354.37deg);
}

.anc.is-stack .anc-item:nth-of-type(4) img {
  transform: translate(65.2941176471%, -68.8235294118%) rotate(-4.251deg);
}

.anc.is-stack .anc-item:nth-of-type(5) img {
  transform: translate(-60%, -77.6470588235%);
}

.anc-item {
  position: relative;
  width: 17em;
}

.anc-item:nth-of-type(1) {
  margin-right: 3.2em;
  z-index: 5;
}

.anc-item:nth-of-type(1) img {
  transform: rotate(-2.6deg);
}

.anc-item:nth-of-type(2) {
  margin-right: 3.1em;
  z-index: 4;
}

.anc-item:nth-of-type(3) {
  margin-top: .7em;
  z-index: 3;
}

.anc-item:nth-of-type(3) img {
  transform: rotate(-354.37deg);
}

.anc-item:nth-of-type(4) {
  margin-right: 4.2em;
  margin-top: 3.2em;
  z-index: 2;
}

.anc-item:nth-of-type(4) img {
  transform: rotate(-4.251deg);
}

.anc-item:nth-of-type(5) {
  margin-top: 4.3em;
  z-index: 1;
}

.fish {
  opacity: 0;
  position: absolute;
  top: 20vh;
}

.fish-wrapper {
  height: 100vh;
  left: 0;
  pointer-events: none;
  position: fixed;
  top: 0;
  width: 100vw;
  z-index: 5;
}

.fish.is-anim1 {
  animation: swiming1 2s linear forwards 1s;
  opacity: 1;
  right: 0;
  transform: translate(100%, 0%);
  width: 30rem;
}

@keyframes swiming1 {
  0% {
    transform: translate(100%, 0%);
  }

  100% {
    transform: translate(calc((100% + 100vw) * -1), -150%);
  }
}

.fish.is-anim1 img {
  animation: swing .5s steps(2) infinite alternate;
}

@keyframes swing {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(10px);
  }
}

.fish.is-anim2 {
  animation: swiming2 3s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
  left: 0;
  opacity: 1;
  right: auto;
  width: 13.3rem;
}

@keyframes swiming2 {
  0% {
    transform: translate(-100%, 0%);
  }

  30% {
    transform: translate(-75%, 0%);
  }

  45% {
    transform: translate(-25%, 0%);
  }

  65% {
    transform: translate(25%, 0%) scaleX(1);
  }

  80% {
    transform: translate(25%, 0%) scaleX(-1);
  }

  100% {
    transform: translate(-100%, 0%) scaleX(-1);
  }
}

.fish.is-anim2 img {
  transform: scaleX(-1) rotate(10deg);
}

.look {
  font-size: 1rem;
}

.look .num {
  overflow: visible;
}

.look .num svg {
  overflow: visible;
}

.look .txt {
  font-family: "Public Sans",sans-serif;
  font-optical-sizing: auto;
  font-size: 1.7rem;
  font-weight: 400;
  line-height: 1.3529411765;
  margin-inline: auto;
  text-align: center;
  width: 92%;
}

.look .ph {
  position: relative;
}

.look .ph .icon {
  align-items: center;
  aspect-ratio: 1;
  background: #000;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  justify-content: center;
  left: 0;
  position: absolute;
  top: 0;
  transform: translate(-50%, -50%);
  transition: .2s background-color;
  width: 5.2rem;
  z-index: 4;
}

.look .ph .icon svg {
  fill: #fff;
  transition: .2s fill;
  width: 46.1538461538%;
  z-index: 1;
}

.look .ph .icon::before {
  animation: wave infinite 2s cubic-bezier(0.19, 1, 0.22, 1);
  background: #000;
  border-radius: 50%;
  content: "";
  display: block;
  inset: 0;
  opacity: .2;
  position: absolute;
  transform: scale(1.2);
  transition: .2s background-color;
}

@keyframes wave {
  0% {
    opacity: .3;
    transform: scale(1);
  }

  10% {
    opacity: .3;
  }

  75%, 100% {
    opacity: 0;
    transform: scale(1.3);
  }
}

.look .ph .credit {
  animation: .4s cubic-bezier(0.19, 1, 0.22, 1);
  background: #000;
  color: #fff;
  display: none;
  font-size: 2.4rem;
  left: 0;
  position: absolute;
  top: 0;
  z-index: 4;
}

.look .ph .credit::before {
  aspect-ratio: 27/34;
  background: #000;
  content: "";
  display: block;
  left: 50%;
  position: absolute;
  width: 1.125em;
}

.look .ph .credit--up {
  transform: translate(-50%, -100%);
}

.look .ph .credit--up::before {
  -webkit-clip-path: polygon(50% 100%, 0 0, 100% 0);
  bottom: 0;
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  transform: translate(-50%, calc(100% - 0.1rem));
}

.look .ph .credit--up.is-show {
  animation-name: up-credit;
}

@keyframes up-credit {
  0% {
    opacity: 0;
    transform: translate(-50%, -85%);
  }

  100% {
    opacity: 1;
    transform: translate(-50%, -100%);
  }
}

.look .ph .credit--down {
  transform: translate(-50%, 0%);
}

.look .ph .credit--down::before {
  -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  top: 0;
  transform: translate(-50%, calc(-100% + 0.1rem));
}

.look .ph .credit--down.is-show {
  animation-name: up-down;
}

@keyframes up-down {
  0% {
    opacity: 0;
    transform: translate(-50%, -15%);
  }

  100% {
    opacity: 1;
    transform: translate(-50%, 0%);
  }
}

.look .ph .credit-inner {
  align-items: center;
  display: flex;
  gap: 1.0833333333em;
  padding: 1.0416666667em 1.4166666667em 1.0416666667em 1.0416666667em;
}

.look .ph .credit-txt {
  white-space: nowrap;
}

.look .ph .credit-icon {
  fill: #fff;
  line-height: 0;
  width: .9583333333em;
}

.look .ph .credit.comingsoon .comingsoon-txt {
  display: inline-block;
  font-size: .8em;
  margin-left: .5em;
  transform: translateY(-7%);
}

.look .ph .credit.comingsoon .credit-inner {
  pointer-events: none;
}

.look .ph .credit.comingsoon .credit-icon {
  opacity: .25;
}

.look .video {
  position: relative;
}

.look .video .videoPoster,
.look .video .videoEl {
  inset: 0;
  position: absolute;
}

.look-1 {
  margin-top: 23rem;
}

.look-1 .num {
  color: #f73e59;
  left: 0;
  margin: 6% 0 0 5.2%;
  position: absolute;
  top: 0;
  width: 10.1em;
}

.look-1 .ph-1 .icon {
  margin: 126.4% 0 0 65.8666666667%;
}

.look-1 .ph-1 .credit {
  margin: 126.4% 0 0 65.8666666667%;
}

.look-1 .ph-1 img {
  aspect-ratio: 750/1130;
}

.look-1 .video-1 {
  aspect-ratio: 325/223;
  margin: 47.0666666667% 0 0 9.4666666667%;
  width: 43.2%;
}

.look-1 .ph-2 {
  margin: -62.4% 0 0 31.2%;
  position: relative;
  width: 60.6666666667%;
  z-index: 1;
}

.look-1 .ph-2 img {
  aspect-ratio: 455/1253;
}

.look-1 .ph-2 .credit {
  inset: auto auto 0 0;
  margin: 0 0 45.0549450549% 2.4175824176%;
}

.look-1 .ph-2 .icon {
  inset: auto auto 0 0;
  margin: 0 0 45.0549450549% 2.4175824176%;
}

.look-1 .ph-3 {
  margin: -19.2% 0 0 -10.2666666667%;
  width: 120.5333333333%;
}

.look-1 .ph-3 img {
  aspect-ratio: 904/658;
}

.look-1 .txt {
  margin-top: 7.3333333333%;
}

.look-1 .block-1 {
  height: calc(var(--inner-h)*1px + 120rem);
}

.look-1 .sticky-item {
  position: sticky;
}

.look-1 .ph5-wrapper {
  aspect-ratio: 620/518;
  backface-visibility: hidden;
  height: auto;
  margin: 0 auto;
  margin-top: 21.6rem;
  position: relative;
  transform-origin: 50% 100%;
  width: 62rem;
}

.look-1 .ph-5 {
  align-content: space-between;
  aspect-ratio: 620/518;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.2899906455);
  width: 344.8387096774%;
}

.look-1 .ph-5 .img {
  -webkit-mask-image: url(../images/contents/look1_6-mask.svg);
  -webkit-mask-size: 100% 100%;
  aspect-ratio: 624/520;
  mask-image: url(../images/contents/look1_6-mask.svg);
  mask-size: 100% 100%;
  overflow: hidden;
  transform: scaleZ(1.1);
  width: 29.2329279701%;
}

.look-1 .ph-5 .img img {
  animation: sprite 4s steps(4) infinite;
  height: 100%;
  width: auto;
}

@keyframes sprite {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-100%);
  }
}

.look-1 .ph-6 {
  margin-top: 25.7333333333%;
  width: 97.3333333333%;
}

.look-1 .ph-6 .icon {
  margin: 43.4246575342% 0 0 10.6849315068%;
}

.look-1 .ph-6 .credit {
  margin: 67.6712328767% 0 0 35.6164383562%;
}

.look-1 .ph-6 img {
  aspect-ratio: 732/562;
}

.look-2 {
  margin-top: 19rem;
  padding-bottom: 22rem;
}

.look-2 .num {
  color: #707070;
  margin: 0 5.2% 0 auto;
  width: 10.8em;
}

.look-2 .ph-1,
.look-2 .ph-2 {
  width: 56%;
}

.look-2 .ph-1 img,
.look-2 .ph-2 img {
  aspect-ratio: 421/309;
}

.look-2 .ph-1 {
  margin: 10.2666666667% auto 0;
  transform: rotate(-1.499deg);
}

.look-2 .ph-2 {
  margin: 5.3333333333% auto 0;
}

.look-2 .ph-3 {
  margin: 30.2666666667% auto 0;
  width: 100%;
}

.look-2 .ph-3 .icon {
  margin: 115.2% 0 0 35.0666666667%;
}

.look-2 .ph-3 .credit {
  margin: 111.2% 0 0 40.4%;
}

.look-2 .ph-3 img {
  aspect-ratio: 750/1169;
}

.look-2 .ph-4 {
  margin: 17.8666666667% auto 0;
  width: 66.4%;
}

.look-2 .ph-4 .icon {
  margin: 69.2771084337% 0 0 80.1204819277%;
}

.look-2 .ph-4 .credit {
  margin: 51.2048192771% 0 0 58.0321285141%;
}

.look-2 .ph-4 img {
  aspect-ratio: 498/692;
}

.look-2 .ph-fish {
  width: 17.4666666667%;
  z-index: 2;
}

.look-2 .ph-fish img {
  aspect-ratio: 303/191;
}

.look-2 .wrapper-2 {
  position: relative;
}

.look-2 .wrapper-2 .ph-5 {
  left: 0;
  margin: 5.3333333333% auto 0 -17.4666666667%;
  opacity: 0;
  position: sticky;
  top: 20vh;
}

.look-2 .wrapper-2 .ph-5 img {
  transform: scaleX(-1);
}

.look-2 .wrapper-2 .video-1 {
  -webkit-mask-image: radial-gradient(circle closest-side, #000 90%, transparent 100%);
  aspect-ratio: 1;
  margin: 24.6666666667% auto 0;
  mask-image: radial-gradient(circle closest-side, #000 90%, transparent 100%);
  width: 76.9333333333%;
}

.look-2 .wrapper-2 .txt {
  color: #fff;
  margin-top: 26%;
}

.look-2 .block-1 {
  height: 250vh;
}

.look-2 .ph-6 {
  backface-visibility: hidden;
  margin: 0 auto;
  position: sticky;
  top: calc(50vh - 80.4vw);
  transform: scaleZ(1.1);
  width: 100%;
}

.look-2 .ph-6 .img {
  overflow: hidden;
}

.look-2 .block-2 {
  height: 250vh;
  margin-top: 26%;
  position: relative;
}

.look-2 .ph-7 {
  aspect-ratio: 498/788;
  backface-visibility: hidden;
  margin-left: 21.7333333333%;
  position: sticky;
  top: calc(50vh - 52.5333333333vw);
  transform: scaleZ(1.1);
  width: 66.4%;
}

.look-2 .ph-7 .img {
  inset: 0;
  position: absolute;
  transform-origin: 19.2771084337% 18.4010152284%;
}

.look-2 .ph-8 {
  margin-left: auto;
  opacity: 0;
  position: sticky;
  right: 0;
  top: 20vh;
}

.look-3 {
  padding-bottom: 17.8rem;
  padding-top: 16.2rem;
}

.look-3 .num {
  color: #fff;
  margin: 7.8231292517% 5.1020408163% 0 auto;
  position: absolute;
  right: 0;
  top: 0;
  width: 10.9em;
}

.look-3 .ph-1 {
  margin: 0 auto;
  width: 78.4%;
}

.look-3 .ph-1 .icon {
  margin: 61.2244897959% 0 0 78.5714285714%;
}

.look-3 .ph-1 .credit {
  margin: 81.6326530612% 0 0 64.9659863946%;
}

.look-3 .ph-1 img {
  aspect-ratio: 588/886;
}

.look-3 .txt-1 {
  margin-top: 8.1333333333%;
}

.look-3 .wrapper-1 {
  margin-top: 22.8%;
}

.look-3 .wrapper-1 .sticky-item {
  backface-visibility: hidden;
  height: 86vh;
  position: sticky;
  top: 7vh;
  transform: scaleZ(1.1);
}

.look-3 .wrapper-1 .sticky-item .ph,
.look-3 .wrapper-1 .sticky-item .video {
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}

.look-3 .wrapper-1 .sticky-item .ph-2 {
  height: 100%;
  width: 100%;
}

.look-3 .wrapper-1 .sticky-item .ph-2 img {
  -o-object-fit: cover;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.look-3 .wrapper-1 .sticky-item .video-0 {
  aspect-ratio: 302/564;
  border-radius: 50%;
  margin: -47.2% 0 0 -24.5333333333%;
  overflow: hidden;
  width: 40.2666666667%;
}

.look-3 .wrapper-1 .sticky-item .video-0 video {
  transform: scale(1.01);
}

.look-3 .wrapper-1 .sticky-item .ph-4 {
  margin: -40.8% 0 0 26.5333333333%;
  width: 46.9333333333%;
}

.look-3 .wrapper-1 .sticky-item .ph-4 img {
  aspect-ratio: 352/507;
}

.look-3 .wrapper-1 .sticky-item .ph-5 {
  margin: 0 0 0 3.0666666667%;
  width: 66.2666666667%;
}

.look-3 .wrapper-1 .sticky-item .ph-5 img {
  aspect-ratio: 497/622;
}

.look-3 .wrapper-1 .sticky-item .ph-6 {
  margin: 26.4% 0 0 -21.6%;
  width: 39.0666666667%;
}

.look-3 .wrapper-1 .sticky-item .ph-6 img {
  aspect-ratio: 325/251;
}

.look-3 .wrapper-1 .sticky-item .ph-7 {
  margin: 50.8% 0 0 28.1333333333%;
  width: 40.8%;
}

.look-3 .wrapper-1 .sticky-item .ph-7 img {
  aspect-ratio: 326/346;
}

.look-3 .wrapper-2 {
  background-image: url(../images/contents/look3_8-bg.svg);
  background-position: top left;
  background-size: 84.4vw 84.4vw;
  padding: 15rem 0;
}

.look-3 .wrapper-2 .videoWrapper {
  aspect-ratio: 1;
  margin: 0 auto;
  position: relative;
  width: 84.4%;
}

.look-3 .wrapper-2 .videoWrapper .video-mask {
  height: 0;
  width: 0;
}

.look-3 .wrapper-2 .videoWrapper .video-1 {
  -webkit-clip-path: url(#clipShape);
  clip-path: url(#clipShape);
  inset: 0;
  position: absolute;
}

.look-3 .wrapper-2 .videoWrapper .video-1 .videoEl {
  height: 100%;
  margin: 0 auto;
  width: auto;
}

.look-3 .wrapper-2 .ph-8 {
  aspect-ratio: 370/339.6;
  cursor: pointer;
  margin: 11.4666666667% auto 0;
  position: relative;
  width: 37rem;
  z-index: 2;
}

.look-3 .wrapper-2 .ph-8 .frame {
  left: 0;
  position: absolute;
  top: 0;
}

.look-3 .wrapper-2 .ph-8 .frame-wrapper {
  inset: 0;
  position: absolute;
  z-index: 2;
}

.look-3 .wrapper-2 .ph-8 .frame-current {
  inset: 0;
  opacity: 0;
  position: absolute;
  transform: scale(0.5);
  transition: opacity .1s,transform cubic-bezier(0.175, 0.885, 0.32, 1.275) .3s;
}

.look-3 .wrapper-2 .ph-8 .frame-current.is-default {
  opacity: 1;
  transform: scale(1);
}

.look-3 .wrapper-2 .ph-8 .frame.is-current {
  cursor: auto;
  pointer-events: none;
}

.look-3 .wrapper-2 .ph-8 .frame.is-current .frame-current {
  opacity: 1;
  transform: scale(1);
}

.look-3 .wrapper-2 .ph-8 .frame#frame1 {
  margin: 68.3783783784% 0 0 0;
  width: 21.0810810811%;
}

.look-3 .wrapper-2 .ph-8 .frame#frame2 {
  margin: 66.6216216216% 0 0 40.9459459459%;
  width: 18.4864864865%;
}

.look-3 .wrapper-2 .ph-8 .frame#frame3 {
  margin: 66.6216216216% 0 0 78.7837837838%;
  width: 17.9459459459%;
}

.look-3 .wrapper-2 .ph-8 .shape {
  inset: 0;
  opacity: 0;
  position: absolute;
}

.look-3 .wrapper-2 .ph-8 .shape:nth-of-type(1) {
  opacity: 1;
}

.look-3 .wrapper-2 .ph-8 .shape .dot {
  animation-delay: .3s;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  aspect-ratio: 1;
  background: #000;
  border-radius: 50%;
  left: calc(50% - .7rem);
  margin-top: 18.9189189189%;
  overflow: hidden;
  position: absolute;
  top: -0.7rem;
  transform: translate(0, 0) scale(0);
  width: 1.4rem;
}

.look-3 .wrapper-2 .ph-8 .shape.is-current:nth-of-type(1) .dot {
  animation-duration: 4s;
  animation-name: dot1;
}

@keyframes dot1 {
  0% {
    transform: translate(0, 0) scale(0);
  }

  5% {
    transform: translate(0, 0) scale(1);
  }

  30% {
    transform: translate(0, 7.8rem);
  }

  60% {
    transform: translate(-14.7rem, 7.8rem);
  }

  85% {
    transform: translate(-14.7rem, 18.3rem) scale(1);
  }

  90%, 100% {
    transform: translate(-14.7rem, 18.3rem) scale(0);
  }
}

.look-3 .wrapper-2 .ph-8 .shape.is-current:nth-of-type(2) .dot {
  animation-duration: 2.5s;
  animation-name: dot2;
}

@keyframes dot2 {
  0% {
    transform: translate(0) scale(0);
  }

  5% {
    transform: translate(0) scale(1);
  }

  85% {
    transform: translate(0, 17.5rem) scale(1);
  }

  90%, 100% {
    transform: translate(0, 17.5rem) scale(0);
  }
}

.look-3 .wrapper-2 .ph-8 .shape.is-current:nth-of-type(3) .dot {
  animation-duration: 4s;
  animation-name: dot3;
}

@keyframes dot3 {
  0% {
    transform: translate(0) scale(0);
  }

  5% {
    transform: translate(0) scale(1);
  }

  30% {
    transform: translate(0, 7.8rem);
  }

  60% {
    transform: translate(14.7rem, 7.8rem);
  }

  85% {
    transform: translate(14.7rem, 17.5rem) scale(1);
  }

  90%, 100% {
    transform: translate(14.7rem, 17.5rem) scale(0);
  }
}

.look-3 .wrapper-2 .txt-2 {
  margin-top: 14.5333333333%;
}

.look-3 .wrapper-3 {
  align-items: flex-start;
  display: flex;
  justify-content: center;
  position: relative;
}

.look-3 .wrapper-3::before,
.look-3 .wrapper-3::after {
  background-image: linear-gradient(90deg, #000 0.3rem, transparent 0.3rem);
  background-repeat: repeat-x;
  background-size: .8rem auto;
  content: "";
  display: block;
  height: .2rem;
  position: absolute;
  width: 100%;
  z-index: 1;
}

.look-3 .wrapper-3::before {
  top: -0.1rem;
}

.look-3 .wrapper-3::after {
  bottom: -0.1rem;
}

.look-3 .ph-9 {
  aspect-ratio: 509/696;
  flex-shrink: 0;
  width: 50.8rem;
}

.look-3 .ph-9::before {
  background-image: linear-gradient(#000 0.3rem, transparent 0.3rem);
  background-repeat: repeat-y;
  background-size: auto .8rem;
  content: "";
  display: block;
  height: 100%;
  position: absolute;
  right: -0.1rem;
  top: 0;
  width: .2rem;
  z-index: 1;
}

.look-3 .ph-9 .credit {
  margin: 69.8818897638% 0 0 60.2362204724%;
}

.look-3 .ph-9 .icon {
  margin: 61.811023622% 0 0 87.5984251969%;
}

.look-4 {
  position: sticky;
}

.look-4 .wrapper-1 {
  background: #000;
  overflow: hidden;
  position: relative;
}

.look-4 .wrapper-1 .word {
  left: 50%;
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  width: 59.2%;
  z-index: 1;
}

.look-4 .wrapper-1 .word-1 {
  margin-top: 51.4666666667%;
}

.look-4 .wrapper-1 .word-2 {
  margin-top: 108%;
}

.look-4 .wrapper-1 .video-1 {
  aspect-ratio: 750/1274;
}

.look-4 .num {
  color: #9c857f;
  margin: 35.3741496599% 12.5850340136% 0 auto;
  width: 11em;
}

.look-4 .video-2 {
  aspect-ratio: 385/248;
  margin: -14.1333333333% 0 0 8.2666666667%;
  width: 51.3333333333%;
}

.look-4 .ph-1 {
  margin-top: 1.2%;
}

.look-4 .ph-1 .credit4-1-1 {
  margin: 10.8% 0 0 38.6666666667%;
}

.look-4 .ph-1 .credit4-1-2 {
  margin: -8.4% 0 0 61.7333333333%;
}

.look-4 .ph-1 .icon {
  margin: 21.3333333333% 0 0 28%;
}

.look-4 .ph-1 img {
  aspect-ratio: 825/558;
  width: 110%;
}

.look-4 .ph-2 {
  margin-top: 1.2%;
}

.look-4 .ph-2 .credit4-2-1 {
  margin: 48% 0 0 34.6666666667%;
}

.look-4 .ph-2 .credit4-2-2 {
  margin: 26.6666666667% 0 0 29.3333333333%;
}

.look-4 .ph-2 .icon {
  margin: 76.8% 0 0 55.7333333333%;
}

.look-4 .ph-2 img {
  aspect-ratio: 787/529;
  width: 104.9333333333%;
}

.look-4 .txt-1 {
  margin-top: 18.5333333333%;
}

.look-4 .ph-3 {
  display: flex;
  flex-wrap: wrap;
  margin-top: 12.6666666667%;
}

.look-4 .ph-3 img {
  flex-shrink: 0;
  width: 50%;
}

.look-4 .block-1 {
  height: calc(100vh + 151.3rem);
  margin: 12rem auto 0;
}

.look-4 .block-1 .ph-wrapper {
  backface-visibility: hidden;
  position: sticky;
  top: calc(50vh - 73.7333333333vw);
  transform: scaleZ(1.1);
  width: 100%;
}

.look-4 .ph-4 {
  width: 151.3rem;
}

.look-4 .ph-4 svg {
  fill: #fff;
}

.look-4 .ph-4 .word-3 {
  left: 0;
  margin: 63.4500991408% 0 0 74.0251156642%;
  position: absolute;
  top: 0;
  width: 10.1123595506%;
}

.look-4 .wrapper-2 {
  padding: 47.6% 0;
}

.look-4 .wrapper-2 .block-2 {
  height: 200vh;
}

.look-4 .wrapper-2 .ph-5 {
  backface-visibility: hidden;
  margin: 0 auto;
  position: sticky;
  top: calc(50vh - 36.9333333333vw);
  transform: scaleZ(1.1);
  width: 50.9333333333%;
}

.look-4 .wrapper-2 .ph-6 {
  inset: 0;
  position: absolute;
}

.look-5 {
  background: #fff;
  position: relative;
  z-index: 1;
}

.look-5 .num {
  color: #ffd4c5;
  left: 0;
  margin: 7.7333333333% 0 0 6%;
  position: absolute;
  top: 0;
  width: 10.9em;
}

.look-5 .ph-1 .credit {
  margin: 144.8% 0 0 41.0666666667%;
}

.look-5 .ph-1 .icon {
  margin: 135.4666666667% 0 0 41.0666666667%;
}

.look-5 .ph-1 img {
  aspect-ratio: 750/1224;
}

.look-5 .ph-2 {
  margin: 16.6666666667% 0 0 30.1333333333%;
  width: 61.7333333333%;
}

.look-5 .ph-2 img {
  aspect-ratio: 463/307;
}

.look-5 .ph-3 {
  margin-left: 6.6666666667%;
  margin-top: -7.2%;
  transform-origin: 25% 50%;
  width: 63.2%;
  z-index: 2;
}

.look-5 .ph-3 .img {
  aspect-ratio: 474/430;
}

.look-5 .video-1 {
  aspect-ratio: 1;
  border-radius: 50%;
  margin: 3.5rem auto 0;
  overflow: hidden;
  width: 82.6666666667%;
}

.look-5 .txt-1 {
  margin-top: 10.8%;
}

.look-5 .ph-4 {
  margin: 18.6666666667% auto 0;
  width: 94.4%;
}

.look-5 .ph-4 img {
  aspect-ratio: 708/1041;
}

.look-5 .ph-4 .icon-1 {
  margin: 59.2% 0 0 29.4666666667%;
}

.look-5 .ph-4 .icon-2 {
  margin: 91.0666666667% 0 0 66.6666666667%;
}

.look-5 .ph-4 .icon-3 {
  margin: 121.3333333333% 0 0 37.7333333333%;
}

.look-5 .ph-4 .credit5-2 {
  margin: 32.5333333333% 0 0 56.1333333333%;
}

.look-5 .ph-4 .credit5-3 {
  margin: 75.0666666667% 0 0 66.6666666667%;
}

.look-5 .ph-4 .credit5-4 {
  margin: 134.6666666667% 0 0 37.7333333333%;
}

.look-5 .wrapper-2 {
  margin-top: 19.4666666667%;
  position: relative;
}

.look-5 .wrapper-2 .word-1 {
  color: #ffd4c5;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 88%;
  z-index: 1;
}

.look-5 .wrapper-2 .ph-5 {
  margin: 0 auto;
  width: 78.4%;
}

.look-5 .wrapper-2 .ph-5 img {
  aspect-ratio: 588/883;
}

.staff {
  font-size: 1.7rem;
  line-height: 1.3529411765;
  margin: 8rem auto 19rem;
  text-align: center;
}

.allItems {
  overflow: clip;
  position: relative;
}

.allItems__btn {
  align-items: center;
  aspect-ratio: 660/140;
  background: #d6443c;
  color: #000;
  display: flex;
  inset: 0;
  justify-content: center;
  margin: auto;
  position: absolute;
  transition: .2s;
  width: 88%;
  z-index: 1;
}

.allItems__btn-txt {
  display: block;
  margin: 0 auto;
  width: 23.9393939394%;
}

.allItems__btn-arw {
  display: block;
  margin-right: 8.4848484848%;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 2.8787878788%;
}

.allItems__bg {
  display: flex;
}

.allItems__bg .img {
  animation: ticker 20s linear infinite;
  aspect-ratio: 1856/690;
  flex-shrink: 0;
  width: 185.6rem;
}

@keyframes ticker {
  0% {
    transform: translateX(0%);
  }

  100% {
    transform: translateX(-100%);
  }
}

.special {
  font-size: 1.7rem;
  margin-top: 17.8666666667%;
}

.special-heading {
  margin: 0 auto;
  width: 40.4%;
}

.special-yt {
  aspect-ratio: 1440/1080;
  cursor: pointer;
  margin: 8% auto 0;
  overflow: hidden;
  position: relative;
  width: 80%;
}

.special-yt .poster {
  inset: 0;
  position: absolute;
}

.special-yt .poster-icon {
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 12.9682997118%;
  z-index: 2;
}

.special-yt .poster-icon .cls-1 {
  fill: #fff;
  opacity: .58;
}

.special-yt .poster img {
  transform: scale(1);
  transition: cubic-bezier(0.19, 1, 0.22, 1) .5s;
}

.special-txt {
  margin-top: 8.5333333333%;
  text-align: center;
}

.sns {
  display: flex;
  gap: 5.3333333333%;
  justify-content: center;
  margin-top: 20.8%;
}

.sns-item {
  width: 14.1333333333%;
}

.footer {
  color: #fff;
  font-size: 1.8rem;
  margin-top: 24.2666666667%;
  position: relative;
}

.footer-bg {
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

.footer-bg img,
.footer-bg picture {
  -o-object-fit: cover;
  height: 100%;
  object-fit: cover;
}

.footer-title {
  color: #a35ae2;
  display: flex;
  flex-direction: column;
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

.footer-title .item {
  margin: 0 auto;
  width: 100%;
}

.footer-title .item:nth-of-type(2) {
  margin: auto auto 0;
}

.footer-inner {
  padding: 125.3333333333% 0 14.1333333333%;
  position: relative;
  z-index: 1;
}

.footer-tabio {
  margin: 0 auto;
  width: 8.5555555556em;
}

.footer-copy {
  margin-top: 1.6111111111em;
  text-align: center;
}

.footer-pagetop {
  bottom: 0;
  cursor: pointer;
  display: block;
  margin: 0 3.4666666667% 13.8666666667% 0;
  position: absolute;
  right: 0;
  width: 5.6%;
  z-index: 2;
}

.menu {
  -ms-overflow-style: none;
  display: none;
  height: 100dvh;
  overflow-y: scroll;
  overscroll-behavior: none;
  position: fixed;
  scrollbar-width: none;
  top: 0;
  width: 100vw;
  z-index: 40;
}

.menu::-webkit-scrollbar {
  display: none;
}

.menu-inner {
  background: #fff;
}

.menu-close {
  cursor: pointer;
  position: fixed;
  right: 0;
  top: 0;
  width: 13.8666666667%;
  z-index: 2;
}

.menu-close svg {
  transition: .2s;
}

.menu-close .cls-1 {
  fill: none;
  stroke: #fff;
  stroke-miterlimit: 10;
  stroke-width: 2px;
}

.menu-title {
  left: 50%;
  position: fixed;
  top: 0;
  transform: translateX(-50%);
  width: 53.3333333333%;
  z-index: 2;
}

.menu-block {
  font-size: 2.3rem;
  padding-bottom: 9.3333333333%;
}

.menu-block .block-img {
  aspect-ratio: 750/536;
}

.menu-block .credit {
  margin-top: 3.4666666667%;
  text-align: center;
}

.menu-block .credit+.credit {
  margin-top: 1.7333333333%;
}

.menu-block .credit-icon {
  display: inline-block;
  margin-left: .7826086957em;
  width: 1.0869565217em;
}

.menu-block .credit-icon svg {
  transform: translateY(-8%);
}

.menu-block .credit.comingsoon {
  pointer-events: none;
}

.menu-block .credit.comingsoon .credit-icon {
  opacity: .25;
}

.menu-block .credit.comingsoon .comingsoon-txt {
  display: block;
  font-size: .9em;
  margin-top: .2em;
}

.menu-bottom {
  font-size: 1.8rem;
  padding: 13.0666666667% 0 13.6%;
  text-align: center;
}

.menu-bottom .tabio {
  margin: 0 auto;
  width: 8.5555555556em;
}

.menu-bottom .copy {
  margin-top: 1.5555555556em;
}

@media screen and (min-width: 769px) {
  html {
    font-size: 10px;
  }

  .sp {
    display: none !important;
  }

  .loading-txt {
    font-size: 1.4rem;
    left: calc(50% + 9rem);
    margin: 0;
    top: 32.4rem;
  }

  .loading .poster {
    left: calc(50% + 11.1rem);
    margin: 0;
    top: 22.6rem;
  }

  .fixed {
    width: 8.6rem;
  }

  .main {
    height: 88.2rem;
    overflow: hidden;
  }

  .main-title {
    width: 72.8rem;
  }

  .main-title .item {
    width: 44.6rem;
  }

  .main-title .item:nth-of-type(2) {
    margin-top: 52.0604395604%;
  }

  .main-txt {
    font-size: 1.2rem;
    height: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 72.8rem;
  }

  .main-txt .top {
    margin: 16.2087912088% 0 0 -21.7rem;
  }

  .main-txt .bottom {
    margin: 81.5934065934% -23.1rem 0 0;
  }

  .main-video {
    height: 100%;
  }

  .main-video .poster,
  .main-video .video {
    height: 100%;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
    width: 218.4rem;
  }

  .main-video .video .ytPlayer {
    aspect-ratio: 2184/1764;
    height: auto;
    width: 100%;
  }

  .main-video .video .videoEl {
    inset: 0;
    position: absolute;
  }

  .fish.is-anim1 {
    animation-duration: 4s;
    width: 21.1rem;
  }

  .fish.is-anim2 {
    width: 13rem;
  }

  .lead {
    font-size: 1.1rem;
    margin-top: 4.1rem;
  }

  .anc {
    font-size: 0.7466666667rem;
    margin-top: 10.4rem;
    width: 44.4rem;
  }

  .look .ph .icon {
    width: 3.6rem;
  }

  .look .ph .credit {
    font-size: 1.5rem;
  }

  .look .ph .credit-icon {
    width: 1.2666666667em;
  }

  .look {
    font-size: 0.7466666667rem;
  }

  .look .txt {
    font-size: 1.2rem;
    width: auto;
  }

  .look-1 {
    margin-top: 14rem;
  }

  .look-1 .ph-1 {
    margin: 0 auto;
    width: 56rem;
  }

  .look-1 .container-1 {
    margin: 0 auto;
    width: 56rem;
  }

  .look-1 .ph-3-pc {
    height: 108.1rem;
    margin-top: -80rem;
    position: relative;
    width: 100%;
  }

  .look-1 .ph-3-pc img {
    position: absolute;
    width: 63.2rem;
  }

  .look-1 .ph-3-pc img:nth-of-type(1) {
    left: calc(50% - max(64.453125vw,82.5rem));
    top: 0;
  }

  .look-1 .ph-3-pc img:nth-of-type(2) {
    bottom: 0;
    right: calc(50% - max(64.453125vw,82.5rem));
  }

  .look-1 .txt {
    margin-top: -23.5rem;
  }

  .look-1 .block-1 {
    height: calc(var(--inner-h)*1px + 80rem);
  }

  .look-1 .ph5-wrapper {
    margin-top: 16rem;
    width: 43.4rem;
  }

  .look-1 .ph-6 {
    margin: 12rem auto 0;
    width: 56rem;
  }

  .look-2 {
    margin-top: 22rem;
    padding-bottom: 19.2rem;
  }

  .look-2 .container-1 {
    margin: 0 auto;
    width: 68.6rem;
  }

  .look-2 .num {
    margin: 0 0 0 auto;
  }

  .look-2 .ph-1,
  .look-2 .ph-2 {
    width: 36.7rem;
  }

  .look-2 .ph-1 {
    margin-top: 5.9rem;
  }

  .look-2 .ph-2 {
    margin-top: 3.8rem;
  }

  .look-2 .container-2 {
    margin: 0 auto;
    max-width: 128rem;
  }

  .look-2 .ph-3 {
    margin: 13rem auto 0 0;
    width: 46.09375%;
  }

  .look-2 .ph-4 {
    margin: -37.890625% 0 0 61.015625%;
    width: 31.25%;
  }

  .look-2 .ph-fish {
    width: 13.1rem;
  }

  .look-2 .wrapper-2 .video-1 {
    margin-top: 25rem;
    width: 46.2rem;
  }

  .look-2 .wrapper-2 .txt {
    margin-top: 11.1rem;
  }

  .look-2 .block-1 {
    height: 250vh;
  }

  .look-2 .ph-6 {
    top: calc(50% - 38.1vh);
    width: min(95.703125%,122.5rem);
  }

  .look-2 .block-2 {
    margin-top: 16.3rem;
  }

  .look-2 .ph-7 {
    margin: 0 auto;
    top: calc(50% - 29.25vh);
    width: 36.9rem;
  }

  .look-3 {
    padding-top: 11.3rem;
  }

  .look-3 .ph-1 {
    width: 51rem;
  }

  .look-3 .txt-1 {
    margin-top: 6rem;
  }

  .look-3 .wrapper-1 {
    margin: 19.5rem auto 0;
    width: 56rem;
  }

  .look-3 .wrapper-1 .sticky-item {
    height: 90vh;
    top: 5vh;
  }

  .look-3 .wrapper-1 .sticky-item .ph-2 {
    height: calc(100% + 5vh);
    overflow: clip;
    top: 0;
    transform: translateX(-50%);
    width: 100vw;
  }

  .look-3 .wrapper-1 .sticky-item .ph-3 {
    width: 22rem;
  }

  .look-3 .wrapper-1 .sticky-item .ph-4 {
    width: 28.2rem;
  }

  .look-3 .wrapper-1 .sticky-item .ph-5 {
    margin: 0 0 0 3.0666666667%;
    width: 39.7rem;
  }

  .look-3 .wrapper-1 .sticky-item .ph-6 {
    margin: 26.4% 0 0 -21.6%;
    width: 39.0666666667%;
  }

  .look-3 .wrapper-1 .sticky-item .ph-7 {
    margin: 50.8% 0 0 28.1333333333%;
    width: 40.8%;
  }

  .look-3 .wrapper-2 {
    background-image: url(../images/contents/look3_8-bg.svg);
    background-position: top left;
    background-size: 47.2rem 47.2rem;
    padding: calc(15rem + 5vh) 0 15rem;
  }

  .look-3 .wrapper-2 .flex {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-inline: auto;
    width: min(90%,97.4rem);
  }

  .look-3 .wrapper-2 .videoWrapper {
    width: 48.4599589322%;
  }

  .look-3 .wrapper-2 .flex-col {
    width: 43.7371663244%;
  }

  .look-3 .wrapper-2 .ph-8 {
    margin: 0 auto;
    width: 69.014084507%;
  }

  .look-3 .wrapper-2 .ph-8 .shape .dot {
    left: 0;
    margin: 17.3469387755% 0 0 48.2993197279%;
    top: 0;
    width: 3.4013605442%;
  }

  .look-3 .wrapper-2 .ph-8 .shape.is-current:nth-of-type(1) .dot {
    animation-name: dot1-pc;
  }

@keyframes dot1-pc {
    0% {
      transform: translate(0, 0) scale(0);
    }

    5% {
      transform: translate(0, 0) scale(1);
    }

    30% {
      transform: translate(0, 615%);
    }

    60% {
      transform: translate(-1158%, 615%);
    }

    85% {
      transform: translate(-1158%, 1445%) scale(1);
    }

    90%, 100% {
      transform: translate(-1158%, 1445%) scale(0);
    }
}

  .look-3 .wrapper-2 .ph-8 .shape.is-current:nth-of-type(2) .dot {
    animation-name: dot2-pc;
  }

@keyframes dot2-pc {
    0% {
      transform: translate(0) scale(0);
    }

    5% {
      transform: translate(0) scale(1);
    }

    85% {
      transform: translate(0, 1400%) scale(1);
    }

    90%, 100% {
      transform: translate(0, 1385%) scale(0);
    }
}

  .look-3 .wrapper-2 .ph-8 .shape.is-current:nth-of-type(3) .dot {
    animation-name: dot3-pc;
  }

@keyframes dot3-pc {
    0% {
      transform: translate(0) scale(0);
    }

    5% {
      transform: translate(0) scale(1);
    }

    30% {
      transform: translate(0, 615%);
    }

    60% {
      transform: translate(1158%, 615%);
    }

    85% {
      transform: translate(1158%, 1390%) scale(1);
    }

    90%, 100% {
      transform: translate(1158%, 1390%) scale(0);
    }
}

  .look-3 .wrapper-2 .txt-2 {
    margin-top: 19.9530516432%;
  }

  .look-3 .wrapper-3::before,
  .look-3 .wrapper-3::after {
    background-image: linear-gradient(90deg, #000 0.2rem, transparent 0.2em);
    background-size: .5rem auto;
    height: .1rem;
  }

  .look-3 .wrapper-3::before {
    top: -0.05rem;
  }

  .look-3 .wrapper-3::after {
    bottom: -0.05rem;
  }

  .look-3 .ph-9::before {
    background-image: linear-gradient(#000 0.2rem, transparent 0.2rem);
    background-size: auto .5rem;
    right: -0.05rem;
    width: .1rem;
  }

  .look-4 .wrapper-1 {
    margin: 0 auto;
    width: 53.8rem;
  }

  .look-4 .container-1 {
    margin: 0 auto;
    width: min(100%,81.6rem);
  }

  .look-4 .num {
    margin: 10.8rem 17.1568627451% 0 auto;
  }

  .look-4 .video-2 {
    margin: 6.3rem 0 0 0;
    width: 31.4rem;
  }

  .look-4 .ph-1 {
    margin: -15.7rem 0 0 auto;
    width: clamp(77rem,60.15625vw,90rem);
  }

  .look-4 .ph-1 .credit4-1-1 {
    margin: 21.3333333333% 0 0 26.6666666667%;
  }

  .look-4 .ph-1 .credit4-1-2 {
    margin: 5.3333333333% 0 0 61.7333333333%;
  }

  .look-4 .ph-2 {
    margin: 8.3rem auto 0;
    width: 75.8rem;
  }

  .look-4 .ph-2 .icon {
    margin: 45.7783641161% 0 0 22.9551451187%;
  }

  .look-4 .ph-2 .credit4-2-1 {
    margin: 50.1319261214% 0 0 9.234828496%;
  }

  .look-4 .ph-2 .credit4-2-2 {
    margin-top: 34.6666666667%;
  }

  .look-4 .ph-2 img {
    width: 100%;
  }

  .look-4 .txt-1 {
    margin-top: 14rem;
  }

  .look-4 .ph-3 {
    margin: 12rem auto 0;
    width: 60rem;
  }

  .look-4 .block-1 {
    height: calc(var(--ph-h, 2089)/1280*100vh + 100vh);
    margin: 14.4rem auto 0;
  }

  .look-4 .block-1 .ph-wrapper {
    aspect-ratio: 1280/861;
    height: 90vh;
    margin-inline: auto;
    overflow: clip;
    top: 5vh;
    width: auto;
  }

  .look-4 .ph-4 {
    width: 163.203125%;
  }

  .look-4 .ph-4 .word-3 {
    left: 50%;
    margin: 11.4408808042% 0 0 34.0354236477%;
    top: 50%;
    width: 6.0315940641%;
  }

  .look-4 .ph-4 .img {
    display: block;
    height: 100%;
    width: auto;
  }

  .look-4 .wrapper-2 {
    padding: 24.2rem 0;
  }

  .look-4 .wrapper-2 .block-2 {
    height: 200vh;
  }

  .look-4 .wrapper-2 .ph-5 {
    top: calc(50% - 20.1vh);
    width: 27.7rem;
  }

  .look-5 {
    background: #fff;
    padding-top: 15.4rem;
  }

  .look-5 .ph-1 {
    margin: 0 auto;
    width: 56rem;
  }

  .look-5 .container-1 {
    margin: 0 auto;
    width: 95rem;
  }

  .look-5 .ph-2 {
    margin: 18.5rem 0 0 auto;
    width: 39rem;
  }

  .look-5 .ph-3 {
    margin-left: 0;
    width: 51.1rem;
  }

  .look-5 .ph-3.is-allowTouch {
    cursor: url("../images/contents/hand.png") 0 0,pointer;
  }

  .look-5 .video-1 {
    width: 52.2rem;
  }

  .look-5 .txt-1 {
    margin-top: 5.6rem;
  }

  .look-5 .ph-4 {
    margin-top: 10.6rem;
    width: 56rem;
  }

  .look-5 .wrapper-2 {
    margin: 12rem auto 0;
    width: 56rem;
  }

  .staff {
    font-size: 1.2rem;
    margin: 9rem auto 14.3rem;
  }

  .allItems__btn {
    width: 35.6rem;
  }

  .allItems__bg .img {
    animation-duration: 40s;
    width: 128rem;
  }

  .special {
    font-size: 1.3rem;
    margin-top: 14.7rem;
  }

  .special-heading {
    width: 22rem;
  }

  .special-yt {
    margin-top: 5rem;
    width: 50rem;
  }

  .special-txt {
    margin-top: 4.5rem;
  }

  .sns {
    gap: 2.6rem;
    margin-top: 15.3rem;
  }

  .sns-item {
    width: 6.5rem;
  }

  .footer {
    font-size: 1.1rem;
    margin: 17.4rem auto 0;
    max-width: 160rem;
    overflow: hidden;
  }

  .footer-title .item {
    width: 47rem;
  }

  .footer-inner {
    padding: 56.8rem 0 9.3rem;
  }

  .footer-pagetop {
    margin: 0 .9rem .9rem 0;
    width: 2.6rem;
  }

  .menu-bg {
    background: rgba(0,0,0,.5);
    height: 100%;
    position: fixed;
    width: 100%;
  }

  .menu-inner {
    margin-left: auto;
    position: relative;
    width: 46rem;
    z-index: 1;
  }

  .menu-close {
    width: 8.6rem;
  }

  .menu-title {
    left: auto;
    right: 46rem;
    transform: rotate(90deg);
    transform-origin: 16.2rem 16.2rem;
    width: 30rem;
  }

  .menu-block {
    font-size: 1.5rem;
  }

  .menu-bottom {
    font-size: 1.1rem;
  }
}

@media screen and (min-width: 769px)and (max-aspect-ratio: 1280/861) {
  .look-4 .block-1 .ph-wrapper {
    aspect-ratio: auto;
    height: auto;
    top: calc(50% - 43.05vh);
    width: 100%;
  }
}

@media screen and (max-width: 768px) {
  .pc {
    display: none !important;
  }
}

@media (hover: hover) {
  .fixed__tabio:hover {
    background: #000;
  }

  .fixed__tabio:hover svg {
    fill: #ffd22a;
  }

  .fixed__menu:hover {
    background: #000;
  }

  .fixed__menu:hover svg {
    fill: var(--current, #f73e59);
  }

  .anc-item:hover:nth-of-type(1) img {
    transform: translate(-5%, -5%) rotate(-2deg);
  }

  .anc-item:hover:nth-of-type(2) img {
    transform: translate(0%, -4%) rotate(1deg);
  }

  .anc-item:hover:nth-of-type(3) img {
    transform: translate(0, 0) rotate(-5deg);
  }

  .anc-item:hover:nth-of-type(4) img {
    transform: translate(5%, -5%) rotate(1deg);
  }

  .anc-item:hover:nth-of-type(5) img {
    transform: translate(-5%, -5%) rotate(-2deg);
  }

  .anc-item:hover:nth-of-type(6) img {
    transform: translate(2%, -2%) rotate(-8deg);
  }

  .look .ph .icon:hover {
    background: var(--sec-color);
  }

  .look .ph .icon:hover::before {
    background: var(--sec-color);
  }

  .look .ph .icon:hover svg {
    fill: #000;
  }

  .look .ph .credit-inner {
    opacity: 1;
    transition: opacity .15s cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  .look .ph .credit-inner:hover {
    opacity: .6;
  }

  .look-3 .wrapper-2 .ph-8 .frame:hover .frame-current {
    opacity: 1;
    transform: scale(1);
  }

  .allItems__btn:hover {
    background: #000;
    color: #d6443c;
  }

  .special-yt:hover .poster img {
    transform: scale(1.05);
  }

  .sns-item {
    transform: scale(1);
    transition: cubic-bezier(0.19, 1, 0.22, 1) .5s;
  }

  .sns-item:hover {
    transform: scale(1.05);
  }

  .menu-close:hover svg {
    fill: #fff;
  }

  .menu-close:hover .cls-1 {
    stroke: #000;
  }

  .menu-block .credit {
    transition: opacity .1s;
  }

  .menu-block .credit:hover {
    opacity: .5;
  }
}