@charset "utf-8";
@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap");

/* ==============================================
/* :root
============================================== */
:root {
  --color-base: #444444;
  --color-white: #ffffff;
  --color-gray: #efefef;
  --color-navy: #131e3e;
  --color-red: #d63638;
  --color-green: #16b192;
  --color-orange: #f6a822;
  --color-blue: #007aff;
  --color-light-blue: #d1e9ed;
  --color-light-yellow: #f2f0e1;
  --color-theme: #00a9c9;
}

/* ==============================================
/* Google Fonts Lato
============================================== */
.lato-thin {
  font-family: "Lato", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.lato-light {
  font-family: "Lato", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.lato-regular {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.lato-bold {
  font-family: "Lato", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.lato-black {
  font-family: "Lato", sans-serif;
  font-weight: 900;
  font-style: normal;
}

/* ==============================================
/* bgColor
============================================== */
.bg-theme {
  background: var(--color-theme) !important;
}

/* ==============================================
/* secFv
============================================== */
#secFv {
  inline-size: 100%;

  & img {
    inline-size: 100%;
  }
}

/* ==============================================
/* secRecommend
============================================== */
#secRecommend {
  inline-size: 100%;
  background: var(--color-light-yellow);
  padding: 45px 30px;

  & img {
    display: block;
    margin: 0 auto;
  }
}

@media screen and (width <=768px) {
  #secRecommend {
    padding: 30px 10px;

    & .icon {
      block-size: 70px;
    }
  }
}

/* ==============================================
/* recommendItem
============================================== */
.recommendItem {
  inline-size: 100%;
  block-size: auto;
  margin-block: 45px 0;
  box-shadow: 0px 0px 4.75px 0.25px rgba(0, 0, 0, 0.25);
  border-radius: 3px;
  padding: 15px;
  background: var(--color-white);

  & .imgBox {
    inline-size: 100%;

    & .swiper {
      position: relative;
      inline-size: 100%;
      block-size: 100%;
      background: var(--color-gray);

      & .swiper-slide {
        display: grid;
        place-items: center;

        & img {
          display: block;
          inline-size: 100%;
          block-size: 100%;
          object-fit: cover;
        }
      }

      & .swiper-button-next,
      & .swiper-button-prev {
        inline-size: 40px;
        block-size: 40px;
        color: var(--color-white);
        background: var(--color-base);
        border-radius: 50%;

        &:after,
        &:after {
          font-size: 18px;
        }
      }

      /*  ページネーションの間隔を調整 */
      & .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
        margin: 0 5px;
      }

      & .swiper-pagination-bullet.swiper-pagination-bullet-active .circle-pagination_inner {
        color: var(--color-base);
      }

      & .swiper-pagination-bullet.swiper-pagination-bullet-active.circle-pagination::before {
        animation: circleRight 5s linear forwards;
      }

      & .swiper-pagination-bullet.swiper-pagination-bullet-active.circle-pagination::after {
        animation: circleLeft 5s linear forwards;
      }

      /* 円形のページネーションを作成 */
      & .circle-pagination {
        position: relative;
        inline-size: 40px;
        block-size: 40px;
        z-index: 1;
        background-color: var(--color-base);
        border-radius: 50%;
        text-align: center;
        overflow: hidden;
        margin: auto;
        cursor: pointer;
        font-size: 14px;
        opacity: 1;

        /* 擬似要素でプログレスバー作成 */
        &::before {
          content: "";
          display: block;
          inline-size: 40px;
          block-size: 40px;
          background-color: var(--color-white);
          transform-origin: right 20px;
          position: absolute;
          top: 0;
          left: -20px;
          z-index: 2;
        }

        &::after {
          content: "";
          display: block;
          inline-size: 40px;
          block-size: 40px;
          background-color: var(--color-white);
          transform-origin: left 20px;
          position: absolute;
          top: 0px;
          left: 20px;
          z-index: 3;
        }

        & .circle-pagination_inner {
          display: flex;
          align-items: center;
          justify-content: center;
          inline-size: 35px;
          block-size: 35px;
          background-color: var(--color-white);
          border-radius: 50%;
          color: var(--color-dark-gray);
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          z-index: 4;
        }
      }
    }
  }

  & .txtBox {
    inline-size: 100%;

    & img {
      margin-block-start: 20px !important;
    }
  }
}

@keyframes circleLeft {
  0% {
    transform: rotate(0deg);
    background-color: var(--color-white);
  }

  50% {
    transform: rotate(180deg);
    background-color: var(--color-white);
  }

  50.01% {
    transform: rotate(360deg);
    background-color: var(--color-base);
  }

  100% {
    transform: rotate(360deg);
    background-color: var(--color-base);
  }
}

@keyframes circleRight {
  0% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(180deg);
  }
}

@media screen and (width <=768px) {
  .recommendItem {
    inline-size: 100%;
    block-size: auto;
    margin-block: 30px 0;
    box-shadow: 0px 0px 4.75px 0.25px rgba(0, 0, 0, 0.25);
    border-radius: 3px;
    padding: 15px;
    background: var(--color-white);

    & .imgBox {
      inline-size: 100%;

      & .swiper {
        position: relative;
        inline-size: 100%;
        block-size: 100%;
        background: var(--color-gray);

        & .swiper-slide {
          display: grid;
          place-items: center;

          & img {
            display: block;
            inline-size: 100%;
            block-size: 100%;
            object-fit: cover;
          }
        }

        & .swiper-button-next,
        & .swiper-button-prev {
          inline-size: 20px;
          block-size: 20px;
          color: var(--color-white);
          background: var(--color-base);
          border-radius: 50%;

          &:after,
          &:after {
            font-size: 9px;
          }
        }

        /*  ページネーションの間隔を調整 */
        & .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
          margin: 0 5px;
        }

        & .swiper-pagination-bullet.swiper-pagination-bullet-active .circle-pagination_inner {
          color: var(--color-base);
        }

        & .swiper-pagination-bullet.swiper-pagination-bullet-active.circle-pagination::before {
          animation: circleRight 5s linear forwards;
        }

        & .swiper-pagination-bullet.swiper-pagination-bullet-active.circle-pagination::after {
          animation: circleLeft 5s linear forwards;
        }

        & .swiper-pagination {
          margin-block: 0 -10px;
        }

        /* 円形のページネーションを作成 */
        & .circle-pagination {
          position: relative;
          inline-size: 15px;
          block-size: 15px;
          z-index: 1;
          background-color: var(--color-base);
          border-radius: 50%;
          text-align: center;
          overflow: hidden;
          margin: auto;
          cursor: pointer;
          font-size: 10px;
          opacity: 1;
          margin: 0 0 -10px;

          /* 擬似要素でプログレスバー作成 */
          &::before {
            content: "";
            display: block;
            inline-size: 15px;
            block-size: 15px;
            background-color: var(--color-white);
            transform-origin: right 5px;
            position: absolute;
            top: 0;
            left: -10px;
            z-index: 2;
          }

          &::after {
            content: "";
            display: block;
            inline-size: 15px;
            block-size: 15px;
            background-color: var(--color-white);
            transform-origin: left 5px;
            position: absolute;
            top: 0px;
            left: 5px;
            z-index: 3;
          }

          & .circle-pagination_inner {
            display: flex;
            align-items: center;
            justify-content: center;
            inline-size: 10px;
            block-size: 10px;
            background-color: var(--color-white);
            border-radius: 50%;
            color: var(--color-dark-gray);
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 4;
          }
        }
      }
    }

    & .txtBox {
      inline-size: 100%;

      & img {
        margin-block-start: 15px !important;
      }
    }
  }
}

/* =================================================
/* content
================================================= */
.content {
  display: none;

  &.is-show {
    display: block;
  }
}