/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jun 16 2026 | 09:49:05 */
/* ============================================================
   ③ AmazonJS — Amazon商品ウィジェット
   読み込み順: 機能パーツ群の1つ(順不同)
   ============================================================ */

/* --- コードブロック(商品挿入枠) --- */
/* amazona は横スクロールカルーセル(umasoku-scroll-*)を内包するため、
   inline-flex だと中身の合計幅まで膨らみページ全体がはみ出す。block化して幅を閉じる。 */
.code-block-amazonpog,
.code-block-amazonumamusume1,
.code-block-amazonumamusume2,
.code-block-amazonb {
  display: inline-flex;
  margin: 2px 0 !important;
}

.code-block-amazona {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
  margin: 2px 0 !important;
}

/* --- マーキー(横スクロール) --- */
.translateX {
  animation: translateX 5s linear alternate;
}

.st-marquee {
  width: calc(100% - 5px);
  padding: 5px 0 !important;
}

/* --- 商品アイテム --- */
.amazonjs_item {
  display: inline-table;
  clear: none;
  margin: 0 0 5px 0 !important;
  padding: 0 !important;
  background: #fffaef !important;
  box-shadow: var(--box-shadow);
  overflow: hidden;
}

.amazonjs_info {
  padding: 2px !important;
}

.amazonjs_info .amazonjs_price {
  display: none;
}

.amazonjs_book {
  border: 4px solid #ffeb3b !important;
}

/* --- 商品タイトル --- */
.amazonjs_item .amazonjs_info .st-amazonjs_title a {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  clear: none;
  margin: 0 0 10px !important;
  padding: 0;
  border: none;
  color: #1565c0 !important;
  font-family: 'Noto Sans JP';
  font-size: var(--font-size-sm) !important;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: -0.2px;
  text-decoration: none !important;
  overflow: hidden;
  text-overflow: ellipsis;
}

.st-amazonjs_title {
  margin-top: 2px;
  transition: var(--transition-all);
}

.st-amazonjs_title:hover {
  background-color: #ffecb3;
}

.st-amazonjs_title a:hover {
  color: #fff !important;
}

/* --- 商品画像 --- */
.amazonjs_image {
  overflow: hidden;
}

.amazonjs_image img {
  transition: var(--transition-all);
}

.amazonjs_image:hover img {
  transform: var(--transform-scale);
}

.amazonjs_item .amazonjs_info {
  height: 50px !important;
  margin-bottom: 0 !important;
  margin-left: 0 !important;
}

/* --- レビュー --- */
.amazonjs_item .amazonjs_review,
.amazonjs_item .amazonjs_review_custom {
  position: relative !important;
  right: 0;
  margin: 5px 0 !important;
  color: #d50000 !important;
  font-size: .7em;
  font-weight: 700;
}

a.amazonjs_review::before,
a.amazonjs_review_custom::before {
  content: "\f270";
  margin-right: 5px;
  color: #fbc02d;
  font-family: FontAwesome;
  font-weight: 900;
}

.amazonjs_item .amazonjs_review:hover,
.amazonjs_item .amazonjs_review_custom:hover {
  transform: var(--transform-translate);
}

.amazonjs_item .amazonjs_image {
  margin-right: 0 !important;
}

/* --- 横並びボックス内 --- */
.boxContainer .amazonjs_item {
  margin: 0 4px 4px 0 !important;
  width: 150px !important;
  height: 210px !important;
}

.amzn-ad-container {
  width: 150px !important;
}

.amazonjs_info .amazonjs_indicator {
  /* 表示維持(元コードでコメントアウトされていた display:none は不要) */
}

/* ============================================================
   レスポンシブ
   ============================================================ */

/* スマホ (max-width: 699px) */
@media print, screen and (max-width: 699px) {
  #TB_window {
    height: 85%;
    max-width: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch !important;
  }

  .amazonjs_item {
    display: inline-block;
  }

  .boxContainer .amazonjs_item {
    width: 130px !important;
    height: 200px !important;
    box-sizing: border-box;
  }

  .amazonjs_item .amazonjs_info .st-amazonjs_title a {
    font-size: var(--font-size-sm) !important;
  }

  .amazonjs_image img {
    height: 140px;
    object-fit: cover;
    object-position: center;
  }
  .code-block-amazona .amazonjs_image img {
    object-position: top;
  }
  .st-marquee > ul {
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* PC (min-width: 700px) */
@media print, screen and (min-width: 700px) {
  .boxContainer .amazonjs_item {
    box-sizing: border-box;
    height: 220px;
  }

  .amazonjs_image img {
    width: 200px !important;
    height: 180px;
    object-fit: cover;
    object-position: center;
  }
  .code-block-amazona .amazonjs_image img {
    object-position: top;
  }
  .amazonjs_item .amazonjs_info {
    height: 210px;
  }
}

/* ===== POG本一覧 画像横並び（うま速） ===== */
/* 旧flex版は廃止し、grid版に一本化 */
.umasoku-poglist {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.umasoku-pog-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  text-decoration: none !important;
  transition: var(--transition-all);
  min-width: 0;            /* グリッド内で子のはみ出し防止 */
}
.umasoku-pog-item:hover {
  background: #f5f9ff;
  box-shadow: var(--box-shadow);
}
.umasoku-pog-img {
  flex: 0 0 auto;
  width: 48px;
  height: 67px;
  object-fit: contain;     /* 表紙の縦横比を保持 */
  background: #fafafa;
}
.umasoku-pog-title {
  flex: 1 1 auto;
  min-width: 0;            /* line-clampを効かせるため必須 */
  font-size: 1.15rem;
  line-height: 1.35;
  color: #0d47a1;
  font-weight: 700;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* 競馬関連本グループの小見出し（2列をまたいで全幅に） */
.umasoku-pog-subhead {
  grid-column: 1 / -1;     /* グリッド全幅に渡す */
  margin: 14px 0 4px !important;
  padding: 4px 8px;
  font-size: 1.4rem;
  font-weight: 700;
  color: #fff;
  background: #0d47a1;
  border-radius: 3px;
}

/* ============================================================
   ④ うま速専用 Amazonアフィリエイト改善デザイン（画像大型化Ver）
   ============================================================ */

/* 全体コンテナ（はみ出し封じ込めをここに一本化） */
.umasoku-amazon-container {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
  padding: 5px;
}

/* 見出しヘッダー */
.umasoku-amazon-header {
  font-size: 1.4rem;
  font-weight: 700;
  color: #fff;
  background: #0d47a1;
  padding: 6px 10px;
  border-radius: 4px;
  margin-bottom: 4px;
}

/* 商品カード全体リンク */
a.umasoku-amazon-card {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 12px !important;
  background: #fffaef !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06) !important;
  transition: all 0.2s ease-in-out !important;
  width: 100% !important;
  height: auto !important;
  box-sizing: border-box !important;
}

a.umasoku-amazon-card:hover {
  background: #fff8e7 !important;
  border-color: #ffb74d !important;
  box-shadow: 0 5px 12px rgba(0,0,0,0.12) !important;
  transform: translateY(-1px);
}

/* 🖼️ 画像エリア：サイズを90pxにアップ */
.umasoku-amazon-imgbox {
  flex: 0 0 90px !important;
  height: 115px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid #eaeaea;
  padding: 4px;
  box-sizing: border-box;
}

.umasoku-amazon-imgbox img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  transition: transform 0.2s ease !important;
}

a.umasoku-amazon-card:hover .umasoku-amazon-imgbox img {
  transform: scale(1.04);
}

/* テキスト・情報エリア */
.umasoku-amazon-infobox {
  flex: 1 1 auto !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

/* 識別用バッジ */
.umasoku-amazon-badge {
  align-self: flex-start;
  font-size: 1.0rem !important;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 3px;
  margin-bottom: 6px;
  line-height: 1;
}
.badge-keiba { background: #e3f2fd; color: #0d47a1; }
.badge-idol { background: #fce4ec; color: #c2185b; }
.badge-featured { background: #ffeb3b; color: #e65100; border: 1px solid #ffb74d; }

/* 商品タイトル */
.umasoku-amazon-title {
  font-size: 1.3rem !important;
  line-height: 1.45 !important;
  color: #1565c0 !important;
  font-weight: 700;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 8px;
}

/* ボタン風パーツ */
.umasoku-amazon-btn {
  align-self: flex-start;
  font-size: 1.1rem !important;
  font-weight: 700;
  color: #e65100 !important;
  background: #fff3e0;
  border: 1px solid #ffcc80;
  padding: 3px 10px;
  border-radius: 4px;
  transition: all 0.2s;
}

a.umasoku-amazon-card:hover .umasoku-amazon-btn {
  background: #ff9800;
  color: #fff !important;
  border-color: #ff9800;
}


/* ============================================================
   ⑤ うま速専用：画像特化型大画面横スクロール・カルーセル
   ============================================================ */

/* 全体を包むコンテナ（はみ出し封じ込めをここに一本化） */
.umasoku-scroll-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;          /* ★保険：親がflex/gridの場合の自動最小幅も解除 */
  box-sizing: border-box !important;
  overflow-x: hidden !important;
  padding: 8px 4px !important;
  background: #fffaef !important;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  margin-bottom: 15px !important;
}

/* ヘッダー見出し */
.umasoku-scroll-header {
  font-size: 1.4rem;
  font-weight: 700;
  color: #fff;
  background: #e65100;
  padding: 6px 12px;
  border-radius: 4px;
  margin-bottom: 10px;
}

/* 🔄 横スクロール実行エリア（カルーセル本体はここだけスクロールさせる） */
.umasoku-scroll-container {
  display: flex !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;          /* ★flexの自動最小幅(min-width:auto)を解除。これが無いと中身の合計幅まで膨らみページ全体がはみ出す */
  overflow-x: auto !important;
  overflow-y: hidden !important;
  gap: 12px !important;
  padding: 4px 6px 12px 6px !important;
  box-sizing: border-box !important;
  -webkit-overflow-scrolling: touch !important;
  scroll-snap-type: x mandatory;
}

/* スクロールバー微調整 */
.umasoku-scroll-container::-webkit-scrollbar {
  height: 6px;
}
.umasoku-scroll-container::-webkit-scrollbar-thumb {
  background: #ffcc80;
  border-radius: 10px;
}
.umasoku-scroll-container::-webkit-scrollbar-track {
  background: #f5f5f5;
}

/* 各画像アイテム */
a.umasoku-scroll-item {
  flex: 0 0 160px !important;
  height: 220px !important;
  position: relative !important;
  display: block !important;
  background: #fff;
  border-radius: 6px !important;
  box-shadow: 0 3px 8px rgba(0,0,0,0.12) !important;
  border: 1px solid #e0e0e0 !important;
  box-sizing: border-box !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  scroll-snap-align: start;
}

a.umasoku-scroll-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 15px rgba(0,0,0,0.18) !important;
  border-color: #ff9800 !important;
}

/* 画像表示の最適化 */
.umasoku-scroll-imgbox {
  width: 100% !important;
  height: 100% !important;
  overflow: hidden;
  border-radius: 5px;
}

.umasoku-scroll-imgbox img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* おすすめ（featured）商品リボン */
.umasoku-scroll-ribbon {
  position: absolute;
  top: 6px;
  left: 6px;
  background: #ff1744;
  color: #fff;
  font-size: 1.0rem !important;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 3px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  z-index: 2;
}

/* ============================================================
   ⑥ 競合バグの根本治療（干渉の完全消去設定）
   ============================================================ */

/* カスタムコンテナ内の .boxContainer にのみピンポイント適用
   （サイト全体の .boxContainer 単体には干渉しない＝フッターを壊さない） */
.umasoku-scroll-wrapper .boxContainer,
.umasoku-amazon-container .boxContainer {
  display: block !important;
  height: auto !important;
  width: 100% !important;
}

/* 注意：#st-footermenubox への上書きは一切行わない（テーマ標準機能に委ねる）   */
/* 注意：html, body への overflow-x:hidden は使わない（固定フッターが消えるため） */