@charset "utf-8";

/*-------------------------
  fonts - フォント読み込み
-------------------------*/
@font-face {
  font-family: 'Kinto Sans';
  src: url('../font/KintoSans-Regular.woff2') format('woff2'),
    url('../font/KintoSans-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Kinto Sans';
  src: url('../font/KintoSans-Medium.woff2') format('woff2'),
    url('../font/KintoSans-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Kinto Sans';
  src: url('../font/KintoSans-Bold.woff2') format('woff2'),
    url('../font/KintoSans-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


/*-------------------------
  variables - 変数設定
-------------------------*/
:root {
  --color-primary: rgba(64, 179, 130, 1);
  --color-secondary: rgba(149, 199, 16, 1);
  --color-wako-green: rgba(0, 110, 55, 1);
  --color-wako-art: #f08300;
  --color-art: rgba(246, 132, 34);
  --color-art-light: rgba(255, 172, 97, 1);
  --color-design: rgba(0, 149, 162, 1);
  --color-design-light: rgba(92, 184, 192, 1);
  --color-planning: rgba(145, 93, 163, 1);
  --color-planning-light: rgba(178, 145, 194, 1);
  --color-txt: rgba(34, 34, 34, 1);
  --color-bg-cta: rgba(0, 77, 38, 1);
  --color-cta-btn: rgba(241, 237, 25, 1);
  --color-black: rgba(0, 0, 0, 1);
  --color-white: rgba(255, 255, 255, 1);
  --default-font-family:
    system-ui, -apple-system, BlinkMacSystemFont, "Hiragino Sans",
    "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Meiryo UI", "メイリオ",
    Meiryo, "Noto Sans JP", "Segoe UI", Roboto, "Helvetica Neue", Arial,
    sans-serif;
  --kinto-sans: "Kinto Sans", sans-serif;
  --font-din: "urw-din", sans-serif;
}

/*-------------------------
  components - 共通パーツ
-------------------------*/
html {
  margin: 0;
  height: 100%;
  font-size: 62.25%;
  /* 1rem = 10px */
  scroll-behavior: smooth;
}

body {
  position: relative;
  width: 100%;
  height: 100%;
  color: var(--color-txt);
  font-family: var(--default-font-family);
  font-size: 16px;
  line-height: 1.5;
  font-feature-settings: "palt" 1;
  font-optical-sizing: auto;
  -webkit-font-kerning: auto;
  font-kerning: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-break: strict;
  overflow-x: hidden;
  background-color: var(--color-white);
}

body.active {
  overflow: hidden;
}

a {
  color: var(--color-wako-green);
  text-decoration: none !important;
}

ul,
ol {
  list-style: none !important;
  padding: 0;
  margin: 0;
}

p {
  word-break: break-all;
}

em {
  font-style: normal;
}

/* layout
-------------------------*/

/* block */
.container {
  width: 100%;
  max-width: 393px;
  margin: 0 auto;
  overflow-x: hidden;
  box-sizing: border-box;
  border-left: 1px solid #eee;
  border-right: 1px solid #eee;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.1);
}

@media screen and (max-width: 575px) and (orientation: portrait) {
  .container {
    max-width: 100%;
    border: none;
  }
}

/* inline */

.left {
  text-align: left;
}

.center {
  text-align: center;
}

.right {
  text-align: right;
}

/* display
-------------------------*/

/* button
-------------------------*/
/* .btn {
    cursor: pointer;
    &:hover {
        
    }
} */

/* font
-------------------------*/
.kinto-sans {
  font-family: var(--kinto-sans);
}

.din-medium {
  font-family: "urw-din", sans-serif !important;
  font-weight: 500;
  font-style: normal;
}

.din-demi {
  font-family: "urw-din", sans-serif !important;
  font-weight: 600;
  font-style: normal;
}

.din-bold {
  font-family: "urw-din", sans-serif !important;
  font-weight: 700;
  font-style: normal;
}

/*-------------------------
  bg - 背景
-------------------------*/
.bg-body {
  position: fixed;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url(../img/bg-body.svg) no-repeat center center;
  background-size: cover;
  opacity: 0.5;
  z-index: -1000;
}

@media screen and (max-width: 575px) and (orientation: portrait) {
  .bg-body {
    display: none;
  }
}

/*-------------------------
  header - ヘッダー
-------------------------*/
.header {
  position: relative;
  width: 100%;
  height: 100svh;
  max-height: 95.6rem;

  & .header_mv {
    width: 100%;
    height: 100%;
    background-color: rgba(38, 39, 39, 1);

    & .bg {
      margin-top: -2px;
      display: flex;
      align-items: flex-start;
      justify-content: flex-start;
      gap: 1.5rem;
      height: 100%;
      overflow-x: hidden;

      & img {
        display: inline-block;
        width: auto;
        height: 100%;
        max-inline-size: -webkit-fit-content;
        max-inline-size: -moz-fit-content;
        max-inline-size: fit-content;
        -webkit-animation: mvSlider 25s linear infinite;
        animation: mvSlider 25s linear infinite;
      }
    }

    & .content {
      position: absolute;
      width: 100%;
      height: auto;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -60%);
      padding-left: 2rem;
      padding-right: 2rem;
      text-align: center;

      & .lead {
        margin-bottom: 2rem;

        & p {
          display: inline-block;
          margin-bottom: 1rem;
          padding: 0.6rem 1rem;
          font-family: var(--kinto-sans);
          color: var(--color-txt);
          font-size: clamp(1.85rem, 2.15rem, 2.3rem);
          font-weight: 700;
          line-height: 1;
          background: var(--color-white);

          & span {
            color: var(--color-wako-green);
          }
        }
      }

      & .ttl {
        display: inline-block;
        width: auto;
        padding: 2.25rem 3.6rem;
        text-align: center;
        background: url(../img/bg-mv-ttl.svg) no-repeat center center;
        background-size: cover;

        & h1 {
          margin-bottom: 3.5rem;
          font-family: var(--kinto-sans);
          color: var(--color-white);
          font-size: 4.2rem;
          font-weight: 700;
          line-height: 1.2;
        }

        & p {
          width: 100%;
          font-family: var(--kinto-sans);
          color: var(--color-white);
          font-size: 2.2rem;
          font-weight: 700;
          line-height: 1;
        }
      }
    }
  }

  & .scroll {
    position: absolute;
    bottom: 0;
    left: 2rem;
    transform: translateX(-25%);
    height: 15rem;
    text-align: center;

    & .txt {
      display: block;
      font-family: var(--kinto-sans);
      color: var(--color-white);
      font-size: 1.5rem;
      font-weight: 700;
      line-height: 1;
      letter-spacing: 0.1rem;
      transform: rotate(90deg);
    }

    & .circle {
      position: absolute;
      top: 4.5rem;
      left: 50%;
      transform: translateX(-50%);
      display: inline-block;
      width: 10px;
      height: 10px;
      background-color: var(--color-white);
      border-radius: 50%;
      -webkit-animation-name: scrollDown;
      animation-name: scrollDown;
      -webkit-animation-duration: 3s;
      animation-duration: 3s;
      -webkit-animation-iteration-count: infinite;
      animation-iteration-count: infinite;
      -webkit-animation-timing-function: ease-in-out;
      animation-timing-function: ease-in-out;
      -webkit-animation-fill-mode: forwards;
      animation-fill-mode: forwards;
    }

    & .line {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      display: inline-block;
      width: 2px;
      height: 10rem;
      background-color: var(--color-white);
    }
  }
}

@-webkit-keyframes mvSlider {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-100%);
  }
}

@keyframes mvSlider {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-100%);
  }
}

@-webkit-keyframes scrollDown {
  0% {
    top: 4.5rem;
    opacity: 1;
  }

  75% {
    opacity: 1;
  }

  100% {
    top: 100%;
    opacity: 0;
  }
}

@keyframes scrollDown {
  0% {
    top: 4.5rem;
    opacity: 1;
  }

  75% {
    opacity: 1;
  }

  100% {
    top: 100%;
    opacity: 0;
  }
}

/*-------------------------
  footer - フッター
-------------------------*/
.footer {
  margin-top: 0;
  position: relative;
  width: 100%;
  padding: 3.5rem 2rem;
  background-color: var(--color-white);
  text-align: center;

  &::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 8px;
    background: url(../img/obj-line.png) no-repeat center bottom;
    background-size: cover;
    z-index: 1;
  }

  & .footer_bg {
    position: absolute;
    top: 1.5rem;
    left: 0;
    transform: translateY(-100%);
    width: 100%;
    height: 10rem;
    background: url(../img/bg-halfton-bottom.svg) no-repeat center top;
    background-size: cover;
  }

  & .footer_logo {
    position: relative;
    width: 100%;
    max-width: 18rem;
    margin: 0 auto 0.5rem;
    z-index: 500;

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

  & .footer_txt {
    position: relative;
    color: var(--color-txt);
    font-size: 1.4rem;
    line-height: 1;
    z-index: 500;
  }
}

/*-------------------------
  main - メインコンテンツ
-------------------------*/
.contents {
  position: relative;
  width: 100%;
  height: auto;

  & .sec {
    padding: 3rem 2rem 5rem;

    & .sec_ttl {
      margin-bottom: 2rem;
      font-family: var(--kinto-sans);
      color: var(--color-white);
      font-size: 2.8rem;
      font-weight: 700;
      background: url(../img/bg-ttl-stripe.png) no-repeat center center;
      background-size: cover;
      text-align: center;
    }

    & .sec_txt {
      margin-bottom: 3rem;
      font-size: 1.7rem;
    }
  }
}

/* CTA - CTAのスタイル
-------------------------*/
.cta {
  padding: 2.75rem 2rem 3.25rem;

  & .cta_txt {
    margin-bottom: 1.25rem;
    color: var(--color-white);
    font-family: var(--kinto-sans);
    font-size: clamp(2rem, 2.2rem, 2.3rem);
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.035em;
  }

  background: var(--color-bg-cta);

  & .cta_btn {
    margin: 0 auto;
    max-width: 28.5rem;
    text-align: center;

    & a {
      position: relative;
      display: block;
      width: 100%;
      height: 100%;
      padding: 2rem;
      line-height: 1;
      background-color: var(--color-cta-btn);
      border-radius: 100px;
      box-shadow: 0px 4px 0px rgba(0, 0, 0, 0.35);

      & .balloon {
        position: absolute;
        top: 50%;
        left: 1rem;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 5rem;
        height: 100%;
        min-height: 50px;
        transform: translate(0, -50%);
        background: url(../img/obj-balloon.png) no-repeat center center;
        background-size: contain;
        text-align: center;

        & span {
          font-family: var(--kinto-sans);
          color: var(--color-white);
          font-weight: 700;
          font-size: 1.5rem;
          transform: translateX(-2.5%);
          letter-spacing: 0.1em;
        }
      }

      & .txt {
        padding-top: 0.1rem;
        padding-left: 1.25rem;
        color: var(--color-txt);
        font-size: 2.35rem;
        font-weight: 700;

        &::after {
          content: "";
          position: absolute;
          top: 50%;
          right: 1rem;
          transform: translate(-50%, -50%);
          display: block;
          width: 18px;
          height: 18px;
          background: url(../img/icon-cta-arrow.svg) no-repeat center center;
          background-size: contain;
        }
      }
    }
  }
}

/* sec_lead - セクションリード
-------------------------*/
.sec_lead {
  position: relative;
  padding: 5rem 2.4rem 3rem !important;
  background: url(../img/bg-lead.png) no-repeat center center;
  background-size: cover;

  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 8px;
    background: url(../img/obj-line.png) no-repeat center center;
    background-size: cover;
  }

  & .sec_ttl {
    position: relative;
    width: 100%;
    margin-bottom: 4rem;
    font-family: var(--kinto-sans);
    color: var(--color-wako-green) !important;
    font-weight: 700;
    font-size: 2.8rem;
    text-align: center;
    line-height: 1;
    background: none !important;

    &::after {
      content: "";
      position: absolute;
      top: 0;
      left: 50%;
      transform: translate(-50%, -25%);
      display: block;
      width: 100%;
      height: 7.5rem;
      background: url(../img/bg-lead-ttl.png) no-repeat center center;
      background-size: contain;
      z-index: -1;
    }
  }

  & .sec_txt {
    margin-bottom: 3rem;
  }

  & .sec_lead_arrow {
    width: 100%;
    text-align: center;

    & img {
      margin-left: auto;
      margin-right: auto;
    }
  }
}

/* sec_visuals - 各コース　を魅せるセクション
-------------------------*/
.sec_visuals {
  padding: 0;

  & .visuals_item {
    position: relative;
    overflow: hidden;

    & .bg {
      position: relative;
      width: 100%;
      height: 100%;
      z-index: -1;

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

    & .txt {
      position: absolute;
      bottom: 0;
      right: 0;
      display: inline-block;
      width: 72%;
      padding: 2.75rem 2.75rem 3rem;
      z-index: 100;
      opacity: 0;
      transform: translateY(100%);
      transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);

      &.visible {
        opacity: 1;
        transform: translateY(0);
      }

      & h2 {
        margin-bottom: 2rem;
        font-family: var(--kinto-sans);
        color: var(--color-white);
        font-size: 3.2rem;
        font-weight: 700;
        line-height: 1.22;
      }

      & p {
        color: var(--color-white);
        font-size: 1.6rem;
        line-height: 1.48;
      }
    }

    &.dept-art {
      & .txt {
        left: 0;
        right: inherit;
        background: url(../img/bg-visuals-art.svg) no-repeat center center;
        background-size: cover;
      }
    }

    &.dept-design {
      & .txt {
        background: url(../img/bg-visuals-design.svg) no-repeat center center;
        background-size: cover;
      }
    }

    &.dept-planning {
      & .txt {
        left: 0;
        right: inherit;
        background: url(../img/bg-visuals-planning.svg) no-repeat center center;
        background-size: cover;
      }
    }
  }
}

/* sec_about - 各コース　を魅せるセクション
-------------------------*/
.about {
  position: relative;
  width: 100%;
  height: auto;

  & .about_header {
    width: 100%;
    height: auto;

    &::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      display: block;
      width: 100%;
      height: 15rem;
      background: url(../img/bg-about-top.png) no-repeat center top;
      background-size: cover;
      z-index: -5;
    }

    & .caption {
      position: relative;
      width: 100%;
      height: auto;
      padding-top: 3rem;
      color: var(--color-white);
      font-size: 3.5rem;
      font-family: var(--kinto-sans);
      font-weight: 700;
      text-align: center;
      line-height: 1;
      letter-spacing: 0.1rem;
      text-shadow: 0px 0px 12px rgba(0, 110, 55, 0.6);

      &::before {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: -2rem;
        width: 120px;
        height: 110px;
        background: url(../img/obj-ttl-about-left.svg) no-repeat 19px 0;
        background-size: contain;
        z-index: -1;
      }

      &::after {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        right: -2rem;
        width: 117px;
        height: 131px;
        background: url(../img/obj-ttl-about-right.svg) no-repeat 15px 5px;
        background-size: contain;
        z-index: -1;
      }
    }
  }

  & .sec_ttl {
    background: none !important;
    color: var(--color-txt) !important;
  }

  &::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 11rem;
    background: url(../img/bg-about-bottom.png) no-repeat center bottom;
    background-size: cover;
    z-index: -1;
  }

  & .sec_about {
    display: block;
    padding-left: 2rem;
    padding-right: 2rem;

    & .fig {
      text-align: center;

      & img {
        width: 100%;
        margin: 0 auto;
      }
    }

    &.about_category {
      padding-top: 6.5rem;
      padding-bottom: 1rem;

      & .sec_ttl {
        margin-bottom: 2rem;
        font-family: var(--kinto-sans);
        font-size: 2.9rem;
        font-weight: 700;
        line-height: 1;
        text-align: center;

        & .sm {
          display: inline-block;
          padding-right: 0.5rem;
          font-size: 2.6rem;
        }

        & .num {
          font-size: 3.2rem;
        }
      }
    }

    &.about_viking {
      padding-top: 0;
      padding-bottom: 10rem;

      & .sec_ttl {
        margin-bottom: 2rem;
        font-family: var(--kinto-sans);
        font-size: 2rem;
        font-weight: 700;
        line-height: 1;
        text-align: center;

        & span {
          display: inline-block;
          width: 100%;
        }

        & .lg {
          margin-bottom: 1rem;
          line-height: 1;
          font-size: 3.2rem;
        }
      }
    }
  }

  & .plus {
    position: relative;
    display: block;
    min-height: 8.9rem;
    text-align: center;
    background: url(../img/bg-about-side.png) no-repeat center center;
    background-size: cover;

    & svg {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
}

/* sec_practical-experience - アート、デザインの現場へ
-------------------------*/
.sec_practical-experience {
  padding-bottom: 3rem !important;

  & .sec_txt {
    margin-bottom: 1rem !important;
  }

  & .item {
    text-align: center;
    padding-top: 1.25rem;
    padding-bottom: 1.5rem;

    & .txt {
      transform: translateY(-0.75rem);

      & .ttl_main {
        font-family: var(--kinto-sans);
        color: var(--color-txt);
        font-size: 2.2rem;
        font-weight: 700;
        line-height: 1;
      }

      & .ttl_sub {
        margin-top: 0.5rem;
        margin-bottom: 1rem;
        font-family: var(--kinto-sans);
        font-size: clamp(1.35rem, 1.4rem, 1.5rem);
        font-weight: 700;

        &.green {
          color: var(--color-wako-green);
        }
      }

      & .contents {
        color: var(--color-txt);
        font-size: 1.6rem;
        text-align: left;
      }
    }
  }
}

/* sec_faculty - 本気の教員たち
-------------------------*/
.sec_faculty {
  position: relative;

  & .sec_ttl {
    margin-bottom: 1.75rem !important;
  }

  & .bg {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    background: url(../img/bg-faculty.png) repeat left top;
    background-size: cover;
    z-index: -1;

    &::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      display: block;
      width: 100%;
      height: 100%;
      background-color: rgba(218, 252, 126, 0.35);
      mix-blend-mode: screen;
    }

    &::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      display: block;
      width: 100%;
      height: 100%;
      background: linear-gradient(180deg,
          rgba(149, 199, 16, 0.6) 0%,
          rgba(64, 179, 130, 0.6) 100%);
      mix-blend-mode: color;
    }
  }

  & .faculty_pickup {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    margin-bottom: 2.5rem;

    & .item {
      display: grid;
      grid-template-columns: 3rem auto;
      gap: 2.25rem;
      padding: 2rem;
      background-color: var(--color-white);

      & .item_side {
        text-align: center;
      }

      & .item_contents {
        & .img {
          max-width: 20.5rem;
          margin: 0 auto 2rem;
        }

        & .name {
          margin-bottom: 1.75rem;
          font-family: var(--kinto-sans);
          font-size: 3.2rem;
          font-weight: 700;
          line-height: 1;

          & .ruby {
            margin-top: 0.5rem;
            font-size: 1.5rem;
            font-weight: 500;
            line-height: 1;
          }
        }

        & .major {
          margin-bottom: 1.5rem;
          display: flex;
          align-items: center;
          justify-content: flex-start;
          gap: 0.5rem;
          font-family: var(--kinto-sans);
          color: var(--color-txt);
          font-size: clamp(1.5rem, 4.25vw, 1.6rem);
          font-weight: 500;

          & .label {
            font-size: 1.5rem;
            color: var(--color-white);
          }
        }

        & .courses {
          margin-bottom: 1.5rem;
          font-family: var(--kinto-sans);
          color: var(--color-txt);
          font-size: 1.5rem;
          font-weight: 500;

          & .label {
            display: inline-block;
            width: auto;
            margin-bottom: 0.5rem;
            font-size: 1.5rem;
            color: var(--color-white);
          }

          & .list {
            padding-left: 2rem;

            & li {
              list-style: initial;
            }
          }
        }

        & .comment {
          font-size: 1.4rem;
        }
      }

      &.art {
        & .item_side {
          & img {
            width: 100%;
            height: auto;
            max-width: 2.6rem;
          }
        }

        & .item_contents {

          & .major,
          & .courses {
            & .label {
              background-color: var(--color-art);
              padding: 0.8rem;
              line-height: 1;
            }
          }
        }
      }

      &.design {
        & .item_side {
          & img {
            width: 100%;
            height: auto;
            max-width: 2.3rem;
          }
        }

        & .item_contents {

          & .major,
          & .courses {
            & .label {
              background-color: var(--color-design);
              padding: 0.8rem;
              line-height: 1;
            }
          }
        }
      }

      &.planning {
        & .item_side {
          & img {
            width: 100%;
            height: auto;
            max-width: 2.1rem;
          }
        }

        & .item_contents {

          & .major,
          & .courses {
            & .label {
              background-color: var(--color-planning);
              padding: 0.8rem;
              line-height: 1;
            }
          }
        }
      }
    }
  }

  & .faculty-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.6rem;

    & .item {
      position: relative;
      overflow: hidden;
      display: grid;
      grid-template-columns: 10rem auto;
      align-items: center;
      gap: 1.5rem;
      background-color: var(--color-white);
      cursor: pointer;

      & .txt {
        & .category {
          display: inline-block;
          margin-bottom: 1rem;
          padding: 0.5rem 1rem;
          font-family: var(--kinto-sans);
          font-size: 1.5rem;
          font-weight: 700;
          line-height: 1;
          border-width: 1.5px;
          border-style: solid;
        }

        & .position {
          margin-bottom: 0.5rem;
          font-size: 1.4rem;
          line-height: 1;
        }

        & .name {
          font-family: var(--kinto-sans);
          font-size: 2.2rem;
          font-weight: 700;
          line-height: 1;
        }
      }

      & .add {
        position: absolute;
        right: 0;
        bottom: 0;
        display: block;
        width: 5rem;
        height: 4.8rem;
        text-align: right;
      }

      &.art {
        & .txt {
          & .category {
            color: var(--color-art);
            border-color: var(--color-art);
          }
        }

        & .add {
          background: url(../img/bg-btn-faculty_art.svg) no-repeat right bottom;
          background-size: contain;
        }
      }

      &.design {
        & .txt {
          & .category {
            color: var(--color-design);
            border-color: var(--color-design);
          }
        }

        & .add {
          background: url(../img/bg-btn-faculty_design.svg) no-repeat right bottom;
          background-size: contain;
        }
      }

      &.planning {
        & .txt {
          & .category {
            color: var(--color-planning);
            border-color: var(--color-planning);
          }
        }

        & .add {
          background: url(../img/bg-btn-faculty_planning.svg) no-repeat right bottom;
          background-size: contain;
        }
      }
    }
  }

  & .faculty_modals {
    width: 100%;
    height: 100%;

    & .modal {
      display: none;
      position: fixed;
      z-index: 1000;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      padding: 4rem 0;
      background-color: rgba(0, 110, 55, 0.75);
      box-sizing: border-box;
      overflow: auto;

      &.active {
        display: block;
      }

      & .modal-content {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: block;
        width: 100%;
        max-width: 35.3rem;
        height: auto;
        padding: 4rem;
        background-color: var(--color-white);
        border-radius: 12px;
        overflow: auto;
        box-sizing: border-box;

        & .modalClose {
          content: "";
          position: absolute;
          top: -1px;
          right: -1px;
          display: block;
          width: 4.8rem;
          height: 5rem;
          cursor: pointer;
          z-index: 1010;
          border-top-right-radius: 12px;
        }

        & .img {
          margin-bottom: 3rem;
          text-align: center;

          & img {
            width: 100%;
            height: auto;
            max-width: 15rem;
            margin: auto;
          }
        }

        & .txt {
          & .info {
            display: inline-flex;
            align-items: stretch;
            justify-content: flex-start;
            gap: 0.75rem;
            margin-bottom: 1.5rem;

            & .category {
              display: inline-block;
              width: auto;
              padding: 0.5rem 1rem;
              font-family: var(--kinto-sans);
              font-size: 1.5rem;
              font-weight: 700;
              line-height: 1;
              color: var(--color-white);
              border-radius: 2px;

              & span {
                display: flex;
                height: 100%;
                align-items: center;
                justify-content: center;
              }
            }

            & .position {
              font-size: 1.5rem;

              & span {
                display: block;
                line-height: 1.35;
              }
            }
          }

          & .name {
            margin-bottom: 2rem;

            & .main {
              margin-bottom: 0.5rem;
              font-family: var(--kinto-sans);
              font-size: 3.2rem;
              font-weight: 700;
              line-height: 1;
            }

            & .ruby {
              font-family: var(--kinto-sans);
              font-size: 1.5rem;
              font-weight: 500;
            }
          }

          & .major {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            gap: 0.6rem;
            margin-bottom: 1rem;

            & p {
              font-family: var(--kinto-sans);
              font-size: 1.5rem;
              font-weight: 500;
            }
          }

          & .courses {
            padding-bottom: 1.5rem;
            margin-bottom: 1.5rem;
            border-bottom: 1px dotted #aaa;

            & .label {
              margin-bottom: 0.5rem;
            }

            & ul {
              padding-left: 2rem;

              & li {
                list-style: initial;
                font-family: var(--kinto-sans);
                font-size: 1.5rem;
                font-weight: 500;
              }
            }
          }

          & .label {
            display: inline-block;
            width: auto;
            padding: 0.8rem;
            font-family: var(--kinto-sans);
            font-size: 1.5rem;
            font-weight: 500;
            line-height: 1;
          }

          & .comment {
            font-size: 1.4rem;
          }
        }

        &.art {
          & .modalClose {
            background: url(../img/bg-btn-faculty_art-close.svg) no-repeat right top;
            background-size: contain;
          }

          & .label {
            color: var(--color-art);
            border: 1px solid var(--color-art);
          }

          & .txt {
            & .category {
              background-color: var(--color-art);
            }
          }
        }

        &.design {
          & .modalClose {
            background: url(../img/bg-btn-faculty_design-close.svg) no-repeat right top;
            background-size: contain;
          }

          & .label {
            color: var(--color-design);
            border: 1px solid var(--color-design);
          }

          & .txt {
            & .category {
              background-color: var(--color-design);
            }
          }
        }

        &.planning {
          & .modalClose {
            background: url(../img/bg-btn-faculty_planning-close.svg) no-repeat right top;
            background-size: contain;
          }

          & .label {
            color: var(--color-planning);
            border: 1px solid var(--color-planning);
          }

          & .txt {
            & .category {
              background-color: var(--color-planning);
            }
          }
        }
      }
    }
  }
}

@media screen and (max-height: 800px) {
  .sec_faculty {
    & .faculty_modals {
      & .modal {
        height: 100%;
        overflow-y: scroll !important;

        & .modal-content {
          position: relative;
          height: auto;
          min-height: 100%;
          top: 0;
          transform: translate(-50%, 0);
          margin-top: 0.5rem;
          margin-bottom: 0.5rem;
        }
      }
    }
  }
}

/* sec_student - 在校生の声
-------------------------*/
.sec_student {
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 3rem !important;
  background-color: #f4f4f4;

  & .contents {
    width: 100%;
    max-width: 100%;
    padding-left: 2rem;
    padding-right: 2rem;
  }

  & .student_voice {
    width: 100%;
    max-width: 100%;

    & .item {
      max-width: 28.5rem;
      height: 100%;
      background-color: var(--color-white);
      border-radius: 12px;
      overflow: hidden;

      & .img {
        width: 100%;
        height: auto;
        max-width: 100%;

        & img {
          width: 100%;
        }
      }

      & .txt {
        padding: 2rem;

        & p {
          font-size: 1.5rem;
        }
      }

      & .by {
        position: absolute;
        bottom: 2.5rem;
        right: 2rem;
        font-family: var(--kinto-sans);
        font-size: 1.6rem;
        font-weight: 500;
        text-align: right;
        letter-spacing: 0.04rem;

        &.art {
          color: var(--color-art);
        }

        &.design {
          color: var(--color-design);
        }

        &.planning {
          color: var(--color-planning);
        }
      }
    }
  }

  /* Swiper - カスタマイズ */
  .swiper-wrapper {
    height: auto;
    margin-bottom: 5rem;
    align-items: stretch;
  }

  .swiper-slide {
    min-height: 520px;
    height: 100% !important;
  }

  .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background-color: transparent;
    border: 1.5px solid var(--color-wako-green);
    opacity: 1;
  }

  .swiper-pagination-bullet-active {
    background-color: var(--color-wako-green);
  }
}

/* sec_graduated - 活躍する卒業生たち
-------------------------*/
.sec_graduated {
  & .graduated_list {
    padding-left: 1rem;
    padding-right: 1rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.75rem;

    & .item {
      text-align: center;
      cursor: pointer;

      & .img {
        position: relative;
        max-width: 15rem;
        margin: 0 auto 1rem;

        &::after {
          content: "";
          position: absolute;
          top: 0;
          right: 0;
          display: block;
          width: 35px;
          height: 35px;
          background: url(../img/icon-graduated-open.svg) no-repeat right top;
          background-size: contain;
        }
      }

      & .txt {
        & .name {
          font-family: var(--kinto-sans);
          color: var(--color-txt);
          font-size: 2rem;
          font-weight: 500;
        }

        & .job {
          font-family: var(--kinto-sans);
          color: var(--color-txt);
          font-size: 1.5rem;
        }
      }
    }
  }

  & .graduated_modals {
    width: 100%;
    height: 100%;

    & .modal {
      display: none;
      position: fixed;
      z-index: 1100;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(149, 199, 16, 0.8);
      box-sizing: border-box;

      &.active {
        display: block;
      }

      & .modal-content {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: grid;
        grid-template-columns: 1fr;
        gap: 1.5rem;
        width: 100%;
        max-width: 35.3rem;
        height: auto;
        padding: 7rem 3rem;
        background-color: var(--color-white);
        border-radius: 12px;
        overflow: hidden;
        box-sizing: border-box;

        & .modalClose {
          content: "";
          position: absolute;
          top: -1px;
          right: -1px;
          display: block;
          width: 4.8rem;
          height: 5rem;
          background: url(../img/icon-graduated-close.svg) no-repeat right top;
          cursor: pointer;
          z-index: 1010;
        }

        & .img {
          text-align: center;
          line-height: 1;

          & img {
            width: 100%;
            height: auto;
            max-width: 15rem;
            margin: auto;
          }
        }

        & .txt {
          & .info {
            margin-bottom: 1rem;
            text-align: center;

            & .name {
              font-family: var(--kinto-sans);
              font-size: 2rem;
              font-weight: 500;
            }

            & .job {
              font-family: var(--kinto-sans);
              font-size: 1.45rem;
              font-weight: 500;
            }
          }

          & .line {
            margin-bottom: 1.5rem;
          }

          & .comment {
            font-size: 1.4rem;
            color: var(--color-txt);
          }
        }
      }
    }
  }
}

/* features - 和光大学芸術学科の特徴
-------------------------*/
.features {
  padding-bottom: 3rem;

  & .sec_features {
    padding-bottom: 0;

    & .sec_txt {
      margin-bottom: 1rem;
    }

    & .txt {
      font-size: 1.7rem;
    }

    & .fee {
      text-align: center;

      & .caption {
        display: inline-block;
        width: auto;
        margin-bottom: 1rem;
        padding: 0 0.5rem;
        font-family: var(--kinto-sans);
        font-size: 2rem;
        font-weight: 700;
        border-bottom: 3px double var(--color-txt);
      }

      & .fig {
        text-align: center;
      }

      &:last-of-type {
        margin-bottom: 2rem;
        padding-bottom: 2rem;
        border-bottom: 2.5px dotted #d9d9d9;
      }
    }

    & .arrow {
      width: 100%;

      & svg {
        margin: 2rem auto;
      }
    }

    & .fee_notes {
      font-size: 1.4rem;
    }

    & .certification {
      margin-top: 2rem;
      display: grid;
      grid-template-columns: 1fr;
      gap: 0.8rem;
      margin-bottom: 1.8rem;

      & li {
        width: 100%;
        padding: 1.5rem 2rem;
        font-family: var(--kinto-sans);
        color: var(--color-wako-green);
        font-size: 1.8rem;
        font-weight: 500;
        background-color: rgba(64, 179, 130, 0.09);
        border: 1px solid var(--color-wako-green);
      }
    }

    & .certification_notes {
      & p {
        margin-bottom: 1.25rem;
        font-size: 1.4rem;
      }
    }

    & .career {
      text-align: center;
      transform: translateY(-1.5rem);

      & .ttl {
        display: inline-block;
        width: auto;
        margin: 0 auto;
        padding: 0.9rem 3rem;
        font-family: var(--kinto-sans);
        color: var(--color-white);
        font-size: 2rem;
        font-weight: 700;
        text-align: center;
        transform: translateY(50%);
      }

      & .list {
        padding: 4rem 2.6rem 2rem;
        text-align: left;
        background-color: var(--color-white);

        & li {
          position: relative;
          display: flex;
          align-items: center;
          gap: 0.5rem;
          margin-bottom: 0.75rem;
          font-family: var(--kinto-sans);
          font-size: 1.6rem;
          font-weight: 500;
          line-height: 1.5;

          &::before {
            content: "";
            display: inline-block;
            width: 9.5px;
            height: 9.5px;
          }

          & span {
            display: block;
            font-size: 1.35rem;
            font-weight: 400;
          }

          &.row2 {
            display: block;

            & span {
              padding-left: 1.25rem;
            }
          }
        }
      }

      &.employment {
        & .ttl {
          background-color: var(--color-primary);
        }

        & .list {
          border: 1px solid var(--color-primary);
          box-shadow: 4px 4px 0px 0px rgba(64, 179, 130, 0.6);

          & li {
            &::before {
              background: url(../img/icon-circle-green.svg) no-repeat center center;
              background-size: contain;
            }
          }
        }
      }

      &.graduate-destinations {
        & .ttl {
          background-color: var(--color-secondary);
        }

        & .list {
          border: 1px solid var(--color-secondary);
          box-shadow: 4px 4px 0px 0px rgba(149, 199, 16, 0.6);

          & li {
            &::before {
              background: url(../img/icon-circle-lightgreen.svg) no-repeat center center;
              background-size: contain;
            }
          }
        }
      }
    }

    & .access {
      margin-top: 3rem;
      text-align: center;

      & .caption {
        display: inline-block;
        width: auto;
        margin-bottom: 1rem;
        padding: 0 0.5rem;
        font-family: var(--kinto-sans);
        font-size: 2rem;
        font-weight: 700;
        border-bottom: 3px double var(--color-txt);
      }

      & .fig {
        margin-bottom: 1rem;
      }

      & .info {
        margin-bottom: 2.5rem;
        text-align: left;
        font-size: 1.5rem;

        & .link {
          display: flex;
          gap: 0.5rem;
          width: 100%;
          align-items: center;

          & a {
            text-decoration: underline !important;
          }

          & img {
            display: inline-block;
            padding-left: 0.5rem;
          }
        }
      }

      & .notes {
        margin-bottom: 2.5rem;
        font-size: 1.4rem;
        text-align: left;
      }

      & .txt {
        margin-bottom: 2rem;
        font-size: 1.6rem;
        text-align: left;
      }
    }
  }
}

/* oc - オープンキャンパス
-------------------------*/
.oc {
  position: relative;
  background-color: var(--color-bg-cta);

  & .sec_oc_about {
    position: relative;
    padding-top: 4.5rem;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 3rem;
    background: url(../img/bg-oc.png) no-repeat center bottom;
    background-size: cover;
    z-index: 100;

    &::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      display: block;
      width: 100%;
      height: 12.5rem;
      background: url(../img/bg-halftone_top.svg) no-repeat center top;
      background-size: auto;
      z-index: 1;
    }

    & .sec_ttl {
      position: relative;
      width: 100%;
      margin-bottom: 0;
      background: none;
      z-index: 150;

      & img {
        margin: 0 auto;
      }
    }

    & .sec_txt {
      padding-left: 2rem;
      padding-right: 2rem;
    }

    & .oc_slider {
      margin-bottom: 2.5rem;
    }

    /* Swiper - 設定 */
    .swiper {
      width: 100%;
      height: auto;

      & .swiper-pagination {
        bottom: 0;
        left: 0;
        width: 100%;
        text-align: center;
        z-index: 100;
      }

      & .swiper-pagination-bullet {
        width: 12px;
        height: 12px;
        background-color: transparent;
        border: 1.5px solid var(--color-wako-green);
        opacity: 1;
      }

      & .swiper-pagination-bullet-active {
        background-color: var(--color-wako-green);
      }
    }

    .swiper-wrapper {
      transition-timing-function: linear;
    }

    .swiper-slide img {
      height: auto;
      width: 100%;
    }
  }

  & .sec_oc_date {
    padding-top: 3rem;

    & .ttl {
      margin-bottom: 2rem;
      text-align: center;

      & h2 {
        font-family: var(--kinto-sans);
        color: var(--color-white);
        font-size: clamp(2.6rem, 7.5vw, 3rem);
      }

      & .year {
        font-family: var(--kinto-sans);
        color: rgba(214, 255, 103, 1);
        font-size: 2rem;
        font-weight: 500;
      }
    }

    & .contents {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1.6rem;

      & .item {
        padding: 5rem 3rem;
        border: 1px solid var(--color-white);

        & .date {
          color: var(--color-white);
          text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25);
          line-height: 1;

          & .day {
            display: inline-block;
            padding-right: 0.05em;
            font-size: clamp(3.75rem, -17.25rem + 93.33vw, 5.5rem);
          }

          & .day-of-week {
            font-family: var(--kinto-sans);
            font-size: clamp(1.75rem, -4.25rem + 26.67vw, 2.25rem);
            font-weight: 700;
            letter-spacing: 0.175em;
            vertical-align: text-bottom;
          }
        }

        & .time {
          color: var(--color-white);
          font-size: 3.15rem;
          text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25);
        }

        &:nth-child(1) {
          background: url(../img/bg-oc-date01.png) no-repeat center center;
          background-size: cover;
        }

        &:nth-child(2) {
          background: url(../img/bg-oc-date02.png) no-repeat center center;
          background-size: cover;
        }

        &:nth-child(3) {
          background: url(../img/bg-oc-date03.png) no-repeat center center;
          background-size: cover;
        }

        &:nth-child(4) {
          background: url(../img/bg-oc-date04.png) no-repeat center center;
          background-size: cover;
        }
      }
    }

    & .cta {
      padding-left: 0;
      padding-right: 0;
      padding-bottom: 6rem;

      & .pickup {
        margin-bottom: 0.5rem;
        font-family: var(--kinto-sans);
        color: rgba(241, 237, 25, 1);
        font-size: 2rem;
        font-weight: 500;
        text-align: center;
      }
    }
  }
}

@media screen and (max-width: 374px) {
  .oc {
    & .sec_oc_date {
      & .contents {
        & .item {
          padding: 5rem 2.5rem;
        }
      }
    }
  }
}