@charset "UTF-8";
/*//////////////////////////////////

リニューアル2027
----------
2027年度にリニューアルする「英語圏文化コース（旧称：欧米言語文化コース）」のLP用CSS

//////////////////////////////////*/
.page.renewal2027 main .mainContainer #article {
  width: 100%;

  --sp1rem: clamp(5px, 1.6%, 1rem);
  --sp2rem: clamp(10px, 3.2%, 2rem);
  --sp3rem: clamp(15px, 4.8%, 3rem);
  --sp4rem: clamp(20px, 6.4%, 4rem);
  --sp5rem: clamp(25px, 8%, 5rem);
  --sp6rem: clamp(30px, 9.6%, 6rem);

  --p_inlineBox: 20px;
  @media only screen and (max-width: 700px) {
    --p_inlineBox: 10px;
  }

  section {
    + section {
      margin-top: var(--sp5rem);
    }
  }

  img {
    width: 100%;
    height: auto;
  }

  /*===============================
    LPタイトル
  ===============================*/
  .heading.catch {
    /*margin-block: 2rem 4rem;*/
    margin-block: var(--sp2rem) var(--sp4rem);
    line-height: 0;

    @media only screen and (max-width: 1015px) {
      margin-top: var(--sp1rem);
    }
    @media only screen and (max-width: 700px) {
      margin-top: 0;
    }
  }

  .heading.lead {
    /*margin-block: -1rem 4rem;*/
    margin-block: calc(var(--sp1rem) * -1) var(--sp4rem);

    font-size: 1.5rem;
    line-height: 1.8em;
    letter-spacing: 0.1em;
    text-align: center;

    @media only screen and (max-width: 700px) {
      font-size: 1.125rem;
      line-height: 1.8em;
      letter-spacing: 0.1em;
    }

    @media only screen and (max-width: 500px) {
      font-size: 0.875rem;
      line-height: 1.6em;
      letter-spacing: 0.06em;
    }
  }

  /*===============================
    学部概要
  ===============================*/
  #dept-overview {
    padding-block: clamp(20px, 4.5%, 2.6rem);
    padding-inline: var(--p_inlineBox);

    background-color: #f2f2f2;
    border-radius: 24px;

    .majors {
      margin-bottom: var(--sp4rem);
    }
  }

  /*===============================
    コース紹介
  ===============================*/

  /* コース概要 */
  #overview {
    padding-inline: var(--p_inlineBox);

    .lead {
      width: 90%;
      height: auto;
      max-width: 810px;
      min-width: 240px;
      margin-block: clamp(10px, 2.5%, 1.4rem) clamp(20px, 4.5%, 2.8rem);
    }
    .text {
      margin-bottom: 0;
      line-height: 1.8em;
      letter-spacing: 0.1em;

      @media only screen and (max-width: 700px) {
        font-size: 0.875rem;
      }

      @media only screen and (max-width: 500px) {
        font-size: 0.75rem;
        line-height: 1.6em;
        letter-spacing: 0.06em;
      }
    }

    .lectures {
      display: flex;
      gap: var(--p_inlineBox);
      margin-inline: calc(var(--p_inlineBox) * -1);
      margin-block: var(--sp3rem);
      padding: var(--p_inlineBox);

      background-color: #c46668;

      .lecture {
        padding-inline: var(--p_inlineBox);
        padding-block: calc(var(--p_inlineBox) / 2) var(--p_inlineBox);

        background-color: #ffffff;

        .text {
          margin-bottom: var(--p_inlineBox);
        }

        img {
          max-width: 430px;
        }
      }

      @media only screen and (max-width: 500px) {
        flex-direction: column;

        .lecture {
          text-align: center;

          img {
            max-width: 360px;
          }
        }
      }
    }

    .thesis {
      width: 65%;
      max-width: 612px;

      @media only screen and (max-width: 500px) {
        width: 100%;
      }
    }

    .topic {
      margin-top: var(--sp3rem);
    }
  }

  /* カリキュラム */
  #curriculum {
    padding-inline: var(--p_inlineBox);

    .title {
      width: 26.1%;
      max-width: 174px;
      margin-block: 0 var(--sp3rem);
    }
    .table01 {
      margin-bottom: var(--sp2rem);
    }
  }

  /* 教員一覧 */
  #faculties {
    padding-inline: var(--p_inlineBox);

    .title {
      width: 20.4%;
      max-width: 136px;
      margin-block: 0 var(--sp3rem);
    }

    .faculty {
      display: flex;
      gap: calc(var(--p_inlineBox) * 2);

      img {
        max-width: 470px;
      }

      @media only screen and (max-width: 500px) {
        flex-direction: column;

        .list {
          img {
            max-width: 360px;
          }
        }
      }
    }

    .pickup {
      padding: 0 var(--p_inlineBox);
      margin-top: var(--sp3rem);
      text-align: center;
      background-color: #c46668;

      .anthony_e_young {
        max-width: 610px;
      }
    }
  }

  /* 進路 */
  #careers {
    padding-inline: var(--p_inlineBox);

    .title {
      width: 47.1%;
      max-width: 314px;
      margin-block: 0 var(--sp3rem);
    }

    .qualification {
      margin-block: var(--sp3rem);
    }
  }

  /*===============================
    ページナビゲーション
  ===============================*/
  .pageNav {
    display: flex;

    width: 100%;
    padding: 0;
    font-size: 1.125rem;
    background-color: #8a121a;
    margin-block: var(--sp4rem) var(--sp5rem);

    .navTitle {
      align-self: center;
      max-width: 50%;
      margin: -2px 0 0 0;
      padding-inline: clamp(1em, 3vw, 1.6em);

      color: #fff;
      font-size: 1.125em;
      line-height: 1em;
      white-space: nowrap;
    }

    ul {
      display: flex;
      justify-content: center;
      align-items: center;
      list-style: none;
      padding: 10px 0;
      margin: 6px;
      background-color: #fff;

      li {
        a {
          display: block;
          padding: 0 clamp(1rem, 3vw, 1.5rem);
          letter-spacing: 0.06em;
          line-height: 36px;
          white-space: nowrap;
        }

        a:hover {
          text-decoration: none;
        }
      }

      li:not(:first-child) {
        border-left: 1px solid #8a121a;
      }
    }

    ul:before {
      content: "";
      display: block;
      margin-right: -4px;
      border: 4px solid transparent;
      border-left: 6px solid #8a121a;
    }

    .pamphletLink {
      position: relative;
      display: flex;
      align-items: center;
      width: 100%;
      min-width: 180px;
      max-width: 240px;
      margin-left: auto;
      padding: 6px 1em;
      color: #fff;
      font-size: 1.1rem;
      line-height: 1.4em;
      background: linear-gradient(to bottom, #f18f4d 0%, #ee86b4 100%);

      span {
        --shadowColor: #c00e53;
        text-shadow:
          1.2px 1.2px 0 var(--shadowColor),
          -1.2px -1.2px 0 var(--shadowColor),
          1.2px -1.2px 0 var(--shadowColor),
          -1.2px 1.2px 0 var(--shadowColor),
          1.2px 0px 0 var(--shadowColor),
          -1.2px 0px 0 var(--shadowColor),
          0px 1.2px 0 var(--shadowColor),
          0px -1.2px 0 var(--shadowColor);
        z-index: 1;
      }

      img {
        position: absolute;
        right: 12px;
        bottom: 10px;

        display: block;
        width: auto;
        height: 100px;
        rotate: 7deg;

        box-shadow: 0 0 2px 0 rgba(98, 46, 78, 0.5);
      }
    }

    .pamphletLink::after {
      position: absolute;
      top: auto;
      bottom: 5px;
      right: 5px;

      margin: 0;

      background: url("img/ico-tri-circle.png");
      background-size: cover;
    }

    /* レスポンシブ  */
    @media only screen and (max-width: 1015px) {
      flex-wrap: wrap;

      .navTitle {
        margin: 0;
        padding-left: 1em;
        white-space: normal;
        word-break: keep-all;
        overflow-wrap: anywhere;
      }

      ul {
        order: 3;
        width: 100%;
      }

      ul::before {
        display: none;
        margin-right: 0;
      }
    } /* media: 1015 */

    @media only screen and (max-width: 700px) {
      .pamphletLink {
        img {
          right: 20px;
          height: 80px;
        }
      }
    } /* media: 700 */

    @media only screen and (max-width: 640px) {
      font-size: 0.75rem;

      .navTitle {
        font-size: 0.875rem;
        line-height: 1.4em;
      }

      ul {
        li {
          a {
            padding: 0 clamp(0.875rem, 3vw, 1.5rem);
            letter-spacing: 0.02em;
          }
        }
      }

      .pamphletLink {
        align-self: center;
        min-width: unset;
        max-width: 50%;
        font-size: 0.875rem;
        line-height: 1.5em;
      }
    } /* media: 640 */

    @media only screen and (max-width: 400px) {
      .pamphletLink {
        img {
          right: 16px;
          height: 70px;
        }
      }
    } /* media: 400 */
  } /* .pageNav */

  .pageNav:first-of-type {
    margin-block: 0 var(--sp3rem);
  }
  .pageNav:last-of-type {
    margin-block: var(--sp6rem) var(--sp3rem);
  }
} /* .page.renewal2027 main .mainContainer #article */