@charset "UTF-8";

/*-------------------------
  top - 水戸北友会トップページ のスタイル
-------------------------*/

.contents {

  & .main {

    /* メインビジュアル - swiperあり */
    & .mv {
      height: auto;

      & .inner {
        position: relative;
        width: 100%;
        height: 100%;
        max-height: 100vh;
        z-index: 100;
        aspect-ratio: 38 / 25;

        & .concept {
          position: absolute;
          right: 8%;
          bottom: 22%;
          width: auto;
          font-family: var(--font-family-zenmaru);
          color: var(--color-white);
          font-weight: 700;
          text-shadow: 0px 0px 10px rgba(33, 36, 38, 1.00);
          text-align: right;
          z-index: 300;
          font-size: 3.85rem;

          & span {
            display: block;
            width: auto;
            margin-bottom: 1rem;
            line-height: 1;
          }
        }

        & .img-wokers {
          &.is-pc {
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            z-index: 250;
            width: 100%;
            max-width: 30%;

            & img {
              vertical-align: middle;
            }
          }
        }

        & .mv-front,
        & .mv-back {
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;

          & img {
            height: 100%;
            line-height: 0;
          }
        }

        & .mv-front {
          z-index: 200;
        }

        & .mv-back {
          z-index: 0;
        }
      }

      & .swiper {
        width: 100%;
        max-width: 85%;
        border-radius: 86px;
        overflow: hidden;
        z-index: 50;
        line-height: 1;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -52.5%);
      }

      & .anchor-box {
        & .img-wokers {
          &.is-sp {
            display: none;
          }
        }

        & .scroll-down {
          display: none;
        }
      }
    }

    /* about - 概要・コンセプト */
    & .about {
      position: relative;
      padding: 10rem 0;

      &::before {
        content: "";
        position: absolute;
        top: 0;
        display: block;
        width: 100%;
        height: 100%;
        max-height: 14.35rem;
        background: url(../img/index/bg_sky.png) no-repeat top center;
        background-size: 100%;
        mix-blend-mode: multiply;
        z-index: -1;
      }

      &::after {
        content: "";
        position: absolute;
        bottom: 0;
        display: block;
        width: 100%;
        height: 100%;
        max-height: 15rem;
        background: url(../img/index/bg_city.png) no-repeat bottom center;
        background-size: 100%;
        mix-blend-mode: multiply;
        z-index: -1;
      }

      & .contents {
        padding-left: 6.8%;

        & .heading2 {
          position: relative;
          width: -webkit-fit-content;
          width: -moz-fit-content;
          width: fit-content;
          font-family: var(--font-family-zenmaru);
          color: var(--color-txt);
          font-size: 1.875rem;
          font-weight: 700;
          margin-bottom: 1.65rem;

          &::after {
            content: "";
            position: absolute;
            top: 0;
            right: -15%;
            display: block;
            width: 67px;
            height: 98px;
            background: url(../img/components/obj_clover-right.png) no-repeat center center;
            background-size: contain;
          }

          & em {
            color: var(--color-primary);
          }
        }

        & .txt {
          & p {
            margin-bottom: 2rem;
            font-family: var(--font-family-zenmaru);
            color: var(--color-txt);
            font-size: 1rem;
            font-weight: var(--font-base-weight);
            line-height: 1.75;

            &:last-child {
              margin-bottom: 0;
            }
          }
        }
      }

      & .img {
        width: 100%;
        max-width: 48.73%;
        height: 100%;
        margin: 0;
        padding: 0;
        line-height: 0;
        border-radius: 64px 0 0 64px;
        overflow: hidden;
        display: inline-flex;
        justify-content: center;
        align-items: stretch;
      }
    }

    /*.  company-profil - 法人概要 */
    & .company-profile {
      margin-bottom: 0;

      & .discription-list {
        & .item {
          & dd {
            & ul {
              margin-bottom: 1.5rem;

              &:last-child {
                margin-bottom: 0;
              }

              & li {
                padding-left: 0.75rem;
                font-size: 0.975em;
                margin-bottom: 0.25em;
              }
            }
          }
        }
      }

      & .heading2.on-icon {
        margin-bottom: 2.75rem;
      }
    }

    /* リンクボタン群のブロック */
    & .link {
      display: flex;
      flex-wrap: nowrap;
      align-items: center;
      justify-content: center;
      gap: 1.65rem;
      width: 100%;
      height: auto;
      margin-bottom: 0;
      padding: 2.5rem 0 3.5rem;

      & .btn {
        position: relative;
        width: 100%;
        max-width: 28.75rem;
        padding: 2.5rem;
        font-size: 2.0625rem;

        & .material-symbols-rounded {
          position: absolute;
          right: -30%;
          top: 50%;
          transform: translateY(-50%);
          font-size: 1.25em;
        }
      }
    }

    @media screen and (max-width: 1512px) {
      & .mv {
        height: auto;

        & .inner {
          height: 100%;
          max-height: calc(100vh - 13rem);

          & .concept {
            right: 6rem;
            bottom: 10rem;
            font-size: 3rem;
          }

          & .mv-front,
          & .mv-back {
            height: 100%;

            & img {
              height: 100%;
            }
          }
        }

        & .swiper {
          width: 100%;
          max-height: 625px;
        }
      }
    }

    @media screen and (max-width: 1440px) {
      & .mv {
        height: auto;

        & .inner {
          max-height: 750px;
        }

        & .swiper {
          width: 86.75%;
        }
      }
    }

    @media screen and (max-width: 1439px) {
      & .mv {
        height: 100%;
        max-height: -webkit-max-content;
        max-height: -moz-max-content;
        max-height: max-content;

        & .inner {
          max-height: 100%;

          & .concept {
            font-size: 2.75rem;
          }
        }
      }

      & .link {
        & .btn {
          padding: 1.65rem 0;
          font-size: 1.75rem;
        }
      }
    }

    @media screen and (max-width: 1365px) {
      & .about {
        & .contents {
          & .heading2 {
            &::after {
              top: -3.5%;
              right: -7.5%;
            }
          }
        }
      }
    }

    @media screen and (max-width: 1023px) {
      & .about {
        padding: 7.5rem 0 10rem;

        & .contents {
          & .heading2 {
            font-size: 1.5rem;

            &::after {
              width: 50px;
              height: 73px;
              top: -3.5%;
              right: -5%;
            }
          }
        }

        & .img {
          border-radius: 39px 0 0 39px;
        }
      }

      & .link {
        padding-left: 6.8%;
        padding-right: 6.8%;

        & .btn {
          font-size: 1.375rem;
        }
      }
    }

    @media screen and (max-height: 960px) {
      & .mv {
        height: 100%;

        & .inner {
          max-height: 100%;
        }

        & .swiper {
          width: 86.75%;
        }
      }
    }

    @media screen and (max-width: 767px) {
      & .logo {
        display: block;
        background-color: var(--color-white);
        padding: 2.5rem 0 1rem 1.5rem;

        & a {
          display: inline-block;
          width: 100%;
          max-width: 50.89vw;
        }
      }

      & .mv {
        height: calc(100svh - 113px);
        max-height: none;

        & .inner {
          height: auto;

          & .concept {
            width: 100%;
            left: 50%;
            top: unset;
            bottom: 2.25rem;
            transform: translatex(-50%);
            font-size: 1.85rem;
            text-align: center;

            & span {
              width: 100%;
              padding-left: 1rem;
            }
          }

          & .img-wokers {
            &.is-pc {
              display: none;
            }
          }
        }

        & .swiper {
          width: 100%;
          min-height: 231px;
          border-radius: 38px;
          transform: translate(-50%, -50%);
          max-width: calc(100% - 3rem);
        }

        & .anchor-box {
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
          width: 100%;
          line-height: 1;
          text-align: center;
          z-index: 500;

          & .img-wokers {
            &.is-sp {
              display: block;
              width: 100%;
              max-width: 58.78vw;
              margin: 0 auto -1px;
              line-height: 0;

              & img {
                height: 100%;
              }
            }
          }

          & .link {
            margin-bottom: 0 !important;
          }

          & .scroll-down {
            display: block;
            width: 100%;
            max-width: 4.5rem;
            text-align: center;
            margin: 0.5rem auto 0;
            line-height: 0;

            & a {
              display: inline;
              width: 100%;
              height: 100%;
              line-height: 0;
            }
          }
        }
      }

      & .about {
        padding: 5.3125rem 0;
        margin-bottom: 3.125rem;

        &::before {
          height: 100px;
          background-position: top left;
          background-size: cover;
        }

        &::after {
          height: 120px;
          background-size: cover;
        }

        & .flex {
          flex-wrap: wrap;
          gap: 2rem;
        }

        & .contents {
          order: 2;
          padding-left: 2.5rem;
          padding-bottom: 2.5rem;
        }

        & .img {
          width: 100%;
          max-width: calc(100% - 2.5rem);
          margin-left: auto;
          order: 1;
        }
      }

      & .company-profile {
        & .discription-list {
          margin-bottom: 2.1875rem;

          & .item {
            & dd {
              & ul {
                & li {
                  padding-left: 0.5em;
                }
              }
            }
          }
        }
      }

      & .link {
        margin-bottom: 3.75rem;
        padding: 0 1rem 1rem;
        flex-direction: column;
        gap: 1rem;
      }
    }

    @media screen and (max-width: 375px) {
      & .mv {
        height: auto;
        max-height: none;

        & .anchor-box {
          position: static;
          transform: translateX(0);
          padding-top: 1.75rem;
        }
      }

      & .about {
        & .contents {
          padding-left: 1.75rem;

          & .heading2 {
            font-size: 1.35rem;
          }
        }

        & .img {
          max-width: calc(100% - 1.5rem);
        }
      }
    }
  }
}