/* スタンプラリー特設ページ用CSS */

/* カード本体の表示領域 */
.stamp_rally_section {
  width: 100%;
  text-align: center;
}

/* カード全体の配置用コンテナ（背景色は持たせない） */
.stamp_rally_card {
  width: 100%;
  margin: 20px auto;
  text-align: center;
}

/* スタンプの色枠。背景色はこの枠だけに効かせ、履歴リンク・対象店舗一覧には及ばせない。
   スタンプに張り付かないよう、プレビュー（padding:24px / 角丸16px）に合わせて余白を持たせる。
   複数カードはプレビューと同じく縦並びにするため、内容幅のブロックとして中央寄せする */
.stamp_rally_card .sr_card_box {
  display: block;
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  padding: 24px 28px;
  /* 枠線の色はインラインスタイル（border-color）で指定するため、style/width を明示して枠を出す */
  border-style: solid;
  border-width: 1px;
  border-radius: 16px;
  text-align: center;
}

/* カード上部：タイトル・説明（下に区切り線） */
.stamp_rally_card .sr_card_head {
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

/* 2枚目以降のカードとの間隔（プレビューと同様） */
.stamp_rally_card .sr_card_box+.sr_card_box {
  margin-top: 16px;
}

.stamp_rally_card .sr_card_body {
  display: block;
}

.stamp_rally_card .sr_card_title {
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 8px;
  word-break: break-all;
}

.stamp_rally_card .sr_card_desc {
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
}

.stamp_rally_card .sr_stamps {
  display: grid;
  gap: 10px;
  justify-content: center;
}

.stamp_rally_card .sr_stamp {
  aspect-ratio: 1 / 1;
  border: 1px solid #dddddd;
  background-color: transparent;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.stamp_rally_card .sr_stamp_circle {
  border-radius: 50%;
}

.stamp_rally_card .sr_stamp_round {
  border-radius: 18%;
}

.stamp_rally_card .sr_stamp_square {
  border-radius: 0;
}

/* カード＋フッターの表示領域（中央寄せ・最大幅） */
.stamp_rally_card .sr_card_area {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
}

/* スタンプカードのスライド（2枚目以降を矢印で切り替える） */
.stamp_rally_card .sr_carousel {
  display: flex;
  align-items: center;
  justify-content: center;
}

.stamp_rally_card .sr_carousel_viewport {
  overflow: hidden;
  flex: 1 1 auto;
  min-width: 0;
}

.stamp_rally_card .sr_carousel_track {
  display: flex;
  transition: transform 0.3s ease;
}

.stamp_rally_card .sr_carousel_slide {
  flex: 0 0 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
}

.stamp_rally_card .sr_carousel_arrow {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  margin: 0 6px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #e0e0e0;
  font-size: 18px;
  line-height: 32px;
  color: #888;
  cursor: pointer;
}

.stamp_rally_card .sr_carousel_arrow:hover {
  opacity: 0.6;
}

.stamp_rally_card .sr_carousel_arrow[disabled] {
  opacity: 0.25;
  cursor: default;
}

/* 複数カード時のページインジケーター（●）。カード下に枚数分並べ、表示中を色で示す */
.stamp_rally_card .sr_carousel_dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
}

.stamp_rally_card .sr_carousel_dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #d5d5d5;
  cursor: pointer;
}

.stamp_rally_card .sr_carousel_dot.is_active {
  background: #666;
}

/* フッター：進捗（左）・履歴リンク（右）。カード枠内・上に区切り線 */
.stamp_rally_card .sr_card_footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
}

.stamp_rally_card .sr_card_footer .sr_progress {
  font-size: 15px;
  font-weight: bold;
}

.stamp_rally_card .sr_card_footer .sr_history_open {
  font-size: 13px;
  color: #333;
  text-decoration: underline;
  cursor: pointer;
}

.stamp_rally_card .sr_entry_button_area {
  margin-top: 24px;
}

@media (min-width: 768px) {
  .sr_visit_popup {
    width: 800px !important;
  }
}

.sr_visit_popup .pop_content {
  padding: 0 24px 28px;
  text-align: center;
}

.sr_visit_popup .sr_visit_desc {
  font-size: 12px;
  line-height: 1.6;
  margin: 0 0 10px;
  text-align: left;
}

.sr_visit_explain {
  font-size: 12px;
  line-height: 1.6;
  margin: 0 0 10px;
  text-align: center;
}

/* QRコード読み取り（店舗コードのカメラ入力） */
/* 見出しの右端にカメラアイコンを置くため、見出し行を基準にする */
.sr_visit_popup .sr_visit_head {
  position: relative;
}

.sr_visit_popup .sr_qr_icon {
  position: absolute;
  right: 0;
  bottom: 0;
  line-height: 1;
  cursor: pointer;
}

/* アイコンは他画面のボタン用に白で塗られているため、白背景でも見えるよう黒へ反転する */
.sr_visit_popup .sr_qr_icon img {
  width: 26px;
  height: 26px;
  vertical-align: middle;
  filter: brightness(0);
}

/* 読み取り中は中止できることが分かるよう、アイコンを薄くする */
.sr_visit_popup .sr_qr_icon_close img {
  opacity: 0.4;
}

/* 映像と説明文が横に並ばないよう、縦並び・中央寄せを明示する */
.sr_visit_popup .sr_qr_reader {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 12px;
}

/* 縦長の端末でもモーダルに収まるよう、カメラ映像は正方形の枠に収める */
.sr_visit_popup .sr_qr_video {
  display: block;
  width: 100%;
  max-width: 320px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: #000;
  border-radius: 6px;
}

.sr_visit_popup .sr_qr_hint {
  width: 100%;
  font-size: 12px;
  line-height: 1.6;
  margin: 6px 0 0;
  text-align: center;
}

.sr_visit_popup .sr_qr_error {
  font-size: 12px;
  line-height: 1.6;
  margin: 8px 0 0;
  color: #c33;
  text-align: center;
}

/* 共通コード（GPSが取得できない場合の救済入力） */
.sr_visit_popup .sr_common_code_box {
  margin-top: 18px;
  padding: 14px 14px 16px;
  border: 1px solid #d5d5d5;
  border-radius: 6px;
  background: #f6f6f6;
  text-align: left;
}

.sr_visit_popup .sr_common_code_title {
  font-size: 13px;
  font-weight: bold;
  margin: 0 0 6px;
}

.sr_visit_popup .sr_common_code_label {
  display: block;
  font-size: 12px;
  margin: 0 0 4px;
}

.sr_visit_popup .sr_common_code_box .postform_input input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  font-size: 14px;
}

/* type=password にせず見た目だけマスクする（パスワード保存ダイアログ・候補を出さないため） */
.sr_visit_popup .sr_common_code_input {
  -webkit-text-security: disc;
}

/* 対象店舗一覧を開くリンク */
.stamp_rally_card .sr_shoplist_link {
  margin-top: 16px;
  text-align: center;
}

.stamp_rally_card .sr_shoplist_link a {
  display: inline-block;
  padding: 4px 0;
  font-size: 14px;
  line-height: 1.4;
  color: #000;
  text-align: center;
  text-decoration: underline;
  cursor: pointer;
}

.stamp_rally_card .sr_shoplist_link a:hover {
  opacity: 0.5;
}

.stamp_rally_card .sr_shoplist_link a .icon {
  display: inline-block;
  width: 9px;
  height: 16px;
  margin-left: 13px;
  vertical-align: -4px;
  background: url('/common/_default/images/icon_link.png') no-repeat;
}

/* 対象店舗一覧 */
.stamp_rally_card .sr_shoplist_inline {
  margin-top: 20px;
  text-align: left;
}

.stamp_rally_card .sr_shoplist_inline_title {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 8px;
  text-align: center;
}

/* インラインフレーム表示の枠。モーダルと同じくカードのカスタム配色は使わず、中立色の枠に固定する。
   件数が多いときはボックス内でスクロールさせる。 */
.stamp_rally_card .sr_shoplist_box {
  box-sizing: border-box;
  border: 1px solid #b4b4b4;
  padding: 12px 16px;
  max-height: 320px;
  overflow-y: auto;
}

/* 対象店舗一覧の中身（モーダル・インライン共通） */
.sr_shoplist_ul {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: left;
}

.sr_shoplist_ul li {
  padding: 8px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.sr_shop_addr {
  display: block;
  font-size: 12px;
  opacity: 0.7;
}

.sr_shoplist_popup .sr_shoplist_ul,
.sr_shoplist_popup .sr_shoplist_html {
  max-height: 60vh;
  overflow-y: auto;
  text-align: left !important;
}


/* 履歴を開くリンク（スタンプカード内） */
.stamp_rally_card .sr_history_link {
  margin-top: 16px;
  text-align: center;
}

/* ダイアログ本体 */
.sr_history_popup .sr_history {
  padding: 0 1rem 1.5rem;
}

.sr_history_popup .point_log_table {
  max-height: 40vh;
  overflow-y: auto;
}

/* 履歴なしの表示 */
.sr_history_empty {
  padding: 10px 5px;
  font-size: 0.6rem;
  color: #999;
}

/* 取得中の表示 */
.sr_history_loading {
  padding: 1rem;
  font-size: 0.8rem;
  color: #999;
  text-align: center;
}

/* 消費（応募）行は赤字で表示する */
.sr_history_spend {
  color: #c0392b;
}

.sr_shop_name {
  font-size: 15px;
}

/* SP表示：矢印は出さずスワイプで切り替える。カード余白を抑えてカードを広く使う */
@media (max-width: 767px) {
  .stamp_rally_section {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }

  .stamp_rally_card .sr_card_box {
    padding: 16px 14px;
  }

  .stamp_rally_card .sr_carousel_arrow {
    display: none;
  }

  .stamp_rally_card .sr_stamps {
    gap: 6px;
  }

  /* 矢印を消した分、カードが端に寄らないよう左右に余白を持たせる */
  .stamp_rally_card .sr_carousel {
    padding: 0 16px;
  }

  .stamp_rally_card .sr_shoplist_link a {
    font-size: 11px;
  }

  .sr_shop_name {
    font-size: 12px;
  }

  .sr_shoplist_popup .sr_shoplist_html {
    font-size: 12px;
  }
}

/* ローディングの表示位置修正 */
#id_caobox1:has(img[src*="loading.gif"]) {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  width: auto !important;
  transform: translate(-50%, -50%);
}


/* 「ゴールまであと◯」。ゴール未達のときだけ has_goal が付き、履歴リンクを次の行へ送る */
.stamp_rally_card .sr_card_footer.has_goal {
  flex-wrap: wrap;
}

.stamp_rally_card .sr_card_footer .sr_goal_remaining {
  margin-left: auto;
  padding: 6px 14px;
  border-radius: 3px;
  background: #ffe3e3;
  color: #ff0000;
  font-size: 13px;
  white-space: nowrap;
}

/* ゴール未達のときだけ履歴リンクを次の行の右端へ送る。 */
.stamp_rally_card .sr_card_footer.has_goal .sr_history_open {
  flex-basis: 100%;
  margin-top: 12px;
  text-align: right;
}

/* レシート画像の「＋追加アップロードする」。
   既存のレシート投稿（story/themes/receipt_later_draw）と同じボタン風の見た目にする。
   スタンプラリーの特設ページはそのテーマのCSSを読まないため、ここで同じ定義を持つ */
#receipt-picture-append .receipt_picture_append_div {
  display: inline-block;
  margin: 20px 0;
  padding: 0.45em 1.75em;
  background: #fff;
  border: 1px solid #ddd;
  box-shadow: 0 0 3px #eee;
  font-size: 14px;
  cursor: pointer;
}

/* レシート投稿のエラー文言。
   既存の投稿フォーム（#add_error_msg）と同じ赤字にする。
   .postform_error_div の定義はレシート応募系テーマにしか無いため、ここで同じ定義を持つ */
#post-error-div.postform_error_div p {
  margin: 0;
  color: #c00;
  font-size: 14px;
  font-weight: normal;
}

/* テキスト読み取り時のガイド枠。映像に重ねるため、映像を相対配置の枠で包む */
.sr_visit_popup .sr_ocr_frame {
  position: relative;
  width: 100%;
  max-width: 320px;
}

/* 認識に使う範囲を示す枠 */
.sr_visit_popup .sr_ocr_guide {
  position: absolute;
  left: 5%;
  right: 5%;
  top: 36%;
  height: 28%;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 4px;
  pointer-events: none;
}

.postform_error_div {
  padding: 25px 45px;
  margin: -30px 0 0 0;
}

.postform .postform_box p {
  margin-bottom: 10px;
}