.top {
  background-color: #000;
  & .rec01 {
  }
  & .text-area {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0.6em;
    color: #fff;
    filter: drop-shadow(0 0 1em rgba(255, 255, 255, 0.6));
    height: 65dvh;
    opacity: 0;
    & .deco01 {
    }
    & .text {
      text-align: center;
      font-size: 2.4em;
      font-weight: 700;
      line-height: 1.5;
      letter-spacing: 0.05em;
      font-family: var(--font-gothic);
    }
    & .deco02 {
      scale: -1 1;
    }
  }
  & .rec02 {
    margin-top: -0.9em;
  }
}

.result {
  overflow: hidden;
  position: relative;
  z-index: 1;
  margin-top: -14.4em;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 5em), 0 100%);
  &::before {
    content: "";
    position: absolute;
    top: 5em;
    left: 0;
    z-index: -1;
    width: 100%;
    height: calc(100% - 5em);
    background-color: #000;
  }
  & .winner {
    position: relative;
    padding-bottom: 2.5em;
    & > .bg {
      --path-height: 4.7em;
      position: absolute;
      top: var(--path-height);
      left: 0;
      z-index: -1;
      width: 100%;
      height: 100%;
      margin-top: calc(-1 * var(--path-height));
      background: url(../img/result/no1-bg.png) no-repeat top center/cover;
      clip-path: polygon(
        0 var(--path-height),
        100% 0,
        100% calc(100% - var(--path-height)),
        0 100%
      );
      &::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #fff;
        opacity: 0.5;
      }
    }

    & .head {
      display: flex;
      padding-top: 2.2em;
      padding-left: 1.3em;
      & .text-area {
        position: relative;
        z-index: 2;
        & .no {
          width: 9.9em;
          aspect-ratio: 99/85;
        }
        & .type {
          margin-top: 1em;
          width: 16.8em;
        }
        & .name {
          margin-left: 0.4em;
          font-size: 2.2em;
          font-weight: 700;
          color: #fff;
          -webkit-text-stroke: 0.2em #000;
          paint-order: stroke fill;
          white-space: nowrap;
          /* text-shadow: .2em .2em 0 #000, -.2em .2em 0 #000, .2em -.2em 0 #000,
            -.2em -.2em 0 #000, .2em 0px 0 #000, 0px .2em 0 #000, -.2em 0px 0 #000,
            0px -.2em 0 #000; */
          /* &::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #fff;
          } */
        }
        & .staff {
          margin-top: 0.7em;
          margin-left: 0.4em;
          font-family: var(--font-gothic);
          font-size: 1.9em;
          font-weight: 700;
          line-height: 1.5;
          -webkit-text-stroke: 0.2em #fff;
          paint-order: stroke fill;
          color: #000;
          white-space: nowrap;
          & span {
            font-size: 0.73em;
          }
        }
      }
      & .img-area {
        position: absolute;
        top: 5em;
        right: -0.4em;
        width: 27.5em;
        aspect-ratio: 275/341;
      }
    }
    & .detail {
      position: relative;
      margin-top: 2.4em;
      margin-inline: auto;
      padding: 2.4em;
      width: 33.5em;
      border: 0.2em solid #000;
      & .bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #fff;
        opacity: 0.8;
      }
      & .text-area {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 1.6em;
        & .head {
          padding: 0;
          font-size: 2.2em;
          font-weight: 700;
          line-height: 1.5;
        }
        & .desc {
          font-size: 1.8em;
          line-height: 1.5;
          letter-spacing: 0.05em;
          font-family: var(--font-gothic);
        }
        & .note {
          text-indent: -1em;
          padding-left: 1em;
          font-size: 1.4em;
          line-height: 1.5;
          letter-spacing: 0.05em;
          font-family: var(--font-gothic);
        }
      }
    }
  }
  & .other-list {
    margin-top: 3.5em;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: center;
    gap: 1.5em calc(100% - 17.7em * 2);
    & .item {
      width: 17.7em;
      position: relative;
      overflow: hidden;
      & .bg {
        --path-height: 2.3em;
        position: absolute;
        top: var(--path-height);
        left: 0;
        z-index: -1;
        width: 100%;
        height: 100%;
        margin-top: calc(-1 * var(--path-height));
        background: url(../img/result/no2-bg.png) no-repeat center center/cover;
        clip-path: polygon(0 var(--path-height), 100% 0, 100% 100%, 0 100%);
        &::after {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: #fff;
          opacity: 0.5;
        }
      }
      & .num {
        margin-left: 2.2em;
        width: 3em;
        aspect-ratio: 30/63;
      }
      & .img-area {
        margin-top: -2.2em;
        margin-left: auto;
        width: 17.7em;
        aspect-ratio: 177/206;
      }
      & .type {
        margin-top: -12.8em;
        margin-left: 1em;
        width: 11.1em;
      }
      & .text-area {
        position: relative;
        z-index: 1;
        margin-top: -0.6em;
        padding-left: 1.3em;
        padding-right: 0.3em;
        padding-top: 2.6em;
        padding-bottom: 1.4em;
        &::before {
          content: "";
          position: absolute;
          z-index: -1;
          top: 1px;
          left: 0;
          width: 100%;
          height: 100%;
          background: #000000;
          mix-blend-mode: multiply;
          opacity: 0.7;
          backdrop-filter: blur(2px);
          clip-path: polygon(0 1.6em, 100% 0, 100% 100%, 0 100%);
        }
        & .name {
          font-size: 1.6em;
          font-weight: 700;
          line-height: 1;
          letter-spacing: 0.05em;
          color: #fff;
          -webkit-text-stroke: 0.2em #000;
          paint-order: stroke fill;
        }
        & .staff {
          margin-top: 0.2em;
          font-family: var(--font-gothic);
          font-size: 1.7em;
          font-weight: 700;
          line-height: 1.5;
          color: #fff;
          -webkit-text-stroke-width: 0.2em;
          paint-order: stroke fill;
          & .kisyu {
            font-size: 0.89em;
          }
          & .kana {
            font-size: 0.78em;
          }
        }
      }
    }
  }
  & .message {
    margin-top: 4.2em;
    padding-left: 2em;
    padding-bottom: 6em;
    position: relative;
    & .text {
      font-size: 2em;
      font-weight: 700;
      line-height: 1.6;
      letter-spacing: 0.05em;
      font-family: var(--font-gothic);
      color: #fff;
      & span {
        font-size: 1.2em;
        letter-spacing: 0;
        color: #ffe100;
      }
    }
    & .img-area {
      position: absolute;
      top: 0;
      right: -2em;
      width: 17.4em;
      z-index: -1;
    }
  }
}

.btn-area {
  overflow: hidden;
  margin-top: 1.8em;
  padding-bottom: 1.7em;
  & .btn-share {
    margin-top: 0;
  }
  & .fukidashi {
    margin-top: 3em;
    margin-inline: auto;
    padding-top: 2.3em;
    & .text {
      font-size: 1.6em;
      line-height: 1.5;
    }
  }
  & .btn-start {
    margin-top: -0.7em;
  }
}

.hyn {
  position: relative;
  z-index: 1;
  overflow: hidden;
  margin-top: 3.8em;
  padding-top: 3.5em;
  padding-bottom: 8.4em;
  background: radial-gradient(
    52.19% 141.86% at 39.28% 4.35%,
    #e5dfce 0%,
    #e5dec4 48%,
    #e6ddb5 100%
  );
  &:before,
  &:after {
    content: "";
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
  }
  &:before {
    top: 0;
    left: 0;
    width: 6.5em;
    aspect-ratio: 65/92;
    background-image: url(../img/result/hyn-deco01.png);
  }
  &:after {
    bottom: 0;
    right: 0;
    width: 11.5em;
    aspect-ratio: 115/92;
    background-image: url(../img/result/hyn-deco02.png);
  }
  & .text-area {
    position: relative;
    z-index: 1;
    margin-inline: auto;
    width: 33.5em;
    filter: drop-shadow(0 0.3em 0.6em rgba(35, 24, 21, 0.3));
    &:before,
    &:after {
      content: "";
      display: block;
      width: 100%;
      aspect-ratio: 335/18;
      background: url(../img/result/hny-frame.svg) no-repeat center center/cover;
    }
    &:before {
      translate: 0 0.1em;
    }
    &:after {
      scale: 1 -1;
      translate: 0 -0.1em;
    }
    & .text-inner {
      padding: 0.8em 2.4em 1.2em;
      background-color: #fffcf0;
      & .head-area {
        display: flex;
        align-items: flex-start;
        justify-content: center;
        column-gap: 0.8em;
        margin-bottom: 0.6em;
        & .img-area {
          margin-top: -1.1em;
          width: 4.8em;
          aspect-ratio: 1;
        }
        & .head {
          margin-inline: -1em;
          font-size: 2em;
          font-weight: 900;
          line-height: 1.5;
          letter-spacing: 0.05em;
          font-family: var(--font-mincho);
          color: #393a80;
          text-align: center;
        }
      }
      & .text {
        font-size: 1.5em;
        line-height: 1.7;
        letter-spacing: 0.05em;
        font-family: var(--font-mincho);
      }
      & .name-wrapper {
        margin-top: 0.8em;
        text-align: right;
        & .name {
          font-size: 1.4em;
          font-weight: 700;
          letter-spacing: 0.1em;
          line-height: 1.7;
          color: #393a80;
          font-family: var(--font-mincho);
          & span {
            font-size: 1.14em;
          }
        }
      }
    }
  }
  & .syatyo {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
    width: 33.1em;
    aspect-ratio: 331/137;
  }
}

.magazine {
  margin-top: 2.6em;
  padding-bottom: 3.5em;
  & .inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    & .fukidashi {
      padding-top: 2em;
      width: 30.8em;
      & .text {
        font-size: 1.6em;
        line-height: 1.5;
      }
    }
    & .banner {
      margin-top: 1.8em;
      width: 28.6em;
      aspect-ratio: 286/101;
      @media (hover: hover) and (pointer: fine) {
        &:hover {
          opacity: 0.7;
        }
      }
    }
  }
}