@charset "UTF-8";
/*
	以下case-archive.phpの説明と同じ

	基本的に一覧部分はL001ベースのデザイン
	クラス名もL001に寄せる
	共通利用となっているのでL001ディレクトリにてcase.cssとして出力させて、他LPではL001を直接参照させる
	読み込みは基本のstyle.cssと別でcase.css単体を追加で読み込む
	LP毎のresetや汎用クラスの違いを考慮してなるべく単独でスタイリングできるようにする
	デザインの分岐が発生したら各LP内にアーカイブ用スタイルを作ることを検討する
*/
/*color*/
/*mediaquery*/
/* フォント */
/* jp 300 400 500 700 */
/* noto 500 700 */
/* price 500 700 */
/* ホバー */
/*
function
*/
@font-face {
  font-family: 'Noto Sans JP';
  font-weight: 400;
  font-display: swap;
  src: url(../font/Noto_Sans_JP/static/NotoSansJP-Regular.ttf) format("truetype");
}

@font-face {
  font-family: 'Noto Sans JP';
  font-weight: 500;
  font-display: swap;
  src: url(../font/Noto_Sans_JP/static/NotoSansJP-Medium.ttf) format("truetype");
}

@font-face {
  font-family: 'Noto Sans JP';
  font-weight: 700;
  font-display: swap;
  src: url(../font/Noto_Sans_JP/static/NotoSansJP-Bold.ttf) format("truetype");
}

@font-face {
  font-family: 'Noto Sans JP';
  font-weight: 900;
  font-display: swap;
  src: url(../font/Noto_Sans_JP/static/NotoSansJP-Black.ttf) format("truetype");
}

.case_archive {
  padding: 80px 0 140px;
  background-color: #dceff9;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
}

.case_archive .case_heading {
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto -75px;
  text-align: center;
  position: relative;
}

.case_archive .case_heading_img {
  max-width: 1100px;
  margin: 0 auto;
}

.case_archive .case_heading_lion {
  width: 18.7%;
  position: absolute;
  top: 0;
  right: 0;
}

.case_archive_list {
  width: 95%;
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 40px 3%;
  position: relative;
  z-index: 2;
}

.case_archive_list .swiper-slide {
  background-color: #fff;
  border: #FFD820 3px solid;
  border-radius: 10px;
  padding: 24px 17px 17px;
}

.case_archive_list .swiper-slide .case_img {
  display: flex;
  align-items: center;
  justify-content: space-between;
  -moz-column-gap: 10px;
       column-gap: 10px;
  margin-bottom: 10px;
}

.case_archive_list .swiper-slide .case_img .case_img_before,
.case_archive_list .swiper-slide .case_img .case_img_after {
  flex-grow: 1;
  width: 50%;
  position: relative;
}

.case_archive_list .swiper-slide .case_img .case_img_before img,
.case_archive_list .swiper-slide .case_img .case_img_after img {
  aspect-ratio: 115/164;
  -o-object-fit: cover;
     object-fit: cover;
}

.case_archive_list .swiper-slide .case_img .case_img_before .case_img_label,
.case_archive_list .swiper-slide .case_img .case_img_after .case_img_label {
  font-size: 15px;
  font-family: "neue-haas-grotesk-text", sans-serif;
  font-style: normal;
  font-weight: bold;
  color: #fff;
  text-align: center;
  width: 100px;
  padding-top: 2px;
  border-radius: 10em;
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
}

.case_archive_list .swiper-slide .case_img .case_img_before .case_img_label {
  background-color: #021F6B;
}

.case_archive_list .swiper-slide .case_img .case_img_after .case_img_label {
  background-color: #CE0F0F;
}

.case_archive_list .swiper-slide .case_img .triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent #CE0F0F;
}

.case_archive_list .swiper-slide .case_txt_date {
  display: inline-block;
  margin-bottom: .5em;
  padding: 2px 12px;
  background: #021F6B;
  color: #fff;
  font-size: 14px;
}

.case_archive_list .swiper-slide .case_txt_head {
  font-size: 16px;
  font-weight: bold;
  line-height: 1.5;
  color: #021F6B;
  margin-bottom: 10px;
}

.case_archive_list .swiper-slide .case_txt_body {
  font-size: 14px;
  line-height: 1.5;
}

.case_archive_pagination {
  width: 95%;
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 70px;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 20px;
  color: #222;
  line-height: 1.5;
}

.case_archive_pagination a:hover {
  transform: none;
}

.case_archive_pagination .page-numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 15px;
}

.case_archive_pagination .pages {
  order: 99;
  width: 100%;
  font-size: 14px;
  text-align: center;
}

.case_archive_pagination .page,
.case_archive_pagination .current {
  width: 2.5em;
  aspect-ratio: 1/1;
}

.case_archive_pagination .previouspostslink,
.case_archive_pagination .nextpostslink,
.case_archive_pagination .first,
.case_archive_pagination .last,
.case_archive_pagination .current,
.case_archive_pagination .page {
  padding: 10px;
  background: #fff;
  border-radius: 5px;
  color: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
}

.case_archive_pagination .current {
  background: #075AA5;
  color: #fff;
}

.L003 .case_archive,
.L004 .case_archive {
  padding-top: 140px;
}

@media (max-width: 750px) {
  .case_archive {
    padding: 8vw 0 18.66667vw;
  }
  .case_archive .case_heading {
    margin-bottom: -4.53333vw;
  }
  .case_archive_list {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.66667vw;
  }
  .case_archive_list .swiper-slide {
    padding: 3.46667vw 2.13333vw;
  }
  .case_archive_list .swiper-slide .case_img {
    margin-bottom: 0.8vw;
    -moz-column-gap: 0.8vw;
         column-gap: 0.8vw;
  }
  .case_archive_list .swiper-slide .case_img .case_img_before .case_img_label,
  .case_archive_list .swiper-slide .case_img .case_img_after .case_img_label {
    width: 90%;
    font-size: 2.13333vw;
    top: 0;
    translate: 0 -50%;
  }
  .case_archive_list .swiper-slide .case_img .triangle {
    border-width: 10px 0 10px 10px;
  }
  .case_archive_list .swiper-slide .case_txt_date {
    margin-bottom: 0.8vw;
    font-size: 2.93333vw;
  }
  .case_archive_list .swiper-slide .case_txt_head {
    font-size: 2.93333vw;
    margin-bottom: 0.8vw;
  }
  .case_archive_list .swiper-slide .case_txt_body {
    font-size: 3.2vw;
  }
  .case_archive_pagination {
    margin-top: 8vw;
    font-size: 13px;
  }
  .case_archive_pagination .page,
  .case_archive_pagination .current {
    display: none;
  }
  .L003 .case_archive,
  .L004 .case_archive {
    padding-top: 32vw;
  }
}

/*# sourceMappingURL=maps/case.css.map */