@charset "utf-8";
.obpn {
  font-size: clamp(9px, 0.9375vw, 18px);
}

.application {
  margin: clamp(48.5px, 5.0520833333vw, 97px) 0
    clamp(87.5px, 9.1145833333vw, 175px);

  .notice {
    margin-top: 50px;
    color: #ff0000;
  }

  .c-btn {
    max-width: clamp(164.5px, 17.1354166667vw, 329px);
    width: 100%;
    margin: 50px auto clamp(65.5px, 6.8229166667vw, 131px);

    a {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid #565656;
      height: clamp(38px, 3.9583333333vw, 76px);
      font-size: clamp(16px, 0.9375vw, 18px);
      letter-spacing: 0.2em;

      &::before {
        display: inline-block;
        position: absolute;
        top: 50%;
        left: -1.813em;
        width: clamp(46px, 2.9166666667vw, 56px);
        height: 1px;
        background: #ff0000;
        content: "";
      }
    }
  }

  .date {
    background-color: #ececec;
    margin: clamp(48.5px, 5.0520833333vw, 97px) 0
      clamp(87.5px, 9.1145833333vw, 175px);
    padding: clamp(35px, calc(70 / 1920 * 100vw), 70px) 0;
    .box {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      .txt {
        grid-column: 2 / 5;
        padding-right: clamp(35px, calc(70 / 1920 * 100vw), 70px);
        font-size: clamp(20px, 1.25vw, 24px);
        h3 {
          letter-spacing: 0.2em;
          span {
            margin-left: clamp(20px, 1.25vw, 24px);
            padding: 0 1em;
            border: 1px solid #000;
          }
        }
        .day {
          margin: clamp(20px, 1.25vw, 24px) 0 clamp(30px, 2.6vw, 50px);
          padding-left: 1em;
        }
        .line {
          display: block;
          width: 100%;
          margin: clamp(30px, 2.6vw, 50px) 0;
          border-top: 1px solid #000;
        }
        .time {
          margin: 24px 0 0;
          font-size: clamp(16px, 0.94vw, 18px);
        }
      }
    }
  }

  .flow {
    h2 {
      margin-bottom: clamp(33px, (66/1920) * 100vw, 66px);
      text-align: center;
      font-size: clamp(13px, 1.3541666667vw, 26px);
      letter-spacing: 0.2em;
      line-height: 1;
    }
    .flow_lst_itm {
      display: grid;
      grid-template-columns: repeat(4, 1fr);

      & + li {
        margin-top: 120px;
        position: relative;
        &::before {
          content: "";
          clip-path: polygon(50% 100%, 0 0, 100% 0);
          display: block;
          width: 30px;
          height: 15px;
          background-color: #ff0000;
          position: absolute;
          top: -50px;
          left: 50%;
          transform: translate(-50%, -100%);
        }
      }

      figure {
        padding: 0 clamp(20px, 1.25vw, 24px);
      }
      .txt {
        padding: 0 clamp(20px, 1.25vw, 24px);
        grid-column: 2 / 5;

        h3 {
          margin: 0.5em 0 1.5em;
          font-size: clamp(20px, 1.15vw, 22px);

          span {
            position: relative;
            aspect-ratio: 1 / 1;
            margin-right: 2em;
            color: #fff;

            &::before {
              content: "";
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%) rotate(45deg);
              z-index: -1;
              display: block;
              width: 1.8em;
              aspect-ratio: 1 / 1;
              background: #000;
            }
          }

          small {
            font-size: 18px;
          }
        }
      }
    }
  }
}

@media screen and (max-width: 767px) {
  .application {
    padding: 0;
    margin: clamp(35px, 9.3333333333vw, 70px) 0
      clamp(58px, 15.4666666667vw, 116px);
    box-sizing: border-box;

    & > p {
      padding: 0 clamp(21.5px, 5.7333333333vw, 43px);
    }

    .c-btn {
      max-width: clamp(230px, 17.1354166667vw, 329px);
    }

    .date {
      padding: clamp(25px, calc(50 / 750 * 100vw), 50px) 5.7333333333vw;

      .box {
        grid-template-columns: repeat(1, 1fr);
        gap: 30px;

        .txt {
          grid-column: 1 / 2;
          padding-right: 0;
        }
      }
    }

    .flow {
      padding: 0 clamp(21.5px, 5.7333333333vw, 43px);

      h2 {
        font-size: clamp(23px, 6.1333333333vw, 46px);
        letter-spacing: 0;
      }

      .flow_lst_itm {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 30px;

        & + li {
          margin-top: 75px;

          &::before {
            top: -30px;
          }
        }

        figure {
          order: 2;
          padding: 0;
        }

        .txt {
          padding: 0;
          grid-column: 1;

          h3 {
            padding-left: 1em;
          }
        }
      }
    }
  }
}