.Archive {
  color: #fff;
  overflow: hidden;
}
.Archive-inner {
  max-width: 77.5rem /* 1240px (基準16px) */;
  margin: 0 auto;
  padding: 0 1.25rem /* 20px (基準16px) */;
}
.Archive-title h1 > span {
  text-align: center;
  display: block;
  color: #fff;
  font-weight: 400;
  font-family: 'Montserrat', sans-serif;
  line-height: 1;
}
.Archive-title h1 > span:nth-child(1) {
  font-size: clamp(
    1.75rem /* 28px (基準16px) */,
    -0.536rem + 4.762vw /* 768px-1440px間で1.750rem-3.750remの線形補間 */,
    3.75rem /* 60px (基準16px) */
  );
  vertical-align: top;
  line-height: 0.8;
}
.Archive-title h1 > span:nth-child(2) {
  font-size: clamp(
    3.75rem /* 60px (基準16px) */,
    0.893rem + 5.952vw /* 768px-1440px間で3.750rem-6.250remの線形補間 */,
    6.25rem /* 100px (基準16px) */
  );
  margin-top: 1.875rem /* 30px (基準16px) */;
  line-height: 0.8;
}
.s .Archive-title h1 > span:nth-child(2) {
  margin-top: 1rem /* 16px (基準16px) */ /* 20px (基準16px) */;
}
.Archive-title h1 > span:nth-child(3) {
  font-weight: 600;
  font-size: clamp(
    1.125rem /* 18px (基準16px) */,
    0.624rem + 1.043vw /* 768px-1440px間で1.125rem-1.563remの線形補間 */,
    1.563rem /* 25px (基準16px) */
  );
  margin-top: 1.5rem /* 24px (基準16px) */;
}
.Archive-title h1 > span:nth-child(3) {
  margin-top: 1.25rem /* 20px (基準16px) */;
}

.Archive-title > p {
  font-size: clamp(
    0.875rem /* 14px (基準16px) */,
    0.446rem + 0.893vw /* 768px-1440px間で0.875rem-1.250remの線形補間 */,
    1.25rem /* 20px (基準16px) */
  );
  text-align: center;
  margin-top: 1.75rem /* 28px (基準16px) */;
}

.Archive-content {
  margin-top: clamp(
    2.5rem /* 40px (基準16px) */,
    -1.786rem + 8.929vw /* 768px-1440px間で2.500rem-6.250remの線形補間 */,
    6.25rem /* 100px (基準16px) */
  );
  padding-bottom: clamp(
    5rem /* 80px (基準16px) */,
    3.571rem + 2.976vw /* 768px-1440px間で5.000rem-6.250remの線形補間 */,
    6.25rem /* 100px (基準16px) */
  );
}
.Archive-content h2 {
  font-size: clamp(
    1.125rem /* 18px (基準16px) */,
    0.624rem + 1.043vw /* 768px-1440px間で1.125rem-1.563remの線形補間 */,
    1.563rem /* 25px (基準16px) */
  );
  font-weight: 600;
}
.Archive-categoryList {
  margin-top: 1.5rem /* 24px (基準16px) */;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  column-gap: 0.625rem /* 10px (基準16px) */;
  overflow: scroll;
  padding-left: max(calc((100% - 1200px) / 2), 1.25rem) /* 20px (基準16px) */;
  padding-top: 0.25rem /* outline表示用 4px (基準16px) */;
  padding-bottom: 1.25rem /* 20px (基準16px) */;
}
.s .Archive-categoryList {
  margin-top: 1rem /* 16px (基準16px) */;
}

.Archive-categoryList li a,
.Archive-categoryList li span {
  display: block;
  text-align: center;
  width: max-content;
  min-width: clamp(
    7.938rem /* 127px (基準16px) */,
    4.296rem + 7.588vw /* 768px-1440px間で7.938rem-11.125remの線形補間 */,
    11.125rem /* 178px (基準16px) */
  );
  padding-block: 1.438rem /* 23px (基準16px) */;
  background-color: rgb(255, 255, 255, 0.3);
  font-weight: 700;
  font-size: clamp(
    1rem /* 16px (基準16px) */,
    0.714rem + 0.595vw /* 768px-1440px間で1.000rem-1.250remの線形補間 */,
    1.25rem /* 20px (基準16px) */
  );
  color: #fff;
  transition: filter 0.2s ease;
}
.s .Archive-categoryList li a,
.s .Archive-categoryList li span {
  padding-block: 0.875rem /* 14px (基準16px) */;
}

.Archive-categoryList li a:hover {
  opacity: 1;
  cursor: pointer;
  filter: contrast(0.8);
}
.Archive-categoryList li a:active {
  filter: contrast(0.5);
}

.Archive-categoryList li span {
  background-color: #fff;
  color: #003c8f;
}

.Archive-caseList {
  margin-top: 1.25rem /* 20px (基準16px) */;
  margin-inline: auto;
  max-width: 76.25rem /* 1220px (基準16px) */;
  display: grid;
  align-items: stretch;
  justify-content: center;
  grid-template-columns: repeat(
    auto-fit,
    clamp(
      20.938rem /* 335px (基準16px) */,
      17.724rem + 6.695vw /* 768px-1440px間で20.938rem-23.750remの線形補間 */,
      23.75rem /* 380px (基準16px) */
    )
  );
  gap: clamp(
    1.25rem /* 20px (基準16px) */,
    -0.179rem + 2.976vw /* 768px-1440px間で1.250rem-2.500remの線形補間 */,
    2.5rem /* 40px (基準16px) */
  );
  padding-bottom: 2.5rem /* 40px (基準16px) */;
}
.s .Archive-caseList {
  margin-top: 2rem /* 32px (基準16px) */;
  padding-bottom: 1.75rem /* 28px (基準16px) */;
  grid-template-columns: repeat(
    auto-fit,
    min(10rem /* 160px (基準16px) */, 42.667vw /* 160px (基準375px) */)
  );
}

.Archive-caseList li {
  transition: transform 0.2s ease;
  flex: 0 0
    clamp(
      15.188rem /* 243px (基準16px) */,
      7.831rem + 15.326vw /* 768px-1440px間で15.188rem-21.625remの線形補間 */,
      21.625rem /* 346px (基準16px) */
    );
  height: 100%;
}
.Archive-caseList li a {
  display: block;
  height: 100%;
}
.Archive-caseList li a:hover {
  cursor: pointer;
  opacity: 1;
  transform: translateY(-5px);
}
.Archive-caseList li a:active {
  transform: translateY(0);
}
.Archive-caseList li > div {
  box-shadow: none;
}

.Archive-caseList li a .CardCommon {
  height: 100%;
}

.Archive-pagination {
  margin-top: 5rem /* 80px (基準16px) */;
  margin-inline: auto;
}
.s .Archive-pagination {
  margin-top: 2.5rem /* 40px (基準16px) */;
}
.Archive-tagList {
  margin: 0 auto;
  margin-top: 1.5rem /* 24px (基準16px) */;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  column-gap: 0.625rem /* 10px (基準16px) */;
  overflow: auto;
  padding-top: 0.25rem /* outline表示用 4px (基準16px) */;
  padding-bottom: 1.25rem /* 20px (基準16px) */;
  width: min(75rem /* 1200px (基準16px) */, 83.333vw /* 1200px (基準1440px) */);
}
.s .Archive-tagList {
  margin-top: 1rem /* 16px (基準16px) */;
  flex-wrap: wrap;
  row-gap: 0.625rem /* 10px (基準16px) */;
}

.Archive-tagList li {
  flex-shrink: 0;
}

.Archive-noContent {
  text-align: center;
  color: #fff;
  font-size: 1.125rem /* 18px (基準16px) */;
}

.s .Archive-noContent {
  font-size: 1rem /* 16px (基準16px) */;
}