@charset "utf-8";

:root {
  --color-pfuGlobalBlack: #333;
  --color-lightGray: #f4f4f4;
  --color-gray: #ccc;
  --color-darkGray: #5f6368;
  --color-txt-default: #333;
  --color-red: #e91052;
  --color-blueGradation: linear-gradient(85deg, #163182 6.74%, #179fe3 101.97%);
  --color-imaging: rgba(38, 52, 92, 0.85);
  --color-isi: rgba(22, 101, 130, 0.9);
  --color-consumer: rgba(86, 52, 101, 0.9);
  --layout-sideSpace_sp: 16px;
  --layout-sideSpace_tb: 40px;
  font-size: 10px;
  line-height: 1.5;
  color: var(--color-txt-default);
}

body {
  font-family: "Noto Sans JP", "メイリオ", "Droid Sans", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "ＭＳ ゴシック", sans-serif;
}

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

.heroCarousel {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
}

.heroCarousel_img {
  width: 100%;
}

/* -----------------------------------------------------------
carousel
----------------------------------------------------------- */
.swiper.-hero {
  .swiper_parts {
    height: fit-content;
    padding-block: 16px;

    @media (min-width: 769px) {
      padding-top: 32px;
      padding-bottom: 40px;
    }
  }
}

.swiper.-pickup {
  display: flex;
  flex-direction: column;
  gap: 40px;
  position: relative;
  width: 100%;
  height: fit-content;
  padding-inline: var(--layout-sideSpace_sp);

  @media (min-width: 769px) {
    padding-inline: 0;
  }
}

.swiper-wrapper {
  .swiper.-pickup & {
    flex-wrap: wrap;
    gap: 16px;

    @media (min-width: 769px) {
      flex-direction: row;
      flex-wrap: nowrap;
      gap: 0;
    }
  }
}

.swiper-slide {
  .swiper.-pickup & {
    width: calc((100% - 16px) / 2);

    @media (min-width: 769px) {
      width: calc(100% / 3);
    }
  }
}

.swiper_parts {
  height: fit-content;

  .swiper:not(.swiper-initialized) & {
    visibility: hidden;
  }

  .swiper.-pickup & {
    height: fit-content;
    padding-block: 12px;
  }
}

.swiper_autoplayBtn {
  position: relative;
  width: 15px;
  height: 22px;
  cursor: pointer;

  background-color: var(--color-pfuGlobalBlack);
  clip-path: polygon(0 0, 100% 50%, 0 100%);

  &:hover {
    opacity: 0.7;
  }

  &:focus-visible {
    outline: solid;
  }

  &.-active {
    background-color: transparent;
    clip-path: none;

    &::before {
      position: absolute;
      top: 50%;
      left: 0;
      width: 4px;
      height: 100%;
      background-color: var(--color-pfuGlobalBlack);
      translate: 0 -50%;
      content: "";
    }

    &:hover::before {
      opacity: 0.7;
    }

    &::after {
      position: absolute;
      top: 50%;
      right: 0;
      width: 4px;
      height: 100%;
      background-color: var(--color-pfuGlobalBlack);
      translate: 0 -50%;
      content: "";
    }

    &:hover::after {
      opacity: 0.7;
    }
  }
}

.swiper_slideBtn.-overlay {
  display: none;

  @media (min-width: 769px) {
    display: block;
    position: absolute;
    opacity: 0;
    top: calc((100% - (22px + 32px)) / 2);
    z-index: 1;
    width: 68px;
    height: 68px;
    border: 2px solid #fff;
    border-radius: 50%;
    translate: 0 -50%;
    transition: opacity 0.3s, background-color 0.3s;
    cursor: pointer;
  }

  .swiper:hover & {
    @media (min-width: 769px) {
      opacity: 1;
    }
  }

  &:focus {
    @media (min-width: 769px) {
      opacity: 1;
      background-color: var(--color-pfuGlobalBlack);
    }
  }

  &[class]:hover {
    @media (min-width: 769px) {
      background-color: var(--color-pfuGlobalBlack);
    }
  }

  &::before {
    position: absolute;
    top: 50%;
    height: 16px;
    width: 16px;
    border-top: 4px solid #fff;
    border-left: 4px solid #fff;
    translate: -50% -50%;
    content: "";
  }

  &.-prev {
    @media (min-width: 769px) {
      left: var(--layout-sideSpace_tb);
    }

    &::before {
      rotate: -45deg;
      left: calc(50% + 3px);
    }
  }

  &.-next {
    @media (min-width: 769px) {
      right: var(--layout-sideSpace_tb);
    }

    &::before {
      rotate: 135deg;
      left: calc(50% - 3px);
    }
  }
}

.swiper_parts>.swiper_slideBtn {
  height: 16px;
  width: 16px;
  border-top: 4px solid var(--color-pfuGlobalBlack);
  border-left: 4px solid var(--color-pfuGlobalBlack);
  cursor: pointer;

  &.-prev {
    rotate: -45deg;
  }

  &.-next {
    rotate: 135deg;
  }

  &:hover {
    opacity: 0.7;
  }
}

.pagination {
  display: flex;
  justify-content: center;
  gap: 16px;
  width: fit-content !important;

  @media (min-width: 769px) {
    gap: 24px;
  }
}

.swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  border: 1px solid var(--color-pfuGlobalBlack);
  background: none;
  opacity: 1;

  &.swiper-pagination-bullet-active {
    background: var(--color-pfuGlobalBlack);
    cursor: default;
  }

  &:not(.swiper-pagination-bullet-active):hover {
    background-color: rgba(22, 49, 130, 0.3);
  }
}