@charset "UTF-8";

/* ===================================
	File Name   : academy.css
	Description : academy Page Layout CSS
	Editor      : Bface Saeki
	Last Editor : Bface Saeki
	
	Update Description :
	[2026/07/08] 新規作成

====================================== */

/*========== Style Contents ==========

	1. Individual Redefinition
	2. Share Elements
	3. Section [academy_intro] Setting
	4. Section [academy_anxious] Setting
	5. Section [academy_voice] Setting
	
====================================== */



/*===== ■1. Individual Redefinition =====*/
#visual {
  background: url('../img/academy/img-visual.jpg') no-repeat center / cover;
}



/*===== ■2. Share Elements =====*/
h2 {
  margin-bottom: 3rem;
  font-size: 2.8rem;
  font-weight: bold;
  line-height: 1.2;
  span {
    color: var(--AC);
  }
}

h3 {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
  color: var(--AC);
  font-weight: bold;
  font-size: 2.2rem;
  &::before {
    width: 2.5rem;
    height: 1px;
    margin-right: .5rem;
    background: var(--AC);
    content: "";
  }
}



@media (max-width: 768px) {
  h2 {
    font-size: 2.2rem;
    margin-bottom: 2rem;
  }

  h3 {
    font-size: 2rem;
    margin-right: 1rem;
  }
}



/*===== ■3. Section [academy_intro] Setting =====*/
#academy_intro {
  > div {
    display: flex;
    flex-direction: row-reverse;
    gap: 6rem;
    > div {
      > p {
        font-weight: 500;
        line-height: 1.7;
        &:not(:last-child) {
          margin-bottom: 3rem;
        }
      }
    }
    > figure {
      min-width: 36.5%;
      border-radius: 1.5rem;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }
}


@media (max-width: 768px) {
  #academy_intro {
    > div {
      flex-direction: column;
      gap: 1rem;
      > div {
        > p {
          font-size: 1.4rem;
          &:not(:last-child) { margin-bottom: 2rem;}
        }
      }
    }
  }
}



/*===== ■4. Section [academy_anxious] Setting =====*/
#academy_anxious {
  padding-bottom: 0;
  .wrapper_limit {
    > div {
      position: relative;
      ul {
        margin: 2rem 0 3rem;
        padding: 1.5rem;
        border: 1px dotted var(--AC);
        li {
          position: relative;
          padding-left: 1.8em;
          color: var(--AC);
          font-weight: 500;
          font-size: 1.8rem;
          background: url(../img/common/ico_check.svg) no-repeat left center / auto 100%;
          color: var(--AC);
          &:not(:last-child) {
            margin-bottom: 1rem;
          }
        }
        + span {
          position: absolute;
          top: -2rem;
          right: -2rem;
          img {
            width: 320px;
            height: 117px;
          }
        }
      }
      + p {
        margin-bottom: 3rem;
        font-weight: 500;
        span {
          display: block;
          margin-bottom: 1.5rem;
        }
      }
    }
    #academy_feature {
      margin-bottom: 3rem;
      div {
        padding: 2.5rem 3rem;
        border-radius: 1.5rem;
        background: var(--DC);
        &:not(:last-child) { margin-bottom: 1.5rem;}
        h4 {
          display: flex;
          align-items: center;
          margin-bottom: 1rem;
          font-weight: 500;
          b {
            position: relative;
            margin-right: 1.5rem;
            padding: .5rem .5rem;
            background: var(--AC);
            color: var(--DC);
            font-size: 1.4rem;
            line-height: 1;
            &::after {
              position: absolute;
              top: 0;
              right: -1rem;
              width: 1rem;
              height: 100%;
              background: var(--AC);
              clip-path: polygon(0 0, 100% 50%, 0 100%);
              content: "";
            }
          }
          em {
            font-size: 1.8rem;
          }
        }
      }
    }
    #academy_flow {
      margin-bottom: 6rem;
      table {
        width: 100%;
        tr > :first-child {
          width: 18rem;
          text-align: center;
        }
        th {
          padding: 1.5rem 2rem;
          border: 1px solid #a6a6a6;
          background: #e7e7e7;
          font-weight: 500;
          line-height: 1.2;
          text-align: center;
        }
        td {
          padding: 1.5rem 2rem;
          border: 1px solid #a6a6a6;
          line-height: 1.6;
        }
      }
    }
  }
  > figure {
    display:flex;
    > * {flex: 1;}
  }
}


@media (max-width: 768px) {
  #academy_anxious {
    .wrapper_limit {
      > div {
        position: relative;
        ul {
          margin: 2rem 0;
          li {
            background: url(../img/common/ico_check.svg) no-repeat left .1em / 1.4em auto;
            font-size: 1.4rem;
          }
          + span {
            top: inherit;
            bottom: 1rem;
            right: 1rem;
            transform: translateX(25%) translateY(50%) rotate(-15deg) scale(.5);
            img {
              width: 320px;
              height: 117px;
            }
          }
        }
        + p {
          margin-bottom: 3rem;
          font-size: 1.4rem;
        }
      }
      #academy_feature {
        div {
          padding: 2rem;
          h4 {
            align-items: stretch;
            b {
              display: flex;
              align-items: center;
              width: 2em;
              text-align: center;
              &::after {
                position: absolute;
                top: 0;
                right: -1rem;
                width: 1rem;
                height: 100%;
                background: var(--AC);
                clip-path: polygon(0 0, 100% 50%, 0 100%);
                content: "";
              }
            }
            em {
              font-size: 1.6rem;
            }
          }
        }
      }
      #academy_flow {
        margin-bottom: 4rem;
        table {
          tr > :first-child {
            width: auto;
            white-space: nowrap;
          }
          th {
            padding: 1rem 2rem;
            border-bottom: none;
            font-size: 1.4rem;
          }
          td {
            padding: 1.5rem 2rem;
            font-size: 1.4rem;
          }
          tr:not(:last-child) td { border-bottom: none;}
        }
      }
    }
  }
}



/*===== ■5. Section [academy_voice] Setting =====*/
#academy_voice {
  .wrapper_limit {
    > div {
      padding: 2.5rem;
      border: .1rem solid #e1dcd6;
      border-radius: .6rem;
      background: #fff;
      div {
        display: grid;
        grid-template-columns: 12em 1fr;
        grid-column-gap: 2rem;
        margin-bottom: 2rem;
        padding-bottom: 2rem;
        border-bottom: .1rem solid var(--AC);
      }
      dl {
        grid-column: 2/3;
        grid-row: 1/1;
        dt {
          font-weight: 500;
          font-size: 2rem;
          margin-bottom: 1rem;
          span {
            display: block;
            color: var(--AC);
            font-size: 1.4rem;
          }
        }
        dd {
          em {
            display: block;
            margin-bottom: 1rem;
            padding: 1rem;
            border-radius: .6rem;
            background: #353535;
            color: #fff;
            font-weight: 500;
            font-size: 1.4rem;
            line-height: 1;
          }
          li {
            display: grid;
            grid-template-columns: auto 1fr;
            grid-column-gap: 1rem;
            font-weight: 500;
            &:not(:last-child) { margin-bottom: 1rem;}
            b {
              grid-column: 1/2;
            }
            span {
              grid-column: 2/3;
            }
          }
        }
      }
      figure {
        overflow: hidden;
        grid-column: 1/2;
        grid-row: 1/1;
        border-radius: .6rem;
      }
      p:not(:last-of-type) {
        margin-bottom: 1.5rem;
      }
    }
  }
  #academy_inquiry {
    display: flex;
    justify-content: center;
    margin-top: 4rem;
    a {
      max-width: 270px;
      line-height: 1.25;
      margin: 0 2rem;
    }
  }
}


@media (max-width: 768px) {
  #academy_voice {
    .wrapper_limit {
      > div {
        padding: 2rem;
        div {
          display: grid;
          grid-template-columns: auto;
          grid-column-gap: 0;
          grid-row-gap: 1.5rem;
        }
        dl {
          grid-column: 1/2;
          grid-row: 2/3;
          dd li {
            grid-template-columns: auto;
            grid-column-gap: 0;
            b {
              grid-column: 1/2;
            }
            span {
              grid-column: 1/2;
              font-size: 1.4rem;
            }
          }
        }
        figure {
          grid-row: 1/2;
        }
        p { font-size: 1.4rem;}
      }
    }
    #academy_inquiry {
      margin-top: 3rem;
      a {
        width: 100%;
        max-width: 100%;
      }
    }
  }
}