@charset "UTF-8";
/* ============================================================
   solution-partner.css
   /solutions/ の各ソリューションブロック下段に置く
   「連携サービス」ロゴ帯。

   初出: 決済ブロック（#payment）に楽天ペイ / stera terminal を掲載。

   ロゴ画像について
   - 各社から正式に提供されたブランドアセットのみを使用すること。
     報道用プレスキットの素材は自社サイトへの掲載には使えない。
   - 色の改変・比率変更・余白の圧縮は各社ガイドラインで禁止される
     のが通例。tile 側で高さを揃え、画像は object-fit:contain で
     縦横比を保ったまま収める。

   将来、自動釣銭機メーカーやホテルシステム等を並べる場合も
   同じコンポーネントを使い回せる（item を足すだけ）。
   ============================================================ */

.p-solution-partner {
  margin: 40px 0 0;
  padding: 20px 16px 20px;
  background: transparent;
  border: solid 1px #b7e8de;
  border-radius: 8px;
}

.p-solution-partner__title {
  margin: 0;
  font-size: 1.4rem;
  line-height: 1.4;
  font-weight: 700;
  color: #1a1a1a;
  text-align: center;
}

.p-solution-partner__lead {
  margin: 6px 0 0;
  font-size: 1.3rem;
  line-height: 1.6;
  font-weight: 400;
  color: #4a4a4a;
  text-align: center;
}

.p-solution-partner__list {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  /* flex-wrap では中間幅で 3+1 のような半端な折り返しが起きるため grid。
     minmax(0, Npx) = 「上限Npx・入らなければ縮む」 */
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-content: center;
  gap: 8px;
}

/* SPは2列。ロゴの実比率が 楽天ペイ 2.98:1 / stera 2.5:1 と
   正方形寄りなので、2列でもワードマークは24px以上を確保できる。
   （5:1級の横長ロゴを足す場合は1列に戻すこと） */
.p-solution-partner__item {
  min-width: 0;
}

.p-solution-partner__tile {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 68px;
  padding: 8px 10px;
  background: transparent;
  border-radius: 6px;
  transition: background-color 0.3s, transform 0.3s;
}

.p-solution-partner__tile img {
  width: auto;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

/* --- ロゴごとの光学調整 ---------------------------------------
   2つのロゴは「箱の中で文字が占める割合」が大きく違うため、
   同じ max-height を与えると文字の大きさが揃わない。

   楽天ペイ (SVG 74x24.8) : ロゴマークが箱のほぼ全高を使う
   stera   (JPG 300x120) : 上部に "The Payment Platform." の
                           タグラインが入り、"stera" のワードマークは
                           箱の y43-99 = 全高の 47.5% しか使わない

   そのため stera 側の箱を大きく取り、ワードマークの高さを
   楽天ペイのロゴマークに近づけている。
   ※タグライン無しのワードマーク単体版を入手できたら、この
     モディファイア2つは削除して max-height を統一してよい。
   ------------------------------------------------------------ */
.p-solution-partner__logo--rakuten {
  max-height: 36px;
}
.p-solution-partner__logo--stera {
  max-height: 52px; /* ワードマーク実寸 約24px */
}


@media screen and (min-width: 768px), print {
  .p-solution-partner {
    margin-top: 48px;
    padding: 26px 32px 26px;
  }
  .p-solution-partner__title {
    font-size: 1.6rem;
  }
  .p-solution-partner__lead {
    margin-top: 8px;
    font-size: 1.4rem;
  }
  .p-solution-partner__list {
    margin-top: 18px;
    grid-template-columns: repeat(2, minmax(0, 240px));
    gap: 16px;
  }
  .p-solution-partner__tile {
    height: 84px;
    padding: 12px 20px;
  }
  .p-solution-partner__logo--rakuten {
    max-height: 36px;
  }
  .p-solution-partner__logo--stera {
    max-height: 60px; /* ワードマーク実寸 約28px */
  }
}

@media screen and (min-width: 768px) and (any-hover: hover), print and (any-hover: hover) {
  a.p-solution-partner__tile:hover {
    background-color: #f4faf9;
    transform: translateY(-2px);
  }
}

/* ============================================================
   4連バリエーション（経営ブロック / 本部管理サービス）
   ------------------------------------------------------------
   決済ブロックの2連はロゴごとに max-height を調整しているが、
   こちらは max-width を1つ指定するだけで揃う。

   4つとも余白をトリミング済みで、かつ「文字の高さ : 全体の幅」の
   比率が近いため、幅を固定すると文字サイズがほぼ自動で揃う。
     GulfNet          480x109 (4.40:1) 1段
     ぴかいちナビ      199x59  (3.37:1) 1段＋スウォッシュ
     Fooding Journal  200x92  (2.17:1) 2段組
     ASPIT            176x50  (3.52:1) 1段＋ストライプ
   2段組の Fooding Journal だけ縦に伸びるので、max-height を
   タイル内に収まる値で保険として掛けている。
   ============================================================ */
.p-solution-partner--4up .p-solution-partner__tile img {
  max-width: min(104px, 100%);
  max-height: 48px;
}

@media screen and (min-width: 768px), print {
  .p-solution-partner--4up .p-solution-partner__list {
    grid-template-columns: repeat(4, minmax(0, 200px));
  }
  .p-solution-partner--4up .p-solution-partner__tile {
    padding: 12px;
  }
  .p-solution-partner--4up .p-solution-partner__tile img {
    max-width: min(124px, 100%);
    max-height: 58px;
  }
}

/* ============================================================
   予約管理サービス（運用ブロック）
   ------------------------------------------------------------
   この4つは形状差が大きく、幅でも高さでも一律には揃わない。
     Resty       440x289 (1.52:1) 文字を内包したエンブレム
     TORETA      387x93  (4.16:1) アイコン＋文字（文字は箱の58%）
     ebica       291x79  (3.68:1) 文字のみ
     TableCheck  440x55  (8.00:1) アイコン＋文字（文字は箱の100%）
   そこで「画面上の文字の高さ」を揃える方針で個別指定している。
   PCでの文字高はおおむね 24px:
     ebica/TableCheck は箱＝文字なのでそのまま
     TORETA は 24 / 0.58 ≒ 41px を箱に与える
     Resty はエンブレムのため文字基準にならず、見た目の存在感で 50px
   TableCheck だけは幅が効くので max-width で制御している。
   ============================================================ */
.p-solution-partner--reserve .p-solution-partner__logo--resty {
  max-height: 40px;
}
.p-solution-partner--reserve .p-solution-partner__logo--toreta {
  max-height: 33px;
}
.p-solution-partner--reserve .p-solution-partner__logo--ebica {
  max-height: 20px;
}
.p-solution-partner--reserve .p-solution-partner__logo--tablecheck {
  max-width: min(140px, 100%);
}

@media screen and (min-width: 768px), print {
  /* 768-999px は2列。ここで4列にするとタイルが狭くなり、
     幅で決まる TableCheck だけ文字16px まで縮んで揃わなくなる。 */
  .p-solution-partner--reserve .p-solution-partner__list {
    grid-template-columns: repeat(2, minmax(0, 300px));
  }
  .p-solution-partner--reserve .p-solution-partner__tile {
    padding: 12px;
  }
  .p-solution-partner--reserve .p-solution-partner__logo--resty {
    max-height: 50px;
  }
  .p-solution-partner--reserve .p-solution-partner__logo--toreta {
    max-height: 41px;
  }
  .p-solution-partner--reserve .p-solution-partner__logo--ebica {
    max-height: 24px;
  }
  .p-solution-partner--reserve .p-solution-partner__logo--tablecheck {
    max-width: min(192px, 100%);
  }
}

@media screen and (min-width: 1000px), print {
  .p-solution-partner--reserve .p-solution-partner__list {
    grid-template-columns: repeat(4, minmax(0, 230px));
  }
}

/* ============================================================
   単独ロゴ（集客ブロック / LINE MINI App）
   ------------------------------------------------------------
   ロゴが1つのときは grid の列が余ってしまい左寄せになるため、
   列を1本にして justify-content: center で中央に置く。

   LINE MINI App_Logo(JP)_Vertical_2_Primary.svg は viewBox が
   1500x896 でインクにぴったり＝余白が内蔵されていない。
   LINE のブランドガイドラインはロゴ周囲のアイソレーション
   （クリアスペース）を要求するため、タイルの padding で確保する。
   ロゴは改変不可のため、SVGは公式アセットをそのまま設置している。
   ============================================================ */
.p-solution-partner--single .p-solution-partner__list {
  grid-template-columns: minmax(0, 240px);
  justify-content: center;
}
.p-solution-partner--single .p-solution-partner__tile {
  height: 92px;
  padding: 12px 20px;
}
.p-solution-partner--single .p-solution-partner__tile img {
  max-height: 68px;
}

@media screen and (min-width: 768px), print {
  .p-solution-partner--single .p-solution-partner__list {
    grid-template-columns: minmax(0, 280px);
  }
  .p-solution-partner--single .p-solution-partner__tile {
    height: 112px;
    padding: 14px 24px;
  }
  .p-solution-partner--single .p-solution-partner__tile img {
    max-height: 84px;
  }
}