/*--

  top

====================================================== --*/
@media screen and (max-width: 767px) {
  .l-all {
    margin-top: 0px;
    max-width: var(--width);
    min-width: 320px;
    width: 100%; } }

.l-contents__01 {
  left: 0px;
  transition: translate 500ms ease,
 left 500ms ease; }
  .l-contents__01[data-status="pagetop"] {
    transition: translate 1.5s cubic-bezier(0.19, 1, 0.22, 1), left 500ms ease;
    pointer-events: none; }
  .l-contents__01[data-status="resize"] {
    transition: translate 0.001s cubic-bezier(0.19, 1, 0.22, 1), left 500ms ease; }

.l-contents__02 {
  height: var(--height);
  left: 100cqi;
  overflow: auto;
  transition: left 500ms ease; }
  @media screen and (min-width: 768px) {
    .l-contents__02 {
      z-index: 10; } }

.l-contents__01, .l-contents__02 {
  background: var(--c-white);
  position: fixed;
  top: 0px;
  width: 100cqi; }
  @media screen and (min-width: 768px) {
    .l-contents__01, .l-contents__02 {
      display: contents; } }

@media screen and (max-width: 767px) {
  .l-all[data-status="story"] .l-contents__01 {
    left: 0%; }
  .l-all[data-status="story"] .l-contents__02 {
    left: 100cqi; }
  .l-all[data-status="more02"] .l-contents__01, .l-all[data-status="more"] .l-contents__01 {
    left: -100cqi; }
  .l-all[data-status="more02"] .l-contents__02, .l-all[data-status="more"] .l-contents__02 {
    left: 0cqi; }
  .l-all[data-status="more02"] .l-contents__01,
  .l-all[data-status="more02"] .l-contents__02 {
    transition: none; } }

/*-- contents --*/
/*-- ------------------------------------------------- --*/
.top {
  position: relative; }
  .top .c-title {
    margin-bottom: 7rem; }
    .top .c-title span,
    .top .c-title h2 {
      color: var(--c-pink); }
    .top .c-title h2 {
      font-size: 2.4rem;
      font-weight: 400;
      line-height: 1.5em; }
    .top .c-title p {
      color: #1f1f1f;
      content: attr(data-eng);
      display: block flow;
      font-family: "Manrope", sans-serif;
      font-size: 4.8rem;
      letter-spacing: 0.1em;
      line-height: 1.5em;
      margin-bottom: 5px; }
      @media screen and (max-width: 767px) {
        .top .c-title p {
          margin-bottom: 1.3cqi; } }

/*--

  mainvisual top

====================================================== --*/
.mainvisual {
  background: url(../images/mv.webp) no-repeat center 50%;
  background-size: cover;
  border-radius: calc(50cqi - 13.5px) calc(50cqi - 13.5px) 0px 0px;
  box-sizing: border-box;
  -ms-flex-positive: 10;
      flex-grow: 10;
  margin: 0px var(--padding) 0px;
  padding-top: 19rem; }
  @media screen and (min-width: 768px) {
    .mainvisual {
      background-position: center 80%; } }
  .mainvisual p {
    font-size: 4.7988cqi;
    font-weight: 500;
    line-height: 1.725em; }
    .mainvisual p span {
      font-size: 6.3984cqi; }
      .mainvisual p span em {
        color: var(--c-pink); }

/*--

  scroll top

====================================================== --*/
.scroll {
  height: 12rem;
  margin: 0px auto 0px;
  overflow: hidden;
  position: absolute;
  width: 5px;
  z-index: 10;
  inset: auto 0px 0rem; }
  .scroll::before {
    animation: scroll 1.75s ease 0s infinite;
    background: var(--c-black);
    border-radius: 100%;
    content: "";
    height: 5px;
    left: 0px;
    opacity: 0;
    position: absolute;
    top: 0%;
    width: 5px; }
  .scroll::after {
    background: var(--c-black);
    content: "";
    height: 100%;
    margin: auto;
    position: absolute;
    width: 1px;
    z-index: 1;
    inset: 0px 0px; }

@keyframes scroll {
  0% {
    opacity: 0;
    top: 0%; }
  2% {
    opacity: 1;
    top: 0%; }
  100% {
    opacity: 0;
    top: 100%; } }

/*--

  lead top

====================================================== --*/
.lead {
  display: block flex;
  -ms-flex-direction: column;
      flex-direction: column;
  gap: 5rem;
  height: 100%; }
  @media screen and (min-width: 768px) {
    .lead {
      gap: 8rem; } }
  .lead figure {
    -ms-flex-preferred-size: 47.16%;
        flex-basis: 47.16%;
    margin: 0px auto;
    min-width: 210px;
    overflow: hidden;
    width: 42rem; }
    .lead figure img {
      height: 100%;
      object-fit: cover;
      width: 100%; }
  .lead div {
    box-sizing: border-box;
    -ms-flex-preferred-size: 52.84%;
        flex-basis: 52.84%; }
  .lead p {
    font-size: 3.7324cqi;
    font-weight: 400;
    line-height: 2em;
    margin: 0px 0rem 0px var(--padding);
    text-align: left; }
    .lead p em {
      font-weight: 500; }
    .lead p + p {
      margin-top: 0.5lh; }
      @media screen and (min-width: 768px) {
        .lead p + p {
          margin-top: 1lh; } }

/*--

  scene top

====================================================== --*/
.scene {
  height: 100%;
  position: relative; }
  @media screen and (max-width: 767px) {
    .scene:is(.wrapper[data-status="current"] *) p,
    .scene:is(.wrapper[data-status="current"] *) h3 {
      opacity: 1;
      transform: translateY(0px);
      transition: transform 750ms ease 0.55s, opacity 750ms ease 0.55s; } }
  .scene__img {
    height: calc(100% - var(--headerHeight));
    left: 0px;
    margin: auto;
    position: absolute;
    top: var(--headerHeight);
    width: 100%;
    object-fit: cover;
    transition: all 250ms ease; }
    @media screen and (min-width: 768px) {
      .scene__img {
        height: 100%;
        top: 0px; } }
    .scene__img--01 {
      z-index: 1; }
    .scene__img--02 {
      z-index: 2; }
  .scene__text {
    background: linear-gradient(0deg, white 20%, rgba(255, 255, 255, 0) 100%);
    bottom: 0px;
    box-sizing: border-box;
    height: 40rem;
    left: 0px;
    padding: 0px 1rem 8rem 4rem;
    position: absolute;
    text-align: left;
    width: 100%;
    z-index: 5;
    display: block flex;
    -ms-flex-pack: start;
        justify-content: flex-start;
    -ms-flex-align: end;
        align-items: flex-end; }
    .scene__text h3 {
      font-size: 4rem;
      font-weight: 400;
      line-height: 1.6em;
      font-size: 5.332cqi; }
    .scene__text p {
      line-height: 2em;
      font-size: 3.7324cqi; }
    @media screen and (max-width: 767px) {
      .scene__text p,
      .scene__text h3 {
        opacity: 0;
        transform: translateY(10px);
        transition: transform 1ms ease 0.5s,
 opacity 1ms ease 0.5s; } }
    @media screen and (min-width: 768px) {
      .scene__text p,
      .scene__text h3 {
        opacity: 0;
        transform: translateY(10px); }
        .scene__text p[data-status="show"],
        .scene__text h3[data-status="show"] {
          opacity: 1;
          transition: transform 500ms ease 0s, opacity 500ms ease 0s;
          transform: translateY(0px); } }
  .scene--01 img {
    object-position: 50% 50%; }
  .scene--02 img {
    object-position: 50% 50%; }
  .scene--03 img {
    object-position: 50% 50%; }
  .scene--04 img {
    object-position: 50% 50%; }
  .scene--05 img {
    object-position: 50% 50%; }
  .scene--06 img {
    object-position: 50% 100%; }
  .scene--07 img {
    object-position: 50% 100%; }
  .scene--08 img {
    object-position: 50% 100%; }
  .scene--09 img {
    object-position: 50% 50%; }
  .scene--10 img {
    object-position: 50% 50%; }

/*--

  message top

====================================================== --*/
.message {
  box-sizing: border-box;
  -ms-flex-direction: column;
      flex-direction: column;
  gap: 6rem;
  height: 100%;
  padding: 20rem 0px 0px;
  position: relative;
  z-index: 1;
  display: block flex;
  -ms-flex-pack: center;
      justify-content: center;
  -ms-flex-align: center;
      align-items: center; }
  @media screen and (min-width: 768px) {
    .message {
      gap: 12rem;
      padding-top: 15rem; } }
  .message::after {
    background: url(../../../assets/images/wave_top.webp) repeat-x center top, url(../../../assets/images/wave_bottom.webp) repeat-x center bottom, var(--c-yellow);
    background-size: 100% auto;
    bottom: 0%;
    content: "";
    height: 65%;
    left: 0px;
    position: absolute;
    width: 100%;
    z-index: -1;
    aspect-ratio: 750 / 1080; }
  .message figure {
    -ms-flex-preferred-size: 50%;
        flex-basis: 50%;
    margin: 0px auto 0px;
    min-width: 210px;
    overflow: hidden;
    width: 56%; }
    .message figure img {
      height: 100%;
      object-fit: cover;
      width: 100%; }
  .message div {
    -ms-flex-preferred-size: calc(60% - 50px);
        flex-basis: calc(60% - 50px);
    margin: 0px 0px;
    text-align: center; }
  .message h3 {
    font-weight: 500;
    line-height: 1.5em;
    font-size: 5.332cqi; }
  .message p {
    font-size: 3.999cqi;
    line-height: 2em;
    margin: 1lh 0px 0px; }
    @media screen and (max-width: 767px) {
      .message p {
        margin-top: 0.5lh; } }

/*--

  feature top

====================================================== --*/
.features {
  padding-bottom: 8rem;
  padding-top: calc(var(--headerHeight) + 10rem); }
  @media screen and (min-width: 768px) {
    .features {
      padding-top: 10rem; } }
  .features__list {
    margin-bottom: 6rem; }
    .features__list ul {
      -ms-flex-wrap: nowrap;
          flex-wrap: nowrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
      gap: 8cqi 2rem;
      padding-inline: var(--padding);
      display: block flex;
      -ms-flex-pack: start;
          justify-content: flex-start;
      -ms-flex-align: start;
          align-items: flex-start; }
      .features__list ul[data-status] li:nth-of-type(8) ~ li {
        display: block;
        animation: clipmask_ttb 500ms ease 0s 1 forwards; }
      .features__list ul[data-status="show1"] li:nth-of-type(16) ~ li {
        display: none; }
      .features__list ul[data-status="show2"] li:nth-of-type(24) ~ li {
        display: none; }
      .features__list ul[data-status="show3"] li:nth-of-type(32) ~ li {
        display: none; }
      .features__list ul[data-status="show4"] li:nth-of-type(40) ~ li {
        display: none; }
      .features__list ul[data-status="show5"] li:nth-of-type(48) ~ li {
        display: none; }
      .features__list ul[data-status="show6"] li:nth-of-type(56) ~ li {
        display: none; }
      .features__list ul[data-status="show7"] li:nth-of-type(64) ~ li {
        display: none; }
      .features__list ul[data-status="show8"] li:nth-of-type(72) ~ li {
        display: none; }
      .features__list ul[data-status="show9"] li:nth-of-type(80) ~ li {
        display: none; }
      .features__list ul[data-status="show10"] li:nth-of-type(88) ~ li {
        display: none; }
      .features__list ul li {
        -ms-flex-preferred-size: calc(50% - 1rem);
            flex-basis: calc(50% - 1rem);
        -ms-flex-negative: 0;
            flex-shrink: 0; }
        .features__list ul li:nth-of-type(8) ~ li {
          display: none; }
        .features__list ul li img {
          width: 100%; }
        .features__list ul li a {
          display: block flow;
          text-align: left;
          text-decoration: none;
          transition: all 250ms ease; }
          .features__list ul li a:hover {
            opacity: 0.5; }
        .features__list ul li h3 {
          font-size: 3.999cqi;
          font-weight: 400;
          line-height: 1.5em;
          margin-block: 2.5rem;
          word-break: break-all;
          word-wrap: break-word; }
        .features__list ul li p {
          font-size: 3.1992cqi;
          line-height: 1.5em; }
        .features__list ul li figure {
          position: relative; }
          .features__list ul li figure figcaption {
            font-size: 3.1992cqi;
            margin: auto;
            position: absolute;
            inset: 0px;
            display: block flex;
            -ms-flex-pack: center;
                justify-content: center;
            -ms-flex-align: center;
                align-items: center; }
  .features__more button {
    background: var(--c-white);
    border: 1px solid currentColor;
    border-radius: 0px;
    box-sizing: border-box;
    color: var(--c-darkgray);
    cursor: pointer;
    font-family: "Manrope", sans-serif;
    font-size: 3.1992cqi;
    gap: 1rem;
    height: 6rem;
    margin: 0px auto;
    width: 24rem;
    transition: all 250ms ease;
    display: block flex;
    -ms-flex-pack: center;
        justify-content: center;
    -ms-flex-align: center;
        align-items: center;
    -moz-appearance: none;
         appearance: none;
    -webkit-appearance: none; }
    .features__more button:hover {
      opacity: 0.5; }
    .features__more button::after {
      background: currentColor;
      content: "";
      height: 1.7rem;
      width: 1.7rem;
      clip-path: polygon(100% 47.06%, 52.94% 47.06%, 52.94% 0%, 47.06% 0%, 47.06% 47.06%, 0% 47.06%, 0% 52.94%, 47.06% 52.94%, 47.06% 100%, 52.94% 100%, 52.94% 52.94%, 100% 52.94%); }

@keyframes clipmask_ttb {
  0% {
    clip-path: inset(0% 0% 100% 0%); }
  100% {
    clip-path: inset(0% 0% 0% 0%); } }

/*--

  onlinestore top

====================================================== --*/
.onlinestore {
  background: url(../../../assets/images/wave_top.webp) repeat-x center top, url(../../../assets/images/wave_bottom.webp) repeat-x center bottom, var(--c-yellow);
  background-size: 100% auto;
  padding: 17rem var(--padding) 15rem;
  position: relative; }
  @media screen and (max-width: 767px) {
    .onlinestore {
      padding-bottom: 80px; } }
  .onlinestore ul {
    margin-bottom: 7rem;
    padding-bottom: 4rem;
    border-bottom: 1px solid #ceb795; }
    .onlinestore ul li {
      background: var(--c-white);
      border-radius: 10px;
      margin-bottom: 3rem; }
    .onlinestore ul a {
      gap: 2.66cqi;
      padding: 2.66cqi;
      text-decoration: none;
      display: block flex;
      -ms-flex-pack: center;
          justify-content: center;
      -ms-flex-align: center;
          align-items: center; }
      .onlinestore ul a::after {
        background: url(../images/icon_cart.svg) no-repeat center;
        content: "";
        -ms-flex-negative: 0;
            flex-shrink: 0;
        height: 10.666cqi;
        width: 10.666cqi; }
      .onlinestore ul a i {
        -ms-flex-negative: 0;
            flex-shrink: 0;
        height: 12cqi;
        width: 12cqi;
        display: block flex;
        -ms-flex-pack: center;
            justify-content: center;
        -ms-flex-align: center;
            align-items: center; }
        .onlinestore ul a i img {
          width: 100%; }
      .onlinestore ul a div {
        -ms-flex-positive: 10;
            flex-grow: 10;
        text-align: left; }
        .onlinestore ul a div h3 {
          font-size: 3.999cqi;
          font-weight: 500;
          line-height: 1.5em; }
        .onlinestore ul a div p {
          font-size: 3.1992cqi;
          line-height: 1.5em; }
  .onlinestore nav {
    margin: 0px auto;
    width: 64cqi; }
    .onlinestore nav a {
      background: var(--c-white);
      border-radius: 13.333cqi;
      font-size: 4cqi;
      gap: 1.2cqi;
      height: 13.333cqi;
      line-height: 1.2em;
      text-decoration: none;
      display: block flex;
      -ms-flex-pack: center;
          justify-content: center;
      -ms-flex-align: center;
          align-items: center; }
      .onlinestore nav a::before {
        background: url(../images/icon_book.svg) no-repeat center;
        background-size: contain;
        content: "";
        -ms-flex-negative: 0;
            flex-shrink: 0;
        height: 8cqi;
        margin-right: 3cqi;
        width: 8cqi; }
      .onlinestore nav a::after {
        background: url(../../../assets/images/arrow_03.svg) no-repeat center;
        background-size: contain;
        content: "";
        -ms-flex-negative: 0;
            flex-shrink: 0;
        width: 1.2cqi;
        aspect-ratio: 8.5 / 15.7; }

/*--

  op top

====================================================== --*/
.op {
  background: var(--c-white);
  margin: auto;
  opacity: 1;
  pointer-events: none;
  position: fixed;
  z-index: 1000;
  inset: 0px 0px auto;
  height: var(--height);
  display: block flex;
  -ms-flex-pack: center;
      justify-content: center;
  -ms-flex-align: center;
      align-items: center; }
  .op[data-status="start"]::before, .op[data-status="start"]::after {
    animation: fadein 1s ease 0.1s 1 forwards;
    height: 16rem;
    opacity: 0;
    transition: opacity 500ms ease 0.1s; }
  .op[data-status="start"] div {
    animation: fadein 1s ease 0.1s 1 forwards;
    opacity: 0; }
  .op[data-status="finish"] {
    opacity: 0;
    pointer-events: none;
    transition: opacity 1000ms ease 0.5s; }
    .op[data-status="finish"]::before, .op[data-status="finish"]::after {
      height: 16rem;
      opacity: 1; }
    .op[data-status="finish"] div {
      opacity: 1; }
  .op[data-status="hide"] {
    display: none; }
  .op::before, .op::after {
    content: "";
    height: 13rem;
    left: 0px;
    opacity: 0;
    position: absolute;
    width: 100%;
    z-index: -1; }
  .op::before {
    background: url(../../../assets/images/wave_bottom.webp) repeat-x center bottom, var(--c-yellow);
    background-size: auto 20rem;
    top: 0%; }
  .op::after {
    background: url(../../../assets/images/wave_top.webp) repeat-x center top, var(--c-yellow);
    background-size: auto 20rem;
    bottom: 0%; }
  .op div {
    background: url(../images/poster.webp) no-repeat center;
    background-size: contain;
    height: 30rem;
    opacity: 0;
    width: 30rem; }
    @media screen and (max-width: 767px) {
      .op div {
        height: 150px;
        width: 150px; } }
  .op video {
    background: transparent;
    height: 100%;
    width: 100%; }

.wrapper {
  box-sizing: border-box;
  height: var(--height);
  position: relative;
  z-index: 1;
  scroll-snap-align: start; }
  @media screen and (min-width: 768px) {
    .wrapper {
      height: 100vh; } }
  .wrapper--01 {
    display: block flex;
    -ms-flex-direction: column;
        flex-direction: column;
    padding-bottom: var(--padding);
    padding-top: 24rem; }
    @media screen and (min-width: 768px) {
      .wrapper--01 {
        box-sizing: border-box;
        height: 100vh;
        padding-bottom: 7rem;
        padding-top: 7rem; } }
    .wrapper--01::after {
      background: url(../images/bg_01.webp) repeat-x center bottom;
      background-size: auto 100%;
      bottom: -30rem;
      content: "";
      height: 90rem;
      left: 0px;
      position: absolute;
      width: 100%;
      z-index: -1; }
  .wrapper--02 {
    padding: 20rem 0px 5rem; }
    @media screen and (min-width: 768px) {
      .wrapper--02 {
        padding: 5rem 0px 5rem; } }
  .wrapper--06 {
    z-index: auto; }
  .wrapper--05 {
    height: auto;
    z-index: 12; }

.switch {
  height: 46rem;
  display: block flex;
  -ms-flex-pack: center;
      justify-content: center;
  -ms-flex-align: center;
      align-items: center; }
  @media screen and (min-width: 768px) {
    .switch {
      display: none; } }
  .switch a {
    font-size: 3rem;
    font-weight: 700;
    gap: 10px;
    text-decoration: underline;
    display: inline flex;
    -ms-flex-pack: center;
        justify-content: center;
    -ms-flex-align: center;
        align-items: center; }
    .switch a::before, .switch a::after {
      background: currentColor;
      height: 2.3rem;
      margin-top: 5px;
      width: 1.3rem;
      clip-path: polygon(11.26% 100%, 0% 93.6%, 77.4% 49.98%, 0% 6.35%, 11.26% 0%, 100% 49.98%, 11.26% 100%); }
    .switch a::after {
      content: ""; }
  .switch--reverse a::after {
    content: none; }
  .switch--reverse a::before {
    content: "";
    scale: -1 1; }