:root {
  color-scheme: light;
  font-family: "Noto Sans JP", "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-synthesis: none;
}

body {
  margin: 0;
  background: #eeeae5;
  color: #1b2834;
}

.sec_promo {
  padding: 34px 18px 38px;

  > .wrap {
    width: min(100%, 1320px);
    margin: 0 auto;
  }

  .page-head {
    padding: 0 0 18px;

    .eyebrow {
      margin: 0 0 7px;
      color: #c44b42;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.22em;
    }

    h1 {
      margin: 0 0 5px;
      font-size: clamp(22px, 3vw, 32px);
      font-weight: 800;
      letter-spacing: -0.04em;
    }

    p:last-child {
      margin: 0;
      color: #5f6b73;
      font-size: 13px;
      line-height: 1.6;
    }
  }

  .stage-shell {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #111e2a;
    box-shadow: 0 24px 72px #1624322e;
  }

  .stage {
    position: absolute;
    top: 0;
    left: 0;
    width: 1280px;
    height: 720px;
    overflow: hidden;
    background: #172734;
    transform-origin: top left;
  }

  .scene {
    position: absolute;
    inset: 0;
    width: 1280px;
    height: 720px;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;

    h2,
    p {
      margin: 0;
    }

    em {
      font-style: normal;
    }
  }

  .scene-top {
    position: absolute;
    z-index: 8;
    top: 42px;
    left: 64px;
    right: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.13em;

    &.light {
      color: #fff;
    }

    &.dark {
      color: #253544;
    }

    .brand-small {
      font-size: 20px;
      font-weight: 900;
      letter-spacing: -0.065em;

      span {
        color: #e65e4e;
      }
    }
  }

  .kicker {
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 0.22em;
  }

  .animate {
    opacity: 0;
    will-change: opacity, translate;
  }

  .scene-intro {
    background: #382d2a;

    .intro-photo {
      position: absolute;
      inset: 0;
      background-image: url("assets/atelier.png");
      background-size: cover;
      background-position: center center;
      transform-origin: center center;
      will-change: transform;
    }

    .intro-shade {
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, #152534ec 0%, #152534c4 33%, #1525343d 62%, #1525340d 100%);
    }

    .intro-copy {
      position: absolute;
      z-index: 3;
      top: 202px;
      left: 72px;
      width: 760px;
      color: #fff;

      .kicker {
        margin: 0 0 28px;
        color: #f4b0a4;
      }

      h2 {
        font-size: 74px;
        font-weight: 900;
        line-height: 1.28;
        letter-spacing: -0.075em;
        text-shadow: 0 6px 28px #09131a38;

        em {
          color: #fff0e4;
        }
      }

      .intro-rule {
        width: 78px;
        height: 5px;
        margin: 32px 0 18px;
        background: #e45f50;
      }

      .intro-sub {
        font-size: 23px;
        font-weight: 700;
        letter-spacing: 0.045em;
      }
    }

    .intro-index {
      position: absolute;
      right: 65px;
      bottom: 69px;
      display: flex;
      align-items: flex-end;
      gap: 13px;
      color: #fff;
      font-size: 66px;
      font-weight: 300;
      line-height: 1;
      letter-spacing: -0.08em;

      span {
        padding: 0 0 8px;
        font-size: 9px;
        font-weight: 800;
        letter-spacing: 0.14em;
      }
    }
  }

  .scene-templates {
    background: #f4f1e9;

    &::before {
      position: absolute;
      top: -360px;
      right: -170px;
      width: 850px;
      height: 850px;
      border-radius: 50%;
      background: #e5ddd1;
      content: "";
    }

    .templates-copy {
      position: absolute;
      z-index: 5;
      top: 205px;
      left: 72px;
      width: 515px;

      .kicker {
        margin: 0 0 26px;
        color: #d4584e;
      }

      h2 {
        font-size: 61px;
        font-weight: 900;
        line-height: 1.32;
        letter-spacing: -0.07em;

        em {
          color: #d75d50;
        }
      }

      > p:last-child {
        margin: 28px 0 0;
        color: #53616a;
        font-size: 20px;
        font-weight: 700;
      }
    }

    .template-deck {
      position: absolute;
      top: 130px;
      right: 74px;
      width: 585px;
      height: 470px;
    }

    .template-card {
      position: absolute;
      width: 356px;
      height: 433px;
      overflow: hidden;
      border: 1px solid #ffffffde;
      border-radius: 15px;
      background: #fff;
      box-shadow: 0 25px 52px #25354434;
    }

    .card-back {
      top: 50px;
      right: 240px;
      transform: rotate(-11deg) scale(0.84);
    }

    .card-middle {
      top: 32px;
      right: 105px;
      transform: rotate(6deg) scale(0.91);
    }

    .card-front {
      top: 19px;
      right: 3px;
      transform: rotate(-3deg);
    }

    .templates-decor {
      position: absolute;
      right: 34px;
      bottom: 42px;
      color: #d7cec2;
      font-size: 110px;
      font-weight: 900;
      line-height: 1;
      letter-spacing: -0.13em;
    }
  }

  .browser-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 25px;
    padding: 0 13px;
    border-bottom: 1px solid #edeae7;
    background: #fff;

    i {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: #d4d9da;
    }
  }

  .layout-blue,
  .layout-sand,
  .layout-coral {
    height: 410px;
    padding: 24px 21px;
    background: #f3f8f8;

    .site-nav {
      width: 58px;
      height: 7px;
      margin: 0 0 24px;
      border-radius: 9px;
      background: currentColor;
    }

    .site-hero {
      display: flex;
      flex-direction: column;
      gap: 10px;
      height: 202px;
      padding: 30px 19px;
      border-radius: 5px;
      background: #dce9e7;

      b {
        width: 70%;
        height: 23px;
        border-radius: 2px;
        background: currentColor;
      }

      small {
        width: 40%;
        height: 7px;
        border-radius: 2px;
        background: currentColor;
        opacity: 0.42;

        &:last-child {
          width: 33%;
        }
      }
    }

    .site-columns {
      display: flex;
      gap: 8px;
      margin: 16px 0 0;

      span {
        flex: 1;
        height: 81px;
        border-radius: 4px;
        background: #dce9e7;
      }
    }
  }

  .layout-blue {
    color: #335c6c;
  }

  .layout-sand {
    color: #8a594d;
    background: #faf3ec;

    .site-hero,
    .site-columns span {
      background: #e9d8ca;
    }
  }

  .layout-coral {
    color: #a64542;
    background: #fff8f2;

    .site-hero,
    .site-columns span {
      background: #f1d6c8;
    }

    .site-hero {
      background: linear-gradient(125deg, #f2d6c9 0%, #edac9e 100%);
    }
  }

  .scene-custom {
    background: #e2e7e2;

    &::before {
      position: absolute;
      top: 0;
      right: 0;
      width: 660px;
      height: 720px;
      background: #d45b51;
      content: "";
    }

    .custom-copy {
      position: absolute;
      z-index: 5;
      top: 183px;
      left: 73px;
      width: 500px;

      .kicker {
        margin: 0 0 28px;
        color: #c44b42;
      }

      h2 {
        font-size: 66px;
        font-weight: 900;
        line-height: 1.25;
        letter-spacing: -0.075em;

        em {
          color: #cb544b;
        }
      }

      > p:last-child {
        margin: 22px 0 0;
        color: #55676d;
        font-size: 19px;
        font-weight: 700;
      }
    }

    .custom-browser {
      position: absolute;
      z-index: 3;
      top: 129px;
      right: 55px;
      width: 574px;
      height: 454px;
      overflow: hidden;
      border: 7px solid #fff;
      border-radius: 17px;
      background: #fff;
      box-shadow: 0 34px 70px #2936484d;
      transform: rotate(3deg);
    }

    .custom-page {
      height: 415px;
      padding: 0 0 14px;
      background: #fffaf5;

      .custom-nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 49px;
        padding: 0 27px;
        color: #2d3e41;

        .mini-logo {
          font-family: Georgia, serif;
          font-size: 21px;
          font-style: italic;
          font-weight: 700;
        }

        .mini-nav-lines {
          width: 107px;
          height: 5px;
          border-radius: 5px;
          background: #bdc4c2;
          box-shadow: -39px 10px 0 -1px #d9dcda;
        }
      }

      .custom-hero {
        position: relative;
        height: 252px;
        overflow: hidden;
        background: #e4dfd6;

        .custom-photo {
          position: absolute;
          inset: 0;
          background-image: url("assets/atelier.png");
          background-size: cover;
          background-position: center center;
        }

        .custom-hero-text {
          position: absolute;
          inset: 0;
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          padding: 58px 29px;
          background: linear-gradient(90deg, #faf5e6e8 0%, #faf5e69c 58%, #faf5e600 100%);

          i {
            margin: 0 0 13px;
            color: #b94f48;
            font-size: 9px;
            font-style: normal;
            font-weight: 900;
            letter-spacing: 0.19em;
          }

          b {
            color: #213236;
            font-size: 32px;
            font-weight: 900;
            line-height: 1.25;
            letter-spacing: -0.06em;
          }

          small {
            width: 135px;
            height: 5px;
            margin: 13px 0 0;
            border-radius: 3px;
            background: #596763;
            opacity: 0.54;

            &:last-child {
              width: 106px;
              margin: 6px 0 0;
            }
          }
        }
      }

      .custom-row {
        display: flex;
        gap: 11px;
        padding: 19px 26px;

        span {
          flex: 1;
          height: 50px;
          border-radius: 4px;
          background: #eee4da;
        }
      }
    }

    .custom-sticker {
      position: absolute;
      z-index: 6;
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 149px;
      height: 53px;
      padding: 0 16px;
      border-radius: 4px;
      background: #fff;
      box-shadow: 0 12px 24px #28383d2b;
      color: #29404a;
      font-size: 12px;
      font-weight: 900;
      letter-spacing: 0.14em;

      span {
        color: #d35b50;
        font-size: 21px;
      }
    }

    .sticker-photo {
      right: 33px;
      bottom: 112px;
      transform: rotate(8deg);
    }

    .sticker-words {
      right: 393px;
      bottom: 65px;
      transform: rotate(-6deg);
    }
  }

  .scene-end {
    background: #142633;
    color: #fff;

    &::before {
      position: absolute;
      top: -180px;
      right: -80px;
      width: 650px;
      height: 650px;
      border-radius: 50%;
      background: radial-gradient(circle, #e15f5238 0%, #e15f5200 70%);
      content: "";
    }

    .end-orbit {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 1000px;
      height: 1000px;
      border: 1px solid #d7d1c432;
      border-radius: 50%;
      transform: translate(-50%, -50%);
    }

    .orbit-two {
      width: 705px;
      height: 705px;
      border-color: #d7d1c422;
    }

    .end-top {
      position: absolute;
      top: 45px;
      left: 66px;
      color: #d5a4a0;
      font-size: 12px;
      font-weight: 900;
      letter-spacing: 0.2em;
    }

    .end-center {
      position: absolute;
      z-index: 3;
      top: 210px;
      left: 0;
      width: 1280px;
      text-align: center;

      .end-mark {
        font-size: 103px;
        font-weight: 950;
        line-height: 1;
        letter-spacing: -0.095em;

        > span:first-child {
          color: #e65e4e;
        }

        .mark-period {
          color: #e65e4e;
        }
      }

      .end-line {
        width: 71px;
        height: 4px;
        margin: 39px auto 25px;
        background: #e65e4e;
      }

      h2 {
        font-size: 34px;
        font-weight: 900;
        letter-spacing: -0.04em;
      }

      p {
        margin: 15px 0 0;
        color: #b8c7cd;
        font-size: 19px;
        font-weight: 700;
      }
    }

    .end-bottom {
      position: absolute;
      right: 66px;
      bottom: 67px;
      left: 66px;
      display: flex;
      justify-content: space-between;
      padding: 20px 0 0;
      border-top: 1px solid #9cb1bd54;
      color: #d7e1e4;
      font-size: 13px;
      font-weight: 800;
      letter-spacing: 0.07em;
    }
  }

  .stage-foot {
    position: absolute;
    z-index: 20;
    right: 64px;
    bottom: 17px;
    left: 64px;
    display: flex;
    justify-content: space-between;
    color: #ffffffc9;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.13em;
    pointer-events: none;
    text-shadow: 0 1px 7px #16242bb8;
  }

  .stage-progress {
    position: absolute;
    z-index: 30;
    right: 0;
    bottom: 0;
    left: 0;
    height: 5px;
    background: #ffffff44;

    span {
      display: block;
      width: 0;
      height: 100%;
      background: #e76150;
    }
  }

  .player-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 70px;
    padding: 14px 18px;
    background: #182a37;
    color: #fff;

    button {
      min-width: 93px;
      min-height: 40px;
      padding: 7px 12px;
      border: 1px solid #7d98a5;
      border-radius: 7px;
      background: #254354;
      color: #fff;
      cursor: pointer;
      font: inherit;
      font-size: 13px;
      font-weight: 800;

      &:hover,
      &:focus-visible {
        border-color: #e8aaa1;
        background: #315465;
      }
    }

    .seek-label {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
    }

    input[type="range"] {
      flex: 1;
      min-width: 50px;
      accent-color: #e76150;
      cursor: pointer;
    }

    output {
      min-width: 82px;
      color: #c6d5db;
      font-size: 12px;
      font-variant-numeric: tabular-nums;
      text-align: right;
    }
  }

  .caption-line {
    min-height: 54px;
    padding: 14px 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff7f1;
    border-top: 1px solid #ebded6;
    color: #243740;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.6;
    text-align: center;
  }

  .narrations {
    display: none;
  }

  .sample-note {
    margin: 11px 2px 0;
    color: #69747a;
    font-size: 12px;
    line-height: 1.7;
  }

  @media (max-width: 680px) {
    padding: 0 0 18px;

    .page-head {
      padding: 18px 16px 15px;

      p:last-child {
        font-size: 12px;
      }
    }

    .player-controls {
      flex-wrap: wrap;
      gap: 8px;
      padding: 10px 12px;

      button {
        min-width: 84px;
      }

      input[type="range"] {
        order: 3;
        flex-basis: 100%;
      }

      output {
        margin-left: auto;
      }
    }

    .caption-line {
      min-height: 62px;
      padding: 12px 16px;
      font-size: 14px;
    }

    .sample-note {
      margin: 11px 12px 0;
    }
  }
}

body.embed-mode {
  background: #182a37;

  .sec_promo {
    padding: 0;

    > .wrap {
      width: 100%;
    }

    .page-head,
    .sample-note {
      display: none;
    }

    .stage-shell {
      box-shadow: none;
    }
  }
}