/* 旧サイトから移したページ（archive/）だけの体裁。ほかのページは読まない。
   本文は旧サイトの HTML をほぼそのまま入れているので、表・画像・寄せ（style="text-align:…"）が混ざる。 */

/* 旧サイトの本文は段落に余白を持っていたので、新サイトの「段落間 0」（.prose p + p）を少し戻す */
.prose-archive p + p { margin-top: .5em; }

/* 表（送料の改定など） */
.prose-archive .archive-table {
  width: 100%;
  margin: 1.5em 0;
  border-collapse: collapse;
  font-size: .9375rem;
}
.prose-archive .archive-table th,
.prose-archive .archive-table td {
  padding: .75em 1em;
  border: 1px solid #dadada;
  text-align: left;
  vertical-align: top;
}
.prose-archive .archive-table th {
  width: 8em;
  background: #f6f3f6;
  font-weight: 500;
  white-space: nowrap;
}

/* 本文中の画像 */
.prose-archive img {
  max-width: 100%;
  height: auto;
}

/* 画像を縦に並べたページ（公式アプリ・カード・受賞） */
.archive-visual {
  max-width: 800px;
  margin: 0 auto;
}
.archive-visual img {
  display: block;
  width: 100%;
  height: auto;
}
.archive-visual img + img { margin-top: 0; }

/* 旧サイトは PC 用（.pc）とスマホ用（.sp）の画像を2組持ち、幅でどちらかだけを出していた。
   上の display: block が共通の .sp { display: none } より強く効き、PC でスマホ用まで出ていた
   （2026-10-26 先方の校正「point の画像が重複」）。PC ではスマホ用を隠す。スマホでは common.css の
   .sp { display: block !important } ・.pc { display: none !important } が効く */
.archive-visual img.sp,
.archive-visual div.sp { display: none; }

/* 画像の上にボタンを重ねる（公式アプリのページ）。位置は画像を実測した % */
.archive-overlay { position: relative; }
.archive-overlay .archive-cv {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 58%;
  transform: translateX(-50%);
  transition: opacity .3s;
}
.archive-overlay .archive-cv:hover { opacity: .8; }
/* PC：画像に描かれた App Store・Google Play のボタンの上に、押せる範囲だけを置く */
.archive-overlay .archive-hit {
  position: absolute;
  top: 40%;
  width: 12%;
  height: 18%;
}
.archive-overlay .archive-hit.is-appstore { left: 42%; }
.archive-overlay .archive-hit.is-googleplay { left: 65.6%; }
/* スマホ：画像の空の枠（iPhone・Android の下）にボタンの画像を置く */
.archive-overlay .archive-badge {
  position: absolute;
  width: 36%;
  transform: translate(-50%, -50%);
  top: 60%;
}
.archive-overlay .archive-badge.is-iphone { left: 31.2%; }
.archive-overlay .archive-badge.is-android { left: 73.9%; }
.archive-visual .btn-wrap { margin: 2.5rem 0; }
.archive-visual .archive-jump { margin: 1.5rem 0; text-align: center; }
.archive-visual .archive-jump img { display: inline-block; width: auto; max-width: 70%; }
.archive-visual .archive-store {
  display: flex;
  justify-content: center;
  gap: 4%;
  margin: 1.5rem 0 2.5rem;
}
.archive-visual .archive-store a { width: 38%; }
.archive-visual .archive-caption { margin: 2rem 0 .5rem; text-align: center; }
.archive-visual .archive-movie { display: block; margin: 1.5rem 0; }
.archive-visual .archive-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  margin: 5px 0;
}

@media screen and (max-width: 768px) {
  .prose-archive .archive-table th { width: auto; white-space: normal; }
  .prose-archive .archive-table th,
  .prose-archive .archive-table td { display: block; }
  .archive-visual .archive-grid { grid-template-columns: 1fr; }
}