@charset "UTF-8";

@import url("_common.css");
@import url("_utility.css");

body.p-about {
  /* about common ======== */


  /* greeting ======== */
  &.--about-greeting {
    & .l-contents {
      & h2 {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        gap: 8px;
        position: relative;

        &::before {
          display: block;
          content: "";
          width: 1.5em;
          aspect-ratio: 1;
          background-image: url(../img/common/logo-primary.svg);
          background-repeat: no-repeat;
          background-size: contain;
          background-position: center;
        }
      }

      & figure {
        width: 60%;

        & figcaption {
          margin-block-start: 1em;
          font-size: clamp(1rem, 0.929rem + 0.3vw, 1.25rem);
          /* 16px 20px */
          line-height: 1.4;
        }

        &+h3 {
          margin-block-start: 1em;
          color: var(--color-red-primary);
          font-size: 11px;

          @media not all and (max-width: 750px) {
            width: 60%;
          }

          &+p {
            font-size: 15px;

            @media not all and (max-width: 750px) {
              width: 60%;
            }
          }
        }
      }
    }

    /* greeting common */
    & .l-contents.--01 {
      & .catch {
        color: var(--color-red-primary);
        font-size: clamp(1.188rem, 0.856rem + 1.41vw, 2.375rem);
        /*19px 38px */
        font-size: clamp(1.5rem, 1.256rem + 1.04vw, 2.375rem);
        /*24px 38px */
        font-weight: 700;
      }

      & .l-contents__inner {
        border-bottom: 1px solid color-mix(in srgb, var(--color-black-primary) 50%, transparent);

        @media not all and (max-width: 750px) {
          grid-template-columns: calc((800 / 1300) * 100%) 1fr;
        }
      }
    }

    /* greeting 01 */

    & .l-contents.--02 {
      & .l-contents__inner {
        @media not all and (max-width: 750px) {
          grid-template-columns: calc((800 / 1300) * 100%) 1fr;
        }
      }
    }

    /* greeting 02 */
  }

  /* greeting */

  /* guide ======== */
  &.--about-guide {
    & h1 {
      @media (max-width: 750px) {
        text-align: center;
      }
    }

    & .l-contents.--01 {
      & .l-contents__inner {
        @media not all and (max-width: 750px) {
          display: grid;
          align-items: center;
          grid-template-columns: 1fr min(465px, calc((465 / 1720) * 100vw));
        }

        @media (max-width: 750px) {
          grid-template-columns: 1fr;

          & figure {
            width: 50%;
            aspect-ratio: 1;
            margin-inline: auto;

            &>img {
              width: 100%;
              height: 100%;
              object-fit: contain;
              object-position: center;
            }
          }
        }

        & p:nth-of-type(2) {
          margin-block-start: 1.5em;
        }
      }
    }

    /* guide01 */
    & .l-contents.--02 {}

    /* guide02 */
    & .l-contents.--03 {
      background-color: var(--color-gray-primary);
    }

    /* guide03 */
    & .l-contents.--04 {
      & .l-contents__inner {
        border-bottom: 1px solid color-mix(in srgb, var(--color-black-primary) 50%, transparent);
      }
    }

    /* guide04 */
    & .l-contents.--05 {
      & .l-contents__inner {
        align-items: center;

        &>div:nth-of-type(1) {
          @media not all and (max-width: 750px) {
            order: 2;
          }

          & ol {
            all: revert;
            padding-inline-start: 1.5em;

            & li {
              font-size: clamp(1rem, 0.965rem + 0.15vw, 1.125rem);
              /* 16px 18px */
            }
          }
        }

        &>div:nth-of-type(2) {
          @media not all and (max-width: 750px) {
            order: 1;
          }
        }

        @media (max-width: 750px) {
          gap: 20px;
        }

        &>figure {
          @media (max-width: 750px) {
            width: 70%;
            margin-inline: auto;
          }
        }
      }
    }

    /* guide05 */
    & .l-contents.--06 {
      background-image: url(../img/about/guide/06-img01.webp);
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      color: var(--color-white);

      & .l-contents__inner {
        display: grid;
        align-items: center;
        justify-content: center;
        gap: 20px;

        @media not all and (max-width: 750px) {
          grid-template-columns: auto auto;
        }

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

        & h2 {
          font-size: clamp(1.25rem, 0.896rem + 1.51vw, 2.5rem);
          /* 20px 40px */
          padding-inline-end: 2em;
        }
      }
    }

    /* guide06 */
    & .l-contents.--07 {
      & ol {
        &>li {
          display: grid;
          align-items: center;
          grid-template-columns: auto 1fr;
          gap: 16px;
          position: relative;

          &::before,
          &::after {
            display: block;
            content: "";
            width: 4px;
            height: 50%;
            background-color: var(--color-red-primary);
            position: absolute;
            left: 9px;
            translate: -50% 0;
          }

          &::before {
            top: 0;
          }

          &::after {
            bottom: 0;
          }

          &:first-of-type {
            &::before {
              display: none;
            }
          }

          &:last-of-type {
            &::after {
              display: none;
            }
          }

          &>.pin {
            display: block;
            width: 18px;
            height: 18px;
            border-radius: 50vw;
            border: 4px solid var(--color-red-primary);
            background-color: var(--color-white);
            position: relative;
            z-index: 5;
          }

          &>div {
            display: grid;
            padding-block: 1em;
            border-bottom: 1px solid color-mix(in srgb, var(--color-black-primary) 50%, transparent);

            @media not all and (max-width: 750px) {
              align-items: center;
              grid-template-columns: auto 1fr;
              gap: 1.5em;
            }

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

            & .period {
              font-size: clamp(1.125rem, 1.019rem + 0.45vw, 1.5rem);
              /* 18px 24px */
              font-weight: 700;

              &>.small {
                font-size: 15px;
              }
            }
          }
        }
      }
    }

    /* guide07 */
    & .l-contents.--08 {
      background-color: var(--color-gray-primary);

      & a {
        font-weight: 400;
        transition: font-weight 0.4s ease-in-out;

        @media (any-hover: hover) {
          &:hover {
            font-weight: 500;
          }
        }
      }
    }

    /* guide08 */
  }

  /* guide */

  /* baccalaureate ======== */
  &.--about-baccalaureate {
    & .l-contents.--01 {}

    /* baccalaureate 01 */

    & .l-contents.--02 {}

    /* baccalaureate 02 */

    & .l-contents.--03 {
      background-color: var(--color-gray-primary);

      & .l-contents__inner {
        &>div:nth-of-type(1) {
          & figure {
            margin-block-start: 2em;
            margin-inline: auto;

            @media not all and (max-width: 750px) {
              width: 260px;
            }

            @media (max-width: 750px) {
              width: 130px;
            }
          }
        }

        &>div:nth-of-type(2) {
          & ol {
            all: revert;
            padding-inline-start: 1.5em;

            & li {

              &>span,
              &::marker {
                font-size: clamp(1.063rem, 0.974rem + 0.38vw, 1.375rem);
                /* 17px 22px */
                font-weight: 700;
              }

              &+& {
                margin-block-start: 1em;
              }
            }
          }

          & article.note {
            margin-block-start: 2em;
            padding: 1em;
            border: 1px solid color-mix(in srgb, var(--color-black-primary) 50%, transparent);

            & .titlearea {
              display: grid;
              grid-template-columns: auto auto;
              gap: 1em;

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

              & h3 {
                font-size: clamp(1.125rem, 1.054rem + 0.3vw, 1.375rem);
                /* 18px 22px */
                font-weight: 700;

                &>span {
                  display: block;
                  color: var(--color-red-primary);
                  font-size: clamp(0.75rem, 0.715rem + 0.15vw, 0.875rem);
                  /* 12px 14px */
                }
              }

              & figure {
                max-width: 160px;

                @media (max-width: 750px) {
                  justify-self: center;
                  margin-bottom: 20px;
                }
              }
            }
          }
        }
      }
    }

    /* baccalaureate 03 */

    & .l-contents.--04 {
      & .l-contents__inner {
        border-bottom: 1px solid color-mix(in srgb, var(--color-black-primary) 50%, transparent);
        ;
      }
    }

    /* baccalaureate 04 */

    & .l-contents.--05 {
      & .l-contents__inner {
        &>div {
          & figure {
            aspect-ratio: 597.6315/345.1655;
            position: relative;

            &>img {
              width: 100%;
              height: 100%;
              object-fit: cover;
              object-position: center;
            }

            & figcaption {
              display: inline grid;
              place-items: center;
              width: fit-content;
              padding-inline: 1em;
              background-color: var(--color-white);
              font-size: clamp(1.125rem, 0.983rem + 0.6vw, 1.625rem);
              /* 18px 26px */
              font-weight: 500;
              text-align: center;
              position: absolute;
              bottom: 0;
              left: 0;
            }
          }

          p {
            margin-block-start: 1em;
            font-size: 14px;
          }
        }
      }
    }

    /* baccalaureate 05 */
  }

  /* baccalaureate */

  /* facility ======== */
  &.--about-facility {
    & .l-contents.--01 {
      & h2+p {
        font-size: clamp(1rem, 0.965rem + 0.15vw, 1.125rem);
        /* 16px 18px */
        font-weight: 500;

        &+a {
          display: block;
          margin-block-start: 2em;
          text-align: center;

          & img {
            box-shadow: 4px 4px 4px color-mix(in srgb, var(--color-black-primary) 30%, transparent);
            transition: box-shadow 0.4s ease-in-out;
          }

          & span {
            display: block;
            margin-block-start: .5em;
          }

          @media (any-hover: hover) {
            &:hover img {
              box-shadow: 6px 6px 6px color-mix(in srgb, var(--color-black-primary) 30%, transparent);
            }
          }
        }
      }
    }

    /* facility 01 */

    & .l-contents.--02 {
      background-color: var(--color-gray-primary);

      & .c-tab {
        margin-block-start: 2em;

        & .c-tab-list {
          display: flex;
          flex-wrap: wrap;
          gap: clamp(0.625rem, 0.59rem + 0.15vw, 0.75rem);

          /* 10px 12px */
          &+& {
            margin-block-start: clamp(0.625rem, 0.59rem + 0.15vw, 0.75rem);
          }

          &>li {
            display: grid;
            place-items: center;
            padding-inline: 1em;
            width: fit-content;
            min-width: 5em;
            border: 1px solid color-mix(in srgb, var(--color-gray-quinary) 75%, transparent);
            ;
            background-color: var(--color-white);
            font-size: clamp(1rem, 0.929rem + 0.3vw, 1.25rem);
            /* 16px 20px */
            font-weight: 500;
            transition:
              background-color 0.4s ease-in-out,
              font-weight 0.4s ease-in-out;
            cursor: pointer;

            &.active {
              color: var(--color-white);
              background-color: var(--color-red-primary);
              border: none;
            }

            @media (any-hover: hover) {
              &:hover {
                background-color: var(--color-red-quaternary);
                font-weight: 700;
              }
            }
          }
        }

        & .c-tab-content {
          margin-block-start: 2em;
          position: relative;

          & .c-card {
            border: none;

            & figure {
              aspect-ratio: 824.8779/492.188;
              border-radius: clamp(0.5rem, 0.288rem + 0.91vw, 1.25rem);
              /* 8px 20px */
              overflow: hidden;

              &>img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: center;
              }

              &+p {
                margin-block-start: .5em;
                line-height: 1.4;
              }
            }
          }

          & .swiper-slide {
            & figure {
              scale: .9;
              transition: scale 0.4s ease-in-out;
            }

            & p {
              visibility: hidden;
            }
          }

          & .swiper-slide-active {
            & figure {
              scale: 1;
            }

            & p {
              visibility: visible;
            }

            ;
          }

          & .c-tab-panel {
            position: relative;
          }

          & .c-swiperbutton {
            display: grid;
            align-items: center;
            justify-content: space-between;
            gap: 1em;
            margin-block-start: 1em;
            margin-inline: auto;
            position: relative;

            @media not all and (max-width: 750px) {
              position: absolute;
              top: 0;
              left: 50%;
              transform: translateX(-50%);
              height: calc(100% - 2em);
              margin-block-start: 0;
              pointer-events: none;
              z-index: 10;
            }

            @media (max-width: 750px) {
              grid-template-columns: 1fr;
              position: static;
            }

            & .swiper-pagination {
              width: fit-content;
              position: relative;
              order: 2;

              @media not all and (max-width: 750px) {
                position: absolute;
                bottom: -5em;
                left: 50%;
                transform: translateX(-50%);
              }

              @media (max-width: 750px) {
                width: 100%;
                margin-block-start: 2em;
              }

              & .swiper-pagination-bullet {
                width: 10px;
                height: 10px;
                background-color: var(--color-gray-quinary);
                opacity: 1;
              }

              & .swiper-pagination-bullet-active {
                width: 12px;
                height: 12px;
                background-color: var(--color-red-quaternary);
              }
            }

            & .c-swiperbutton__wrapper {
              display: grid;
              place-items: center;
              grid-template-columns: auto auto;
              gap: 20px;
              width: fit-content;
              position: relative;
              order: 1;

              @media not all and (max-width: 750px) {
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                width: 100%;
                justify-content: space-between;
                pointer-events: auto;
              }

              @media (max-width: 750px) {
                position: absolute;
                top: 40%;
                left: 0;
                transform: translateY(-50%);
                width: 100%;
                display: flex;
                justify-content: space-between;
                pointer-events: none;
                z-index: 10;
                padding-inline: 16px;
              }

              & .swiper-button-prev,
              & .swiper-button-next {
                width: 70px;
                height: 70px;
                border-radius: 9999px;
                background-color: var(--color-white);
                position: relative;

                &>svg {
                  color: var(--color-black-primary);
                  width: 30px;
                  height: 30px;
                }

                @media (max-width: 750px) {
                  width: 40px;
                  height: 40px;
                  pointer-events: auto;

                  &>svg {
                    width: 20px;
                    height: 20px;
                  }
                }
              }

              & .swiper-button-prev {
                left: -30px;

                @media (max-width: 750px) {
                  left: 20px;
                }
              }

              & .swiper-button-next {
                right: -30px;

                @media (max-width: 750px) {
                  right: 20px;
                }
              }
            }
          }
        }
      }

      & section.movie {
        margin-block-start: 5em;

        @media (max-width: 750px) {
          margin-block-start: 2em;
        }

        & ul {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(295px, 1fr));
          gap: 21px 1px;
          margin-block-start: 1em;

          &>li {
            height: 100%;
            outline: 1px solid color-mix(in srgb, var(--color-black-primary) 60%, transparent);

            &>a {
              height: 100%;
              border: none;
            }

            @media not all and (max-width: 750px) {
              /* & + li{
                & a{
                  border-left: none;
                }
              }
              &:nth-of-type(3n){
                @media (max-width: 750px) {
                  border-left: 1px solid color-mix(in srgb, var(--color-black-primary) 60%, transparent);
                }
              } */
            }
          }
        }

        & .c-movie {
          position: relative;

          & .arrow {
            translate: 0 -4em;
            z-index: 5;
          }
        }

        & figure {
          padding: clamp(0.313rem, 0.224rem + 0.38vw, 0.625rem);
          /* 5px 10px */
        }
      }
    }

    /* facility 02 */

    & .l-contents.--03 {
      & .l-contents__inner:nth-of-type(1) {
        @media not all and (max-width: 750px) {
          grid-template-columns: 35% 1fr;
        }

        @media (max-width: 750px) {
          grid-template-columns: repeat(1, 1fr);
        }

        & h2+p {
          font-size: clamp(1rem, 0.965rem + 0.15vw, 1.125rem);
          /* 16px 18px */
          font-weight: 500;
        }

        & article.note {
          display: grid;
          place-items: center;
          margin-block-start: 2em;
          padding: 0.5em;
          background-color: var(--color-red-primary);

          & p {
            padding-inline-start: 1em;
            text-indent: -1em;
            color: var(--color-white);
            font-size: clamp(1rem, 0.965rem + 0.15vw, 1.125rem);
            /* 16px 18px */
            font-weight: 500;
          }
        }
      }

      & .l-contents__inner:nth-of-type(2) {
        & ul {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
          gap: 21px 1px;
          margin-block-start: 1em;

          &>li {
            height: 100%;
            border: none;
            outline: 1px solid color-mix(in srgb, var(--color-black-primary) 60%, transparent);

            @media not all and (max-width: 750px) {
              /* & + li{
                border-left: none;
              }
              &:nth-of-type(3n){
                @media (max-width: 750px) {
                  border-left: 1px solid color-mix(in srgb, var(--color-black-primary) 60%, transparent);
                }
              } */
            }
          }
        }
      }

      & .l-contents__inner:nth-of-type(3) {
        & h3 {
          font-size: clamp(1.125rem, 0.983rem + 0.6vw, 1.625rem);
          /* 18px 26px */
          font-weight: 500;
        }

        &>div {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
          gap: 20px;
          margin-block-start: 1em;
        }
      }

      & .l-contents__inner:nth-of-type(4) {
        & h3 {
          font-size: clamp(1.125rem, 0.983rem + 0.6vw, 1.625rem);
          /* 18px 26px */
          font-weight: 500;
        }

        & p {
          margin-block-start: 0.25em;

          &:nth-of-type(4) {
            margin-block-start: 1em;
          }
        }

        & span {
          display: inline-block;
          border: 1px solid var(--color-gray-quinary);
          padding-block: 0.25em;
          padding-inline: 1em;
          margin-block-start: 1em;
          line-height: 1;
        }
      }

      & .l-contents__inner:nth-of-type(5) {
        & h3 {
          font-size: clamp(1.125rem, 0.983rem + 0.6vw, 1.625rem);
          /* 18px 26px */
          font-weight: 500;
        }

        & dl {
          display: grid;
          grid-template-columns: auto 1fr;
          gap: 2em;
          margin-block-start: 1em;

          & dt {
            font-weight: 400;
            position: relative;
            width: 138px;

            &::after {
              display: block;
              content: "";
              width: 2px;
              height: 0.5lh;
              background-color: color-mix(in srgb, var(--color-black-primary) 50%, transparent);
              ;
              position: absolute;
              top: 0.55lh;
              right: -1em;
              translate: 0 -50%;
            }
          }
        }
      }
    }

    /* facility 03 */
    & .l-contents.--04 {
      background-color: var(--color-gray-primary);

      & .c-tab {
        &>.c-tab-list {
          display: flex;
          flex-wrap: wrap;
          gap: 18px 9px;

          &>li {
            cursor: pointer;
            display: grid;
            place-items: center;
            width: 6em;
            padding-block: .25em;
            background-color: var(--color-white);
            border: 1px solid color-mix(in srgb, var(--color-gray-quinary) 75%, transparent);
            font-size: clamp(1rem, 0.929rem + 0.3vw, 1.25rem);
            /* 16px 20px */
            font-weight: 500;
            transition:
              background-color 0.4s ease-in-out,
              font-weight 0.4s ease-in-out;

            &.active {
              border: none;
              background-color: var(--color-red-primary);
              color: var(--color-white);
            }

            @media (any-hover: hover) {
              &:hover {
                background-color: var(--color-red-quaternary);
                font-weight: 700;
              }
            }
          }
        }

        &>.c-tab-content {
          margin-block-start: clamp(1rem, 0.717rem + 1.21vw, 2rem);

          /* 16px 32px */
          &>.c-tab-panel {
            padding-block-end: 60px;
            position: relative;

            .swiper-wrapper {
              height: 100%;
            }

            .swiper-slide {
              height: auto;
            }

            & .c-card {
              height: 100%;
              padding-block-end: 1em;

              & figure {
                padding: clamp(0.313rem, 0.224rem + 0.38vw, 0.625rem);
                /* 5px 10px */
                aspect-ratio: 302.25/246.2113;

                &>img {
                  width: 100%;
                  height: 100%;
                  object-fit: cover;
                  object-position: center;
                }
              }

              & .date {
                color: var(--color-red-primary);
                font-size: 11px;
              }

              & h3.c-title.--underline {
                margin-block-start: 0;
                font-size: clamp(1.125rem, 0.983rem + 0.6vw, 1.625rem);

                /* 18px 26px */
                &+p {
                  margin-block-start: 1em;
                }
              }
            }
          }

          & .swiper-pagination {
            & .swiper-pagination-bullet {
              width: 10px;
              height: 10px;
              background-color: var(--color-gray-quinary);
            }

            & .swiper-pagination-bullet-active {
              width: 12px;
              height: 12px;
              background-color: var(--color-gray-primary);
              border: 2px solid var(--color-gray-quinary);
            }
          }

          & .swiper-button-prev,
          & .swiper-button-next {
            display: grid;
            place-items: center;
            width: clamp(1.25rem, 0.542rem + 3.02vw, 3.75rem);
            /* 20px 60px */
            height: clamp(1.25rem, 0.542rem + 3.02vw, 3.75rem);
            /* 20px 60px */
            aspect-ratio: 1;
            background-color: var(--color-green-primary);
            border-radius: 50vw;

            &::after {
              display: block;
              content: "";
              width: 50%;
              height: 50%;
              background-image: url(../img/common/icon-arrow-black.svg);
              background-repeat: no-repeat;
              background-size: contain;
              background-position: center;
              position: absolute;
              inset: 0;
              margin: auto;
              translate: 0 -10%;
            }

            &>svg {
              display: none;
            }
          }

          & .swiper-button-next {
            translate: 65% 0;
          }

          & .swiper-button-prev {
            translate: -65% 0;

            &::after {
              scale: -1 1;
            }
          }
        }
      }
    }

    /* facility 04 */
  }

  /* facility */

  /* access ======== */
  &.--about-access {
    & .l-contents.--01 {
      & .l-contents__inner {
        border-bottom: 1px solid color-mix(in srgb, var(--color-black-primary) 50%, transparent);
      }

      & .access-locations {
        display: grid;
        gap: 40px;
        margin-block-start: 1.5em;

        @media not all and (max-width: 750px) {
          grid-template-columns: repeat(3, 1fr);
        }

        @media (max-width: 750px) {
          grid-template-columns: 1fr;
          gap: 1.5em;
        }

        & h3 {
          font-weight: 700;
          margin-block-end: 0.5em;
        }
      }

      & .googlemap {
        margin-block-start: 2em;

        &>iframe {
          display: block;
          width: 100%;
          max-width: 1100px;
          aspect-ratio: 1128.9511/466.3217;
          margin-inline: auto;
        }
      }
    }

    /* access 01 */
    & .l-contents.--02 {
      & .access-route {
        margin-block-start: 2em;

        &>img {
          display: block;
          width: 100%;
          max-width: 1000px;
          aspect-ratio: 1913/975;
          margin-inline: auto;
        }
      }
    }

    /* access 02 */
  }

  /* access */
}