._CasestudyDialog_9d39a_1 {
  background-color: transparent;
  border: 0;
  height: 100%;
  margin: 0;
  max-height: 100%;
  max-width: 100%;
  overscroll-behavior: none;
  padding: 0;
  scrollbar-width: none;
  width: 100%;
}

._outer_9d39a_14 {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
  padding: 0 var(--OUTSIDE-GUTTER);
}

._inner_9d39a_22 {
  background-color: var(--BG-WHITE);
  display: flex;
  flex-direction: column;
  max-height: 100%;
  max-width: var(--CONTENT-WIDTH-PC);
  padding: var(--SPACE-BLOCK-SPACING-32) var(--SPACE-BLOCK-SPACING-16);
  position: relative;
  width: 100%;
  height: calc(100% - (var(--SPACE-BLOCK-SPACING-32) * 2));

  @media (width > 768px) {
    padding: var(--SPACE-BLOCK-SPACING-48);
    height: calc(100% - (var(--SPACE-BLOCK-SPACING-80) * 2));
  }
}

/* .head {
} */

._closeButton_9d39a_42 {
  align-items: center;
  background-color: transparent;
  border: 0;
  color: var(--TEXT-WHITE);
  cursor: pointer;
  display: flex;
  font-size: var(--FONT-SIZE-BASE);
  gap: var(--SPACE-BLOCK-SPACING-4);
  line-height: 1.5;
  padding: 0;
  position: absolute;
  top: -32px;
  right: 0;
  transition: opacity var(--TRANSITION);

  /* icon */
  &::before {
    content: '';
    display: block;
    flex-shrink: 0;
    height: 24px;
    width: 24px;
    background-color: currentColor;
    mask-image: url('/assets/images/common/icon-close.svg');
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
  }

  &:focus-visible {
    opacity: var(--OPACITY-HOVER);
  }

  @media (any-hover: hover) {
    &:hover {
      opacity: var(--OPACITY-HOVER);
    }
  }
}

._heading_9d39a_83 {
  font-size: var(--FONT-SIZE-XL);
  line-height: 1.5;
  margin: 0;

  @media (width > 768px) {
    font-size: var(--FONT-SIZE-3XL);
  }
}

._body_9d39a_93 {
  margin-top: var(--SPACE-BLOCK-SPACING-24);
  height: 100%;
  overflow: hidden;
}
._CaseStudyForm_lvb4q_1 {
  background-color: var(--BG-GRAY);
  padding: var(--SPACE-BLOCK-SPACING-24) var(--SPACE-BLOCK-SPACING-16);

  @media (width > 768px) {
    padding: var(--SPACE-BLOCK-SPACING-40);
  }

  > :is(:first-child) {
    margin-top: 0;
  }
}

._clear_lvb4q_14 {
  display: flex;
  align-items: center;
  gap: var(--SPACE-BLOCK-SPACING-4);
  font-size: var(--FONT-SIZE-XS);
  border: 0;
  margin: var(--SPACE-BLOCK-SPACING-32) auto 0;
  padding: 0;
  transition: opacity var(--TRANSITION);

  @media (width > 768px) {
    font-size: var(--FONT-SIZE-BASE);
    margin-right: 0;
  }

  &::before {
    content: '';
    aspect-ratio: 1 / 1;
    width: 16px;
    background-image: url('/assets/images/common/icon-clear.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }

  &:focus-visible {
    opacity: var(--OPACITY-HOVER);
  }

  @media (any-hover: hover) {
    &:hover {
      opacity: var(--OPACITY-HOVER);
    }
  }
}
._CasestudyFormFilter_16iy6_1 {
  display: flex;
  flex-direction: column;
  gap: var(--SPACE-BLOCK-SPACING-24);
  margin-top: var(--SPACE-BLOCK-SPACING-24);

  @media (width > 768px) {
    flex-direction: row;
    gap: var(--SPACE-BLOCK-SPACING-48);
    margin-top: var(--SPACE-BLOCK-SPACING-32);
  }

  > fieldset {
    width: 100%;
  }
}

._selectLayout_16iy6_18 {
  display: flex;
  flex-direction: column;
  gap: var(--SPACE-BLOCK-SPACING-24);

  @media (width > 768px) {
    flex-direction: row;
    gap: var(--SPACE-BLOCK-SPACING-48);
  }
}

._selectBox_16iy6_29,
._selectDialog_16iy6_30 {
  display: flex;
  flex-direction: column;
  gap: var(--SPACE-BLOCK-SPACING-16);
}

._selectBoxTitle_16iy6_36,
._selectDialogTitle_16iy6_37 {
  font-size: var(--FONT-SIZE-XS);
  font-weight: var(--FONT-WEIGHT-BOLD);

  @media (width > 768px) {
    font-size: var(--FONT-SIZE-BASE);
  }
}

._selectDialogButton_16iy6_46 {
  border: 1px solid var(--COLOR-GRAY-400);
  background-color: var(--BG-WHITE);
  display: inline-flex;
  font-size: var(--FONT-SIZE-XS);
  line-height: 1.5;
  position: relative;
  padding: var(--SPACE-BLOCK-SPACING-8) var(--SPACE-BLOCK-SPACING-40)
    var(--SPACE-BLOCK-SPACING-8) var(--SPACE-BLOCK-SPACING-16);

  /* icon */
  &::before {
    background-color: currentColor;
    content: '';
    width: 16px;
    height: 16px;
    mask-image: url('/assets/images/common/icon-menu.svg');
    mask-repeat: no-repeat;
    mask-size: contain;
    pointer-events: none;
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
  }

  @media (768px < width) {
    font-size: var(--FONT-SIZE-BASE);
    min-width: 240px;
  }

  &:has(input:focus-visible) {
    outline: solid;
  }
}
._CaseStudyFormFilterTab_1ialc_1 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  height: 100%;
  border: 1px solid var(--BORDER-DEFAULT);
  border-left: 0;
}

._list_1ialc_9 {
  overflow: auto;
}

._listItem_1ialc_13 {
  &:not(:last-child) {
    border-bottom: 1px solid var(--BORDER-DEFAULT);
  }
}

._button_1ialc_19 {
  display: block;
  padding: var(--SPACE-BLOCK-SPACING-8) var(--SPACE-BLOCK-SPACING-32)
    var(--SPACE-BLOCK-SPACING-8) var(--SPACE-BLOCK-SPACING-8);
  font-size: var(--FONT-SIZE-XS);
  border: 0;
  width: 100%;
  position: relative;
  transition: opacity var(--TRANSITION);

  @media (width > 768px) {
    padding: var(--SPACE-BLOCK-SPACING-24) var(--SPACE-BLOCK-SPACING-56)
      var(--SPACE-BLOCK-SPACING-24) var(--SPACE-BLOCK-SPACING-16);
    font-size: var(--FONT-SIZE-BASE);
  }

  &::after {
    content: '';
    background-image: url('/assets/images/common/icon-arrow-right-bold.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    aspect-ratio: 1 / 1;
    width: 16px;
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);

    @media (width > 768px) {
      width: 24px;
      right: 16px;
    }
  }

  &:focus-visible:not([aria-selected='true']) {
    opacity: var(--OPACITY-HOVER);
  }

  @media (any-hover: hover) {
    &:hover:not([aria-selected='true']) {
      opacity: var(--OPACITY-HOVER);
    }
  }

  &[aria-selected='true'] {
    font-weight: var(--FONT-WEIGHT-BOLD);
    background-color: var(--BG-BLACK);
    color: var(--TEXT-WHITE);
  }
}

._content_1ialc_71 {
  background-color: var(--BG-GRAY);
  border-left: 1px solid var(--BORDER-DEFAULT);
  padding: 0 var(--SPACE-BLOCK-SPACING-8);
  overflow: auto;

  @media (width > 768px) {
    padding: var(--SPACE-BLOCK-SPACING-8) var(--SPACE-BLOCK-SPACING-24);
  }
}

._item_1ialc_82 {
  height: 100%;

  > :is(:first-child) {
    margin-top: 0;
  }

  > :is(:last-child) {
    margin-bottom: 0;
  }
}

/* .radioList {
} */

._radioItem_1ialc_97 {
  border-bottom: 1px solid var(--BORDER-DEFAULT);
}

._radio_1ialc_94 {
  display: block;
  padding: var(--SPACE-BLOCK-SPACING-16) var(--SPACE-BLOCK-SPACING-8);
  font-size: var(--FONT-SIZE-XS);
  transition: opacity var(--TRANSITION);

  @media (width > 768px) {
    font-size: var(--FONT-SIZE-BASE);
  }

  @media (any-hover: hover) {
    &:hover {
      opacity: var(--OPACITY-HOVER);
    }
  }

  &:has(input:focus-visible) {
    outline: solid;
  }

  > input {
    appearance: none;
    height: 1px;
    left: 10px;
    opacity: 0;
    position: absolute;
    top: 10px;
    width: 1px;
  }
}
._resultCount_18szy_1 {
  display: flex;
  align-items: baseline;
  margin-bottom: var(--SPACE-BLOCK-SPACING-24);
  font-size: var(--FONT-SIZE-XS);
  font-weight: var(--FONT-WEIGHT-BOLD);
  line-height: 1.5;

  @media (width > 768px) {
    margin-bottom: var(--SPACE-BLOCK-SPACING-40);
    font-size: var(--FONT-SIZE-BASE);
  }
}

._resultCountNumber_18szy_15 {
  margin-left: var(--SPACE-BLOCK-SPACING-8);
  margin-right: var(--SPACE-BLOCK-SPACING-4);
  font-size: var(--FONT-SIZE-3XL);

  @media (width > 768px) {
    font-size: var(--FONT-SIZE-4XL);
  }
}

._listItem_18szy_25 {
  display: flex;
  flex-direction: column-reverse;
  position: relative;

  &:not(:first-child) {
    border-top: 1px solid var(--COLOR-GRAY-300);
    margin-top: var(--SPACE-BLOCK-SPACING-56);
    padding-top: var(--SPACE-BLOCK-SPACING-56);
  }
}

._spCarouselWrap_18szy_37 {
  --local-button-size: 46px;
  --local-pagination-button-size: 22px;

  display: block;
  container-type: inline-size;
  position: relative;

  @media (width >= 1024px) {
    display: none;
  }
}

._pcCarouselWrap_18szy_50 {
  display: none;
  container-type: inline-size;
  position: relative;

  @media (width >= 1024px) {
    display: block;
  }
}

._detailText_18szy_60 {
  margin-top: var(--SPACE-BLOCK-SPACING-16);

  @media (width >= 1024px) {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  ._title_18szy_69 {
    font-size: var(--FONT-SIZE-L);
    font-weight: var(--FONT-WEIGHT-BOLD);

    @media (width >= 1024px) {
      font-size: var(--FONT-SIZE-XL);
    }
  }

  ._name_18szy_78 {
    font-size: var(--FONT-SIZE-XS);
    font-weight: var(--FONT-WEIGHT-NORMAL);
    margin-top: var(--SPACE-BLOCK-SPACING-4);

    @media (width >= 1024px) {
      font-size: var(--FONT-SIZE-BASE);
    }
  }

  ._tagList_18szy_88 {
    margin-top: var(--SPACE-BLOCK-SPACING-8);

    @media (width >= 1024px) {
      margin-top: var(--SPACE-BLOCK-SPACING-16);
    }
  }

  ._button_18szy_96 {
    margin-top: var(--SPACE-BLOCK-SPACING-24);
    text-align: center;

    @media (width >= 1024px) {
      flex-shrink: 0;
      margin-top: 0;
      margin-left: var(--SPACE-BLOCK-SPACING-48);
    }

    a {
      min-inline-size: 200px;
      padding: 11px var(--SPACE-BLOCK-SPACING-16) 11px
        var(--SPACE-BLOCK-SPACING-8);
      font-size: var(--FONT-SIZE-XS);

      @media (width >= 1024px) {
        min-inline-size: 224px;
      }
    }
  }
}
._CasestudyPcCarousel_1tw18_1 {
  display: none;
  container-type: inline-size;
  position: relative;

  @media (width >= 1024px) {
    display: block;
  }

  /* 次へ・前へボタンのサイズ */
  --local-button-size: 46px;
  --local-pagination-button-size: 22px;
  --carousel-gap: 16px;
  --slide-unit: calc((100cqi - var(--carousel-gap) * 3) / 5);
  --slide-height: calc(
    var(--slide-unit) *
    2 / 3
  ); /* 非 Current の高さ。調整可 */
  --push: var(--slide-unit);

  width: 100%;
  margin: 0 !important;

  &._swiper_1tw18_24 {
    overflow: hidden;
  }

  ._swiperWrapper_1tw18_28 {
    display: flex;
    align-items: flex-end;
    height: calc(var(--slide-height) * 2);
  }

  ._swiperSlide_1tw18_34 {
    display: flex;
    align-items: flex-end;
    width: var(--slide-unit) !important;
    height: calc(var(--slide-height) * 2);
    overflow: visible;
    flex-shrink: 0;
  }

  ._swiperSlideInner_1tw18_43 {
    width: var(--slide-unit) !important;
    height: var(--slide-height);
    flex: 0 0 auto;
    background-color: var(--BG-GRAY);
  }

  .swiper-pagination-bullet::before {
    transition: none;
  }

  &.is-carousel-ready {
    ._swiperSlide_1tw18_34 {
      transition: transform var(--TRANSITION);
    }

    ._swiperSlideInner_1tw18_43 {
      transition:
        width var(--TRANSITION),
        height var(--TRANSITION);
    }

    .swiper-pagination-bullet {
      &::before {
        transition:
          width var(--TRANSITION),
          height var(--TRANSITION);
      }
    }
  }

  ._swiperSlideInner_1tw18_43 img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  ._swiperSlide_1tw18_34.swiper-slide-active ._swiperSlideInner_1tw18_43 {
    width: calc(var(--slide-unit) * 2) !important; /* 2/5 */
    height: calc(var(--slide-height) * 2);
  }

  ._swiperSlide_1tw18_34.swiper-slide-active ~ ._swiperSlide_1tw18_34 {
    transform: translateX(var(--push));
  }

  ._controlWrap_1tw18_90 {
    display: flex;
    position: absolute;
    top: 25%;
    right: 0;
    z-index: 20;
    transform: translateY(-50%);

    ._pagination_1tw18_98 {
      display: flex;
      align-items: center;
      margin-right: var(--SPACE-BLOCK-SPACING-48);
    }

    ._arrow_1tw18_104 {
      --local-arrow-icon-size: 20px;
      background-color: var(--BG-WHITE);
      border: 1px solid var(--BORDER-BLACK);
      border-radius: 50%;
      cursor: pointer;
      display: block;
      height: var(--local-button-size);
      overflow: hidden;
      padding: var(--local-button-size) 0 0 var(--local-button-size);
      position: relative;
      z-index: var(--Z-INDEX-DEFAULT);
      width: var(--local-button-size);
      transition: background-color var(--TRANSITION);

      + ._arrow_1tw18_104 {
        margin-left: var(--SPACE-BLOCK-SPACING-16);
      }

      &:hover {
        background-color: var(--BG-BLACK);

        &::before {
          background-color: var(--BG-WHITE);
        }
      }

      &::before {
        content: '';
        display: block;
        height: var(--local-arrow-icon-size);
        left: 50%;
        background-color: var(--BG-BLACK);
        mask-repeat: no-repeat;
        mask-size: cover;
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%);
        width: var(--local-arrow-icon-size);
        transition: background-color var(--TRANSITION);
      }

      &._leftArrow_1tw18_146::before {
        mask-image: url('/assets/images/common/icon-carousel-prev.svg');
      }

      &._rightArrow_1tw18_150::before {
        mask-image: url('/assets/images/common/icon-carousel-next.svg');
      }
    }
  }

  ._swiperSlide_1tw18_34 ._swiperSlideInner_1tw18_43 * {
    margin-top: 0;
  }

  ._swiperSlide_1tw18_34._swiper-slide-active_1tw18_81 img {
    width: 100%;
    height: 100%;
  }

  &[data-carousel-mode='static'] {
    ._swiperSlide_1tw18_34,
    ._swiperSlideInner_1tw18_43 {
      width: calc(var(--slide-unit) * 2) !important; /* 2/5 */
      height: calc(var(--slide-height) * 2);
    }

    ._controlWrap_1tw18_90 {
      display: none;
    }
  }
}
._spCarouselImgWrap_lsy6z_1 {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  width: 100%;
  background-color: var(--BG-GRAY);

  :where(img) {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

._CasestudySpCarousel_lsy6z_15 {
  --local-button-size: 46px;
  --local-pagination-button-size: 22px;

  display: block;
  container-type: inline-size;
  position: relative;

  @media (width >= 1024px) {
    display: none;
  }

  ._thumbnailCarouselWrap_lsy6z_27 {
    display: flex;
    justify-content: space-between;
    margin-top: var(--SPACE-BLOCK-SPACING-16);
  }

  ._thumbnailCarouselWrap_lsy6z_27[data-single-slide] {
    display: none;

    ._controls_lsy6z_36 {
      display: none;
    }
  }

  ._thumbnailCarousel_lsy6z_27 {
    --control-width: 112px;
    --gap: var(--SPACE-BLOCK-SPACING-2);

    display: flex;
    align-items: center;
    overflow: visible;
    width: calc(100% - var(--control-width) - 25px);
    margin-left: 0;
    margin-right: 0;

    ._thumbnailItem_lsy6z_52 {
      display: flex;
      align-items: center;
      width: calc((100% - var(--gap) * 4) / 4);
    }

    ._thumbnailItem_lsy6z_52[data-active] {
      opacity: 0.4;
    }

    ._thumbnailButton_lsy6z_62 {
      display: block;
      width: 100%;
      aspect-ratio: 3 / 2;
      overflow: hidden;
      padding: 0;
      border: none;
      background-color: var(--BG-GRAY);

      img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }

  ._thumbnailList_lsy6z_80 {
    display: flex;
    flex-wrap: wrap;
    gap: var(--SPACE-BLOCK-SPACING-2);
    height: auto;
  }

  ._controls_lsy6z_36 {
    display: flex;
    align-items: center;
    gap: var(--SPACE-BLOCK-SPACING-16);

    ._arrow_lsy6z_92 {
      --local-arrow-icon-size: 20px;

      background-color: var(--BG-WHITE);
      border: 1px solid var(--BORDER-BLACK);
      border-radius: 50%;
      cursor: pointer;
      display: block;
      height: var(--local-button-size);
      overflow: hidden;
      padding: var(--local-button-size) 0 0 var(--local-button-size);
      position: relative;
      z-index: var(--Z-INDEX-DEFAULT);
      width: var(--local-button-size);
      transition: background-color var(--TRANSITION);

      &:hover {
        background-color: var(--BG-BLACK);

        &::before {
          background-color: var(--BG-WHITE);
        }
      }

      &::before {
        content: '';
        display: block;
        height: var(--local-arrow-icon-size);
        left: 50%;
        background-color: var(--BG-BLACK);
        mask-repeat: no-repeat;
        mask-size: cover;
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%);
        width: var(--local-arrow-icon-size);
        transition: background-color var(--TRANSITION);
      }

      &._leftArrow_lsy6z_131::before {
        mask-image: url('/assets/images/common/icon-carousel-prev.svg');
      }

      &._rightArrow_lsy6z_135::before {
        mask-image: url('/assets/images/common/icon-carousel-next.svg');
      }
    }
  }
}