@charset "utf-8";

.swiper-pagination-bullets.swiper-pagination-horizontal { bottom: -30px;}
.swiper-content1 { max-width: 1100px; margin: auto;}
.swiper-content1 .swiper-button-next, .swiper-content1 .swiper-button-prev { color: #fff; text-shadow: 1px 1px 5px black;}
.swiper-content-item { position: relative;}
.swiper-content-item .swiper-pagination-bullet { background-color: #ddd;}
.swiper-content-item .swiper-pagination-bullet-active { background-color: #fff;}
.swiperModalButton .item {
  background-color: #fff;
  color: #000;
  padding: 10px;
  position: relative;
  display: flex;
  flex-direction: column;
}
.swiperModalButton .item-logo img,
.modal_inner .item-logo img { width: 100%; height: auto;}
.swiperModalButton .item-img img {
  height: 200px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}
.modal_inner .item-img img {
  height: 300px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}
.swiperModalButton .item-img { text-align: center;}
.swiperModalButton .item-name {
  margin-top: 5px;
  font-size: 16px;
  height: 100%;
  display: flex;
  align-items: center;
}
.swiperModalButton .item-logo {
  width: 80px;
  position: absolute;
  top: 4px; right: 2px;
  background-color: #fff;
  padding: 4px 4px 2px;
  border-radius: 0 0 0 42px/ 0 0 0 28px;
}
.modal_inner, .modal_inner a { color: #000;}
.modal_inner { position: relative;}
.modal_inner .item-name { font-size: 120%; margin-bottom: 5px;}
.modal_inner .item-img { margin: 20px 0; text-align: center;}
.modal_inner .item-content p { margin-top: 1em;}
.modal_inner .item-link { width: 500px; word-wrap: break-word;}
.modal_inner .item-logo { width: 120px; position: absolute; bottom: 0; right: 0;}

/* ---------------------------- */
/* --- Base --- */
/* ---------------------------- */
.swiperModalButton {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    /* justify-content: space-around; */
    max-width: 930px;
    margin: 20px auto 0;
}

/* モーダル */
.modalOpen { cursor: pointer; width: calc((100% - 40px) / 3); box-sizing: border-box;}
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  padding: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s;
  pointer-events: none;
  opacity: 0;
  z-index: 100;
  background-color: rgba(255, 255, 255, 0.9);
}

/* モーダルがactiveの時 */
.modal.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* モーダル背景のオーバーレイ部分 */
.modal__overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

/* モーダルのコンテンツ */
.modal__content {
    position: relative;
    width: 100%;
    max-width: 800px;
    padding: 20px;
}
.modal_inner {
    filter: drop-shadow(0px 0px 4px #ddd);
    background: #FFF;
    width: 90%;
    margin: 0 auto;
    border-radius: 2px;
    padding: 20px 25px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

/* 閉じるボタン */
.modal__close-btn {
    position: absolute;
    right: 0;
    top: -40px;
    width: 40px;
    height: 40px;
    cursor: pointer;
    z-index: 20;
}
.modal__close-btn:hover {
    opacity: 0.8;
}

/* 閉じるボタンのX */
.lineClose {
    display: inline-block;
    vertical-align: middle;
    color: #313131;
    line-height: 1;
    width: 2rem;
    height: 0.1rem;
    background: currentColor;
    border-radius: 0.1rem;
    position: relative;
    transform: rotate(45deg);
}
.lineClose::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: inherit;
  border-radius: inherit;
  transform: rotate(90deg);
}
p.swiperText {
    margin: 0;
    text-align: center;
	color: #000;
}


@media (max-width: 1120px) {
  .sec-products { padding-left: 2%; padding-right: 2%;}
  .swiper-content1 { width: 100%;}
}
@media (max-width: 767px) {
  .modalOpen { cursor: pointer; width: calc((100% - 2vw) / 2);}
  .swiperModalButton { gap: 2vw;}
  .swiperModalButton .item-img img { height: 120px;}
  .swiperModalButton .item-logo { width: 60px; border-radius: 0 0 0 30px/ 0 0 0 20px;}
  .modal__content { padding: 0;}
  .modal_inner { padding: 20px 15px;}
  .modal_inner .item-link { padding: 0;}
  .modal_inner .item-img img { height: 200px;}
  .modal_inner .item-link { width: 100%;}
  .modal_inner .item-logo { position: static; margin: 40px auto 0;}
  .modal .swiper-button-next { right: -15px;}
  .modal .swiper-button-prev { left: -15px;}
}