/* =============================================
   partner.css  |  パートナー企業ページ専用スタイル
   outline.css の oc- 変数・コンポーネントを継承
   ============================================= */

/* body.page_partner の main#contents リセット */
body.page_partner {
  overflow-x: hidden;
}

body.page_partner main#contents {
  max-width     : none;
  width         : 100%;
  padding-left  : 0;
  padding-right : 0;
  padding-bottom: 0;
}

/* ── パンくずリスト：1440px 基準左端に揃える ── */
body.page_partner #locator_template_c2 .inner {
  max-width   : none !important;
  margin-left : 0    !important;
  padding-left: max(clamp(24px, 5vw, 80px), calc((100vw - 1440px) / 2 + clamp(24px, 5vw, 80px))) !important;
}

/* oc-container をパートナーページ用に 1440px へ拡張 */
body.page_partner .oc-container {
  max-width     : 1440px;
  padding-inline: clamp(24px, 5vw, 80px);
}

/* ── ヒーロータイトルを 1440px コンテナ左端に正確に揃える ──
   .full-width クラスの padding-left/right: 20px を打ち消し、
   ヒーロー内側のパディングを oc-container と同じ算式で制御する。
   1440px 超のビューポートでは oc-container がセンタリングされるため
   calc((100vw - 1440px) / 2 + clamp) でオフセットを加算する。 */
body.page_partner .page-header.oc-hero {
  padding-left : 0;
  padding-right: 0;
}

body.page_partner .page-header.oc-hero .page-header__inner {
  padding-left : max(clamp(24px, 5vw, 80px), calc((100vw - 1440px) / 2 + clamp(24px, 5vw, 80px)));
  padding-right: max(clamp(24px, 5vw, 80px), calc((100vw - 1440px) / 2 + clamp(24px, 5vw, 80px)));
}


/* ── パートナー種別イントロセクション ────────── */
.pt-type-section {
  background    : var(--oc-light);
  padding-bottom: 64px;
}

/* pt-type-section 内の oc-section-heading: 上余白はそのまま、下余白を詰める */
.pt-type-section > .oc-section-heading {
  padding-bottom: 20px;
}

.pt-type-grid {
  display              : grid;
  grid-template-columns: repeat(3, 1fr);
  gap                  : 2px;          /* 2px gap を border 色で埋めて区切り線に見せる */
  margin-top           : 36px;
  background           : var(--oc-border);
  border               : 1px solid var(--oc-border);
}

a.pt-type-card {
  display        : flex;
  flex-direction : column;
  padding        : 28px 24px 24px;
  background     : #fff;
  border-left    : 4px solid var(--oc-navy);
  text-decoration: none !important;
  color          : var(--oc-text) !important;
  transition     : background   0.22s var(--oc-ease),
                   border-color 0.22s var(--oc-ease);
}

a.pt-type-card:hover,
a.pt-type-card:focus-visible {
  background  : var(--oc-navy);
  border-color: var(--oc-red);
  outline     : none;
}

.pt-type-card__num {
  display       : block;
  font-family   : 'IBM Plex Sans', sans-serif;
  font-size     : 11px;
  font-weight   : 700;
  letter-spacing: 0.25em;
  color         : var(--oc-red);
  margin-bottom : 10px;
  transition    : color 0.22s var(--oc-ease);
}

a.pt-type-card:hover .pt-type-card__num,
a.pt-type-card:focus-visible .pt-type-card__num {
  color: rgba(255, 255, 255, 0.55);
}

.pt-type-card__title {
  font-family   : 'Noto Sans JP', sans-serif;
  font-size     : clamp(17px, 1.7vw, 20px);
  font-weight   : 700;
  color         : var(--oc-navy);
  margin        : 0 0 12px;
  padding-bottom: 10px;
  border-bottom : 1px solid var(--oc-border);
  transition    : color 0.22s var(--oc-ease),
                  border-color 0.22s var(--oc-ease);
}

a.pt-type-card:hover .pt-type-card__title,
a.pt-type-card:focus-visible .pt-type-card__title {
  color       : #fff;
  border-color: rgba(255, 255, 255, 0.15);
}

.pt-type-card__desc {
  font-size  : 15px;
  line-height: 1.85;
  color      : #555;
  margin     : 0;
  flex       : 1;
  transition : color 0.22s var(--oc-ease);
}

a.pt-type-card:hover .pt-type-card__desc,
a.pt-type-card:focus-visible .pt-type-card__desc {
  color: rgba(255, 255, 255, 0.75);
}

.pt-type-card__more {
  display    : inline-flex;
  align-items: center;
  gap        : 6px;
  font-size  : 12px;
  font-weight: 700;
  color      : var(--oc-red);
  margin-top : 14px;
  transition : color 0.22s var(--oc-ease),
               gap   0.22s var(--oc-ease);
}

a.pt-type-card:hover .pt-type-card__more,
a.pt-type-card:focus-visible .pt-type-card__more {
  color: #fff;
  gap  : 10px;
}

.pt-type-card__more::after {
  content     : '';
  display     : inline-block;
  width       : 6px;
  height      : 6px;
  border-top  : 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform   : rotate(45deg);
  flex-shrink : 0;
}

/* ── パートナーリストセクション ──────────────── */
.pt-list-section {
  padding-bottom: 64px;
}

.pt-list-section:last-of-type {
  padding-bottom: 80px;
}

/* ── 募集バナー ──────────────────────────────── */
.pt-recruit-note {
  background   : #eef2f7;
  border-left  : 4px solid var(--oc-navy);
  padding      : 14px 20px;
  margin-bottom: 28px;
  font-size    : 15px;
  color        : var(--oc-navy);
}

.pt-recruit-note a {
  color          : var(--oc-red);
  font-weight    : 700;
  text-decoration: none;
}

.pt-recruit-note a:hover {
  text-decoration: underline;
}

/* ── パートナーカードグリッド ─────────────────── */
.pt-partner-grid {
  display              : grid;
  grid-template-columns: repeat(3, 1fr);
  gap                  : 20px;
}

/* ── パートナーカード ─────────────────────────── */
.pt-partner-card {
  border        : 1px solid var(--oc-border);
  border-top    : 4px solid var(--oc-navy);
  background    : #fff;
  overflow      : hidden;
  display       : flex;
  flex-direction: column;
  transition    : box-shadow 0.25s var(--oc-ease);
}

.pt-partner-card:hover {
  box-shadow: 0 4px 16px rgba(3, 38, 71, 0.1);
}

.pt-partner-card__logo {
  padding        : 28px 24px;
  background     : #fff;
  border-bottom  : 1px solid var(--oc-border);
  display        : flex;
  align-items    : center;
  justify-content: center;
  min-height     : 140px;
  overflow       : hidden;
}

.pt-partner-card__logo img {
  transition: transform 0.35s var(--oc-ease);
}

.pt-partner-card:hover .pt-partner-card__logo img {
  transform: scale(1.06);
}

.pt-partner-card__logo img {
  max-width : 260px;
  max-height: 90px;
  width     : 100%;
  height    : auto;
  object-fit: contain;
  display   : block;
}

.pt-partner-card__body {
  padding       : 18px 20px 20px;
  flex          : 1;
  display       : flex;
  flex-direction: column;
  gap           : 8px;
}

.pt-partner-card__name {
  font-family: 'Noto Sans JP', sans-serif;
  font-size  : 17px;
  font-weight: 700;
  color      : var(--oc-navy);
  margin     : 0;
}

.pt-partner-card__tags {
  display  : flex;
  flex-wrap: wrap;
  gap      : 5px;
}

.pt-partner-card__tag {
  font-size     : 10px;
  background    : #eef2f7;
  color         : var(--oc-navy);
  padding       : 3px 8px;
  font-weight   : 600;
  letter-spacing: 0.02em;
  border        : 1px solid var(--oc-border);
}

.pt-partner-card__desc {
  font-size  : 14px;
  line-height: 1.85;
  color      : #555;
  margin     : 0;
  flex       : 1;
}

a.pt-partner-card__link {
  display    : inline-flex;
  align-items: center;
  gap        : 6px;
  font-size  : 12px;
  font-weight: 700;
  color      : var(--oc-red) !important;
  text-decoration: none !important;
  margin-top : 4px;
  align-self : flex-start;
  transition : gap 0.2s ease, opacity 0.2s;
}

a.pt-partner-card__link:hover,
a.pt-partner-card__link:focus-visible {
  opacity: 0.8;
  gap    : 10px;
}

a.pt-partner-card__link::after {
  content    : '';
  display    : inline-block;
  width      : 6px;
  height     : 6px;
  border-top : 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform  : rotate(45deg);
  flex-shrink: 0;
}

/* ── レスポンシブ: 幅広タブレット (1100px) ────── */
@media screen and (max-width: 1100px) {
  .pt-partner-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── レスポンシブ: タブレット (900px) ─────────── */
@media screen and (max-width: 900px) {
  .pt-type-grid {
    grid-template-columns: 1fr;
    /* gap は 2px のまま維持 — background: var(--oc-border) と組み合わせて区切り線 */
  }
}

/* ── レスポンシブ: スマートフォン (679px) ──────── */
@media screen and (max-width: 679px) {
  .pt-type-section {
    padding-bottom: 48px;
  }

  .pt-partner-grid {
    grid-template-columns: 1fr;
  }

  .pt-list-section:last-of-type {
    padding-bottom: 48px;
  }
}