/* amazon.css — 各ゲームページの本文末尾に出る Amazon 導線の見た目（web-fleet #547 / #572）。
 *
 * share.css / changelog.css と同じ考え方で色を決め打ちしない。ゲームページは
 * 明るい地・暗い地が混在するので、文字色は継承し、枠と下地は半透明の灰色にする。
 * Amazon のブランド色（オレンジ）も使わない。公式ウィジェットを読み込んでいると
 * 誤解されるし、暗い地では読みにくくなる。
 *
 * フリートの決まりに合わせて、絵文字は使わない・左の色付き縦ボーダーも付けない。 */

.amazon-game {
  max-width: 1080px;
  margin: 1.6rem auto .4rem;
  border: 1px solid rgba(128, 128, 128, .34);
  border-radius: 10px;
  background: rgba(128, 128, 128, .07);
  padding: .9rem 1.05rem 1rem;
  font-family: "Noto Sans JP", "Hiragino Sans", sans-serif;
  font-size: .9rem;
  line-height: 1.75;
}

/* 広告であることは、目立たなくても必ず読める位置に置く */
.amazon-game__label {
  display: inline-block;
  margin-bottom: .35rem;
  padding: .1rem .45rem;
  border: 1px solid rgba(128, 128, 128, .4);
  border-radius: 4px;
  font-size: .7rem;
  letter-spacing: .04em;
  opacity: .8;
}

.amazon-game__title {
  margin: 0 0 .3rem;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .02em;
}

.amazon-game__query,
.amazon-game__name,
.amazon-game__price {
  margin: 0 0 .5rem;
  font-size: .82rem;
  opacity: .85;
}

.amazon-game__name {
  font-size: .88rem;
  opacity: 1;
}

.amazon-game__image {
  float: left;
  margin: 0 .9rem .5rem 0;
  line-height: 0;
}

.amazon-game__image img {
  width: 120px;
  height: 120px;
  object-fit: contain;
  border-radius: 6px;
  background: rgba(128, 128, 128, .12);
}

.amazon-game__cta {
  display: inline-block;
  clear: both;
  padding: .42rem .95rem;
  border: 1px solid rgba(128, 128, 128, .5);
  border-radius: 6px;
  font-size: .85rem;
  font-weight: 600;
  text-decoration: none;
  color: inherit;
}

.amazon-game__cta:hover,
.amazon-game__cta:focus-visible {
  background: rgba(128, 128, 128, .16);
}

@media (max-width: 480px) {
  .amazon-game {
    margin: 1.2rem .6rem .4rem;
    padding: .8rem .85rem .9rem;
  }

  .amazon-game__image {
    float: none;
    display: block;
    margin: 0 0 .6rem;
  }
}