@charset "UTF-8";

/*-------------------------------------------
一覧ページ（サービス・事例・ニュース・チーム）
  ページ導入 → 一覧本体（小画像付きリスト or カードグリッド）→ 共通CTA
  SP は 767px 以下、768px 以上は PC 値
-------------------------------------------*/
.p-archive {
  --archive-line: #d5dfdf;
  --archive-bg-pale: #f7fafc;
  --archive-current: #2188c9;

  /* フォントサイズ（Figma「DesignSystem」の Fontsize/var1・var2。両者で同じ値のものは共用） */
  --fs-l: 32px;
  --fs-m1: 22px;
  --fs-body: 14px;
  --fs-min: 12px;

  font-family: var(--font-base);
  color: var(--color-text-sub);
}

@media (min-width: 768px) {
  .p-archive {
    --fs-l: 48px;
    --fs-m1: 28px;
    --fs-body: 16px;
    --fs-min: 14px;
  }
}

/* style.css の h2（TOPページ用の見出し）を打ち消す */
.p-archive h2 {
  padding: 0;
  text-align: left;
}

/* 一覧の下から CTA までの余白（共通CTAの margin-top を上書き） */
.p-archive + .p-cta {
  margin-top: 40px;
}

@media (min-width: 768px) {
  .p-archive + .p-cta {
    margin-top: 80px;
  }
}

.p-archive__empty {
  font-size: var(--fs-body);
}

/*-------------------------------------------
ページ導入（パンくず＋タイトル＋導入文）
-------------------------------------------*/
.p-archive__intro {
  padding-top: 8px;
  padding-bottom: 48px;
}

.c-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  font-size: var(--fs-min);
  line-height: normal;
}

.c-breadcrumb__item {
  display: inline-flex;
  align-items: center;
}

.c-breadcrumb__item + .c-breadcrumb__item::before {
  content: "";
  width: 6px;
  height: 6px;
  margin: 0 10px 0 0;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
}

.c-breadcrumb a {
  color: inherit;
}

@media (hover: hover) {
  .c-breadcrumb a:hover {
    color: var(--color-primary);
    text-decoration: underline;
  }
}

.p-archive__head {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-top: 56px;
}

.p-archive__title {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.p-archive__title-ja {
  font-size: var(--fs-l);
  font-weight: 700;
  line-height: normal;
}

.p-archive__title-en {
  color: var(--color-primary);
  font-size: var(--fs-min);
  line-height: 1.2;
}

.p-archive__lead {
  font-size: var(--fs-body);
  line-height: 24px;
}

/*-------------------------------------------
小画像付きリスト（サービス一覧・チーム一覧）
-------------------------------------------*/
.c-thumb-list__item {
  border-bottom: 1px solid var(--archive-line);
}

.c-thumb-list__item:first-child {
  border-top: 1px solid var(--archive-line);
}

.c-thumb-list__link {
  display: flex;
  align-items: center;
  gap: 32px;
  min-height: 107px;
  color: inherit;
  text-decoration: none;
  transition: background-color 0.2s;
}

.c-thumb-list__link:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.c-thumb-list__thumb {
  flex: none;
  width: 67px;
  height: 67px;
  overflow: hidden;
  border-radius: 50%;
}

.c-thumb-list__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 白地のロゴ画像は円に枠線を付ける */
.c-thumb-list__thumb.is-logo {
  border: 1px solid var(--color-border);
}

/* 画像ごとの収め方（サービス一覧）
   写真の一部をカンプに合わせて拡大する。幅 = 元画像幅 / 切り出す正方形の一辺、
   margin = 切り出し位置 / 一辺（margin の % は円の幅基準） */
.c-thumb-list__thumb--system-development .c-thumb-list__img,
.c-thumb-list__thumb--nearshore-development .c-thumb-list__img {
  max-width: none;
  height: auto;
}

/* モニター・ノートPC・キーボード */
.c-thumb-list__thumb--system-development .c-thumb-list__img {
  width: 275%;
  margin: -35% 0 0 -83%;
}

/* 新潟のピン周辺 */
.c-thumb-list__thumb--nearshore-development .c-thumb-list__img {
  width: 215%;
  margin: -41% 0 0 -76%;
}

/* 画像ごとの収め方（チーム一覧） */
/* ロゴ単体の画像：切り抜かずに余白を取って中央に置く */
.c-thumb-list__thumb--contain .c-thumb-list__img {
  padding: 0 10px;
  object-fit: contain;
}

/* 地図ピン：右寄りにあるピンを円の中央に寄せる */
.c-thumb-list__thumb--access .c-thumb-list__img {
  object-position: 88% center;
}

.c-thumb-list__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 24px 0;
}

.c-thumb-list__title {
  font-size: var(--fs-m1);
  font-weight: 700;
  line-height: normal;
}

.c-thumb-list__text {
  font-size: var(--fs-min);
  line-height: normal;
}

.c-thumb-list__icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--color-primary);
}

.c-thumb-list__icon .c-icon--arrow-right {
  font-size: 13px;
  transition: transform 0.2s;
}

.c-thumb-list__icon .c-icon--external {
  font-size: 16px;
}

/* ホバー：Figma 未指定のため暫定 */
@media (hover: hover) {
  .c-thumb-list__link:hover {
    background-color: var(--archive-bg-pale);
  }

  .c-thumb-list__link:hover .c-icon--arrow-right {
    transform: translateX(4px);
  }
}

/*-------------------------------------------
カテゴリタブ（ニュース一覧のみ）
-------------------------------------------*/
.p-archive__tabs {
  padding-inline: 16px;
}

@media (min-width: 768px) {
  .p-archive__tabs {
    padding-inline: var(--gutter);
  }
}

.c-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding-bottom: 40px;
}

.c-tabs__link {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  padding: 8px 16px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background-color: var(--color-white);
  color: var(--color-primary);
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 24px;
  text-decoration: none;
  transition: background-color 0.2s, border-color 0.2s;
}

.c-tabs__link[aria-current="page"] {
  border-color: var(--color-primary);
  background-color: var(--color-primary);
  color: var(--color-white);
}

@media (hover: hover) {
  .c-tabs__link:not([aria-current="page"]):hover {
    border-color: var(--color-primary);
    background-color: var(--archive-bg-pale);
  }
}

/*-------------------------------------------
カードグリッド（事例一覧・ニュース一覧）
  PC 3列 / SP 1列
-------------------------------------------*/
.c-card-grid {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 24px;
  padding-inline: 16px;
}

@media (min-width: 768px) {
  .c-card-grid {
    grid-template-columns: repeat(3, minmax(0, 374px));
    justify-content: space-between;
    gap: 40px 24px;
    padding-inline: var(--gutter);
  }
}

.c-card__link {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: inherit;
  text-decoration: none;
}

.c-card__thumb {
  aspect-ratio: 343 / 193;
  overflow: hidden;
  background-color: var(--archive-bg-pale);
}

@media (min-width: 768px) {
  .c-card__thumb {
    aspect-ratio: 374 / 210;
  }
}

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

.c-card__thumb--noimage img {
  object-fit: contain;
}

.c-card__label {
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 24px;
}

.c-card__title {
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 24px;
}

/*-------------------------------------------
ページネーション
-------------------------------------------*/
.c-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  padding-top: 40px;
}

.c-pagination .page-numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid #e6e6e6;
  border-radius: 4px;
  background-color: var(--color-white);
  color: var(--color-text-sub);
  font-size: var(--fs-body);
  line-height: 1.2;
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s;
}

.c-pagination .page-numbers.current {
  border-color: var(--archive-current);
  background-color: var(--archive-current);
  color: var(--color-white);
}

.c-pagination .page-numbers.dots {
  border-color: transparent;
}

.c-pagination .c-icon {
  font-size: 14px;
}

@media (hover: hover) {
  .c-pagination a.page-numbers:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
  }
}