/* HTMLゾーンを<section class="mg-anjo"><div class="mg-ユニーク名"></div></section>で囲む */

:root {
  --orange: rgba(226, 117, 15, 1);
  --lorange: rgb(252, 235, 217);
  --black: #24180c;
  --navy: #16212c;
}

.mg-anjo {
  /* トップのキャンペーンバナー */
  .mg-camp {
    width: 100%;
    padding: 100px 5%;

    h2 {
      font-size: 2.8rem;
      font-weight: 600;
      color: var(--orange);
      text-align: center;

      margin-bottom: 50px;
    }

    .mgc-flex {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      gap: clamp(20px, 5vw, 100px);
      width: 100%;

      a {
        display: block;
        transition: all 0.3s;
        width: clamp(240px, 100%, 500px);
        height: auto;
        img {
          display: block;
          width: 100%;
          height: auto;
        }
      }

      a:hover {
        transform: translateY(-10px);
      }
    }
  }

  /* 実績ページ */

  .mg-achieve {
    width: 100%;

    .mg-a-wrap {
      display: flex;
      width: 100%;
      justify-content: space-between;
      align-items: center;
      height: 80svh;
      min-height: 600px;

      .mg-a-1 {
        width: 100%;
        padding-inline: clamp(20px, 5%, 200px);
        display: flex;
        flex-direction: column;
        align-items: start;
        justify-content: center;
        gap: 20px;

        h2 {
          font-size: 1.8rem;
          margin-bottom: 20px;
          color: var(--orange);
          span {
            display: block;
            font-size: 3.5rem;
            margin-top: -10px;
            font-weight: 600;
            color: var(--black);
          }
        }

        .mg-a-box {
          position: relative;
          z-index: 1;
          overflow: hidden;
          display: flex;
          flex-direction: column;
          align-items: start;
          justify-content: center;
          border-radius: 15px;
          padding: 15px;
          width: clamp(300px, 100%, 600px);
          height: clamp(90px, 15vh, 200px);
          border: 2px solid var(--lorange);
          transition: all 0.3s;
          color: inherit;
          text-decoration: none;
          background-color: var(--lorange);

          h3 {
            font-size: 2.6rem;
            font-weight: 600;
          }

          p {
            font-size: 1.5rem;
          }

          img {
            position: absolute;
            right: 0;
            top: 50%;
            object-fit: cover;
            width: clamp(160px, 60%, 280px);
            height: 100%;
            object-position: 0% 50%;
            transform: translateY(-50%);
            transform-origin: 95% 50%;
            transition: all 0.3s;
          }

          .mg-a-stay {
            position: absolute;
            z-index: 10;
            inset: 0;
            margin: auto;
            background-color: rgba(44, 44, 44, 0.4);
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 15px;
            pointer-events: auto;
            cursor: default;

            span {
              display: block;
              color: white;
              font-size: 3rem;
              font-weight: 500;
            }
          }
        }

        .mg-a-box:hover {
          border: 2px solid var(--orange);

          img {
            transform: translateY(-50%) scale(1.05);
          }
        }

        .mg-a-box.btn-neg {
          pointer-events: none;
        }

        .mg-a-box.btn-neg:hover {
          border: 2px solid var(--lorange);
          img {
            transform: translateY(-50%);
          }
        }
      }

      .mg-a-2 {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 30% 30%;
        display: block;
      }
    }

    @media screen and (max-width: 1160px) {
      .mg-a-wrap {
        flex-direction: column-reverse;
        height: auto;
        gap: 50px;
        margin-bottom: 50px;

        .mg-a-2 {
          height: 300px;
        }
      }
    }

    @media screen and (max-width: 518px) {
      .mg-a-wrap {
        .mg-a-1 {
          .mg-a-box {
            img {
              opacity: 0.15;
            }
          }
        }
      }
    }
  }

  /* 実践の下層共通 */

  .mg-a-u {
    width: 100%;
    height: clamp(300px, 45svh, 600px);
    position: relative;
    border-bottom: 2px solid var(--orange);
    padding-left: clamp(10px, 5%, 100px);
    margin-top: 100px;

    .mg-au-title {
      display: flex;
      height: 100%;
      align-items: center;

      h2 {
        display: block;
        font-size: 1.8rem;
        margin-bottom: 20px;
        color: var(--orange);
        span {
          display: block;
          font-size: 3.5rem;
          margin-top: -10px;
          font-weight: 600;
          color: var(--black);
        }
      }
    }

    img {
      position: absolute;
      height: clamp(300px, 100%, 500px);
      width: auto;
      bottom: 0;
      right: 0;
      display: block;
    }
  }

  @media screen and (max-width: 900px) {
    .mg-a-u {
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .mg-au-title {
        height: auto;
      }

      img {
        height: auto;
        width: clamp(300px, 100%, 600px);
      }
    }
  }

  /* テスト結果 */
  .mg-testresult {
    width: 100%;
    padding: 50px clamp(20px, 5%, 200px);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(10px, 5%, 100px);

    .mgt-wrap {
      /* width: clamp(170px, auto, 320px); */
      min-width: 170px;
      max-width: 200px;

      .mgt-tag {
        /* margin-left: 20px; */
        padding: 10px 20px;
        font-size: 1.2rem;
        color: white;
        background-color: var(--orange);
        border-radius: 15px 15px 0 0;
        display: block;
        text-align: center;
        width: fit-content;
        margin-inline: auto 0;
      }

      .mgt-box {
        padding: 15px;
        border-radius: 15px 0 15px 15px;
        border: 2px solid var(--orange);
        background-color: var(--lorange);

        h3 {
          font-size: 2rem;
        }

        .mgtb-1 {
          font-size: 1.6rem;
        }

        .mgtb-2 {
          font-size: 1.4rem;
        }

        .mgtb-3 {
          font-size: 2.2rem;
        }
      }
    }
  }

  @media screen and (max-width: 518px) {
    .mg-testresult {
      .mgt-wrap {
        width: 40%;
        min-width: 150px;
        .mgt-box {
          h3 {
            font-size: 1.3rem;
          }

          .mgtb-1 {
            font-size: 1.1rem;
          }

          .mgtb-2 {
            font-size: 1.4rem;
          }

          .mgtb-3 {
            font-size: 1.6rem;
          }
        }
      }
    }
  }

  /* 合格実績 */
  .mg-testresult.gokaku {
    gap: 20px clamp(10px, 5%, 100px);
    .mgt-wrap {
      min-width: 280px;
      max-width: 650px;
      width: clamp(280px, 100%, 600px);

      .mgt-tag {
        margin-inline: 0 auto;
      }

      .mgt-box {
        border-radius: 0 15px 15px 15px;
        display: flex;
        align-items: center;
        gap: 15px;
        position: relative;
        z-index: 3;
        overflow: hidden;

        .gc-img {
          position: absolute;
          top: 0;
          right: 0;
          width: clamp(100px, 30%, 250px);
          height: auto;
          display: block;
          opacity: 0.4;
        }

        .mg-f-1 {
          width: clamp(40px, 15%, 100px);
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          /* height: 100%; */
          gap: 5px;
          position: relative;
          z-index: 3;
          span {
            display: block;
            font-size: 60px;
            font-weight: 900;
            color: var(--orange);
            line-height: 110%;
          }
        }

        .mg-f-2 {
          position: relative;
          z-index: 3;
          h3 {
            font-size: 3.5rem;
            letter-spacing: 0.3rem;
            font-weight: 900;
            color: var(--navy);
          }

          .mg-g-1 {
            font-size: 2.4rem;
            color: var(--navy);
            margin-block: -10px 10px;
            font-weight: 600;
          }

          .mg-g-p {
            color: #4f5050;
            line-height: 120%;
            font-size: 2rem;
          }
        }
      }
    }
  }

  @media screen and (max-width: 518px) {
    .mg-testresult.gokaku {
      .mgt-wrap {
        .mgt-box {
          .mg-f-1 {
            span {
              font-size: 35px;
            }
          }

          .mg-f-2 {
            h3 {
              font-size: 2.4rem;
              font-weight: 600;
              letter-spacing: normal;
            }

            .mg-g-1 {
              font-size: 1.8rem;

              margin-block: -10px 10px;
              font-weight: 600;
            }

            .mg-g-p {
              font-size: 1.3rem;
              line-height: 110%;
            }
          }
        }
      }
    }
  }

  /* 体験記 */

  #mg-voice {
    width: 100%;
    padding: 50px clamp(20px, 5%, 200px);

    .mgv-area {
      width: 100%;
      max-width: 800px;
      margin: 0 auto;

      .mgv-box {
        border: 2px solid #16212c;
        margin-bottom: 10px;

        .mgv-tit {
          background-color: #16212c;
          padding: 10px 40px 10px 20px;
          position: relative;
          transition: all 0.3s;
          cursor: pointer;
          h3 {
            color: white;
            font-size: 24px;
            line-height: 110%;
            span {
              font-size: 18px;
              margin-left: 15px;
              display: inline-block;
            }
          }
        }
        .mgv-tit::after {
          content: "";
          position: absolute;
          top: calc(50% - 3px);
          right: 15px;
          border-left: 6px solid transparent;
          border-right: 6px solid transparent;
          border-top: 8px solid #ffffff;
          transition: all 0.3s;
        }

        .mgv-tit:hover {
          background-color: #2f3d4b;
        }

        .mgv-tit:hover::after {
          top: 50%;
        }

        .mgv-tit.posi::after {
          transform: rotate(180deg);
        }

        .mgv-content {
          transition: all 0.3s;
          overflow: hidden;
          height: 0;

          .mgv-inner {
            padding: 15px;
            background-color: #fff5ea;
            img {
              display: block;
              width: 100%;
              height: auto;
              margin: 20px auto;
            }
            p {
              font-size: 18px;
              font-weight: 600;
              margin-bottom: 15px;
              span {
                display: inline;
                color: #f39800;
              }
            }
          }
        }
      }
    }
  }
}

/* 募集状況 */
.mg-acc {
  .mgac-tit {
    margin-top: 100px;
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
    height: clamp(400px, 50vh, 600px);
    display: flex;
    justify-content: center;
    padding-inline: 5%;
    flex-direction: column;

    h2 {
      color: #f39800;
      font-size: 30px;
      margin-bottom: 20px;
      font-weight: 600;
    }
  }

  .ac-table {
    padding: 15px;
    max-width: 1200px;
    margin: 0 auto;
    .course-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
      align-items: start;
    }

    .course-card {
      border: 1px solid #cfcfcf;
      background: #fff;
      overflow: hidden;
    }

    .course-head {
      background: #f3f3f3;
      border-bottom: 1px solid #cfcfcf;
      padding: 16px 12px;
      text-align: center;
      min-height: 120px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .course-head h3 {
      margin: 0 0 8px;
      font-size: 22px;
      line-height: 1.2;
    }

    .course-head p {
      margin: 2px 0;
      font-size: 15px;
      line-height: 1.5;
    }

    .course-card table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 0;
    }

    .course-card th,
    .course-card td {
      border-top: 1px solid #d9d9d9;
      padding: 10px 12px;
      font-size: 15px;
      line-height: 1.4;
    }

    .course-card th {
      width: 60px;
      text-align: center;
      background: #fafafa;
      font-weight: 700;
    }

    .course-card tr.nega {
      background-color: #a0a0a0;
      th {
        background-color: #a0a0a0;
      }
    }

    .course-card td {
      text-align: left;
    }

    @media (max-width: 1100px) {
      .course-grid {
        grid-template-columns: repeat(3, 1fr);
      }
    }

    @media (max-width: 800px) {
      .course-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 560px) {
      .course-grid {
        grid-template-columns: 1fr;
      }

      .course-head {
        min-height: auto;
      }
    }
  }
}

/* アクセス */
.mg-area-wrap{
  padding-block: 50px;
  .mg-area {
  width: 95%;
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  

  .mga-box {
    background-color: #e0edf5;
    width: 100%;
    max-width: 450px;
    border-radius: 15px;
    padding: 15px;

    h2{
      font-weight: 600;
    }

    h3{
      color: #627180;
    }

    ul{
      margin-bottom: 20px;
      li{
        list-style: none;
        display: inline-block;
        margin-inline: 5px;
      }
      
    }
  }
}

.mgar-des{
margin: 20px auto;
text-align: center;
font-size: 20px;
font-weight: 600;
color: #f39800;
}
}