@charset "UTF-8";
/* Farm/buy デザイントークン
-----------------------------------------------------------------*/
/* イージング
-----------------------------------------------------------------*/
/* デュレーション
-----------------------------------------------------------------*/
/* ============================================================
   お取り組み先一覧（company/corporation/list）専用CSS
   WF: Ark/wf/corporate/お取り組み先様一覧 – 1.png
   ・色/フォント/.phead/.breadcrumb/.companyExtIcon は company_common.css
   ・WF実測（原寸2560px = 1440pxデザインの1.778倍）から換算した値:
       パネル幅 1248px（= var(--inner)） / パネル内側余白 64px /
       かな列 320px / 行送り 84px / グループ下余白 80px / ボタン 186×32px
     グループ区切り罫線はかな列を含む全幅、行罫線は社名列から始まる（この差でグループと行を描き分ける）
============================================================ */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--paper);
  font-family: var(--gothic);
  color: var(--text-body);
}

h1,
h2,
p,
ul,
li {
  margin: 0;
}

ul {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

.p-partner {
  background: var(--paper);
  font-family: var(--gothic);
  color: var(--ink);
}

/* ============ ページ見出し ============ */
.p-partner .phead h1 {
  margin-top: 2.7777777778vw;
}
@media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) {
  .p-partner .phead h1 {
    margin-top: min(10.6666666667vw, 52px);
  }
}

/* ============ リード ============ */
.p-partner__lead {
  width: var(--inner);
  margin: 3.3333333333vw auto 0;
  font-family: var(--mincho);
  font-weight: 500;
  font-size: var(--fz-md);
  line-height: var(--lh-lead);
  letter-spacing: var(--ls-mincho);
  color: var(--text-body);
}
@media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) {
  .p-partner__lead {
    margin-top: min(8.5333333333vw, 41.6px);
  }
}

/* ============ 主要お取引先様 ============ */
.p-partner-list {
  width: var(--inner);
  margin-inline: auto;
  padding-block: 6.6666666667vw 8.8888888889vw;
}
@media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) {
  .p-partner-list {
    width: calc(100% - 2 * var(--edge));
    padding-block: min(12.8vw, 62.4px) min(21.3333333333vw, 104px);
  }
}

.p-partner-list__panel {
  background: #fff;
  border-radius: 0.9722222222vw;
  padding: 4.4444444444vw 4.4444444444vw 6.6666666667vw;
}
@media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) {
  .p-partner-list__panel {
    padding: min(8.5333333333vw, 41.6px) min(5.3333333333vw, 26px) min(10.6666666667vw, 52px);
    border-radius: min(2.6666666667vw, 13px);
  }
}

.p-partner-list__title {
  font-family: var(--mincho);
  font-weight: 500;
  font-size: var(--fz-h2);
  letter-spacing: 0.14em;
  line-height: var(--lh-tight);
  color: var(--ink);
  text-align: center;
  margin-bottom: 5.5555555556vw;
}
@media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) {
  .p-partner-list__title {
    font-size: var(--fz-h3);
    margin-bottom: min(8.5333333333vw, 41.6px);
  }
}

/* ---- 五十音グループ ---- */
.p-partner-group {
  display: grid;
  grid-template-columns: 22.2222222222vw 1fr;
  padding-bottom: 5vw;
}
@media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) {
  .p-partner-group {
    grid-template-columns: 1fr;
    padding-bottom: min(10.6666666667vw, 52px);
  }
}

.p-partner-group:last-child {
  padding-bottom: 0;
}

.p-partner-group__kana {
  display: flex;
  align-items: center;
  min-height: clamp(60.8px, 4.4444444444vw, 96px);
  align-self: start;
  font-family: var(--mincho);
  font-weight: 500;
  font-size: var(--fz-md);
  letter-spacing: var(--ls-mincho);
  line-height: 1;
  color: var(--text);
}
@media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) {
  .p-partner-group__kana {
    min-height: 0;
    margin-bottom: min(8.5333333333vw, 41.6px);
  }
}

.p-partner-group__list {
  display: flex;
  flex-direction: column;
  gap: 0.8333333333vw;
}
@media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) {
  .p-partner-group__list {
    gap: min(2.1333333333vw, 10.4px);
  }
}

/* ---- 1社 = グレー地のボタン（社名＋別タブアイコン） ---- */
.p-partner-btn {
  --ext-size: clamp(14.25px, 1.0416666667vw, 22.5px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.6666666667vw;
  min-height: clamp(60.8px, 4.4444444444vw, 96px);
  padding: 0 2.2222222222vw;
  border-radius: 0.6944444444vw;
  background: #efefef;
  color: var(--text);
  transition: background 0.3s ease, color 0.3s ease;
}
@media print, screen and (max-width:1023px), screen and (min-width:1024px) and (max-width:1024px) and (orientation: portrait) {
  .p-partner-btn {
    --ext-size: min(3.4666666667vw, 16.9px);
    gap: min(4.2666666667vw, 20.8px);
    min-height: min(14.9333333333vw, 72.8px);
    padding: 0 min(5.3333333333vw, 26px);
    border-radius: min(2.6666666667vw, 13px);
  }
}

.p-partner-btn__name {
  font-weight: 500;
  font-size: var(--fz-body);
  letter-spacing: 0.06em;
  line-height: var(--lh-head);
}

.p-partner-btn .companyExtIcon {
  flex: none;
  opacity: 0.55;
  transition: opacity 0.3s ease;
}

@media (hover: hover) {
  a.p-partner-btn:hover {
    background: var(--ink);
    color: #fff;
  }
  a.p-partner-btn:hover .companyExtIcon {
    opacity: 1;
  }
}