/* PickleK パートナー一覧ページ専用スタイル。common.css の上に重ねる（school/style.css と同じ構成）。
   トップの「パートナー」帯（流れるロゴ）は index.css 側にあり、このファイルには含めない。 */

.partners-page{background:var(--c-white);padding:64px 0 72px}
.partners-page h2{margin-bottom:44px}

.tier{margin-top:48px}
.tier:first-of-type{margin-top:0}

/* 区切り見出し：英字ラベルは小さく、日本語は大きく。左の紺バーで階層を示す。
   表示時にバーが伸び → 文字がバーの裏から右へ出てくる（.is-in は script.js が付ける） */
.tier-head{position:relative;margin-bottom:20px;padding-left:16px}
.tier-head::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--c-navy);
  transform-origin:top;
}
.tier-head .txt{display:block;overflow:hidden}
.tier-head .en{
  display:block;font-family:var(--font-display);font-weight:700;font-size:12px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--c-grey);line-height:1.5;
}
.tier-head .jp{display:block;font-weight:700;font-size:24px;color:var(--c-navy);line-height:1.3;letter-spacing:.02em}

/* 初期状態を隠すのは JS が使えるときだけ（<head> のインラインスクリプトが .js を付ける）。無効なら最初から表示 */
.js .tier-head::before{transform:scaleY(0)}
.js .tier-head .en,.js .tier-head .jp{transform:translateX(-110%)}
.js .tier-head.is-in::before{transform:scaleY(1);transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.js .tier-head.is-in .en,.js .tier-head.is-in .jp{
  transform:none;transition:transform .35s cubic-bezier(.2,.7,.2,1) .1s;
}
.js .tier-head.is-in .jp{transition-delay:.17s}
@media (prefers-reduced-motion:reduce){
  .js .tier-head::before,.js .tier-head .en,.js .tier-head .jp{transform:none;transition:none}
}

/* プレミアム：ロゴのみを大きく中央に置く */
.premium-logos{display:flex;justify-content:center;padding:28px 0 12px}
.premium-logos img{width:min(100%,420px);max-height:130px;object-fit:contain}
.premium-logos a:hover img{opacity:.75}

/* 通常パートナー：ロゴのみ。最終行が余っても中央に寄せる */
.partner-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 24px}
.partner-item{
  flex:0 0 calc((100% - 72px)/4);height:104px;display:flex;align-items:center;justify-content:center;
  padding:14px 22px;
}
.partner-item img{max-width:100%;max-height:100%;object-fit:contain;transition:opacity .15s}
.partner-item:hover img{opacity:.7}
.partner-item img.sq{max-height:68px}
/* blueeq は縦横比が小さく高さで、TOCO は横長で幅で制限され、他社より小さく見えるため補正する */
.partner-item img.lg-blueeq{transform:scale(1.3)}
.partner-item img.lg-toco{transform:scale(1.15)}

/* 最下部の協賛相談 */
.partners-cta{
  margin-top:64px;padding:36px 24px;text-align:center;border-radius:var(--radius);
  background:var(--c-cream);
}
.partners-cta p{font-weight:700;color:var(--c-navy);font-size:17px;margin-bottom:6px;text-wrap:balance}
.partners-cta small{display:block;color:var(--c-grey);font-size:13px;margin-bottom:20px;font-weight:500}

@media (max-width:992px){
  .partner-item{flex-basis:calc((100% - 48px)/3)}
}
@media (max-width:480px){
  .partners-page{padding:44px 0 56px}
  .partner-grid{gap:8px 12px}
  .partner-item{flex-basis:calc((100% - 12px)/2);height:84px;padding:10px 16px}
  .partner-item img.sq{max-height:54px}
  .premium-logos img{max-height:100px}
  .tier-head{padding-left:14px}
  .tier-head .jp{font-size:20px;white-space:nowrap}
}