/* SNS Size Simulator v1.0.0 — JIN:R埋め込み前提・モバイル375px基準 */
.snsim-root { margin: 1.5em 0; }
.snsim-root:empty { min-height: 460px; }
.snsim-box {
  border: 2px solid #1b1e23; border-radius: 12px; padding: 18px 16px;
  background: #fff; font-size: 15px; line-height: 1.6; color: #1b1e23;
  box-sizing: border-box; max-width: 640px; margin: 0 auto; font-family: inherit;
}
.snsim-box *, .snsim-box *::before, .snsim-box *::after { box-sizing: border-box; }
.snsim-title { font-weight: 700; font-size: 17px; letter-spacing: .02em; }
.snsim-pr { font-size: 11px; color: #8b929b; margin: 2px 0 12px; }
.snsim-label { font-weight: 700; font-size: 13px; margin: 12px 0 4px; }
.snsim-model-fixed { font-size: 14px; background: #f6f6f2; border-radius: 8px; padding: 8px 12px; margin-bottom: 4px; }

/* 検索式ドロップダウン */
.snsim-select { position: relative; }
.snsim-select-input {
  width: 100%; padding: 10px 12px; border: 1.5px solid #c9cdd3; border-radius: 8px;
  font-size: 15px; background: #fff; color: inherit;
}
.snsim-select-input:focus { outline: 2px solid #d9480f33; border-color: #d9480f; }
.snsim-select-list {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px);
  background: #fff; border: 1.5px solid #c9cdd3; border-radius: 8px;
  max-height: 260px; overflow-y: auto; box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
.snsim-select-head { font-size: 11px; font-weight: 700; color: #8b929b; padding: 8px 12px 2px; letter-spacing: .06em; }
.snsim-select-item { padding: 8px 12px; cursor: pointer; font-size: 14px; }
.snsim-select-item:hover { background: #fdf0e9; }
.snsim-select-empty { padding: 10px 12px; font-size: 13px; color: #8b929b; }
.snsim-kana { color: #8b929b; font-size: 12px; margin-left: 8px; }

/* タブ */
.snsim-tabs { display: flex; gap: 6px; margin-top: 14px; border-bottom: 2px solid #e4e4df; }
.snsim-tab {
  flex: 1; padding: 9px 4px; font-size: 14px; font-weight: 700; text-align: center;
  background: #f1f1ec; color: #5c636d; border: none; border-radius: 8px 8px 0 0; cursor: pointer;
}
.snsim-tab.snsim-active { background: #1b1e23; color: #fff; }

.snsim-pane { padding-top: 2px; }
.snsim-size {
  width: 100%; padding: 10px 12px; border: 1.5px solid #c9cdd3; border-radius: 8px;
  font-size: 15px; background: #fff; color: inherit;
}
.snsim-radios { display: flex; gap: 6px; flex-wrap: wrap; }
.snsim-radio {
  display: flex; align-items: center; gap: 5px; padding: 7px 12px;
  border: 1.5px solid #c9cdd3; border-radius: 99px; font-size: 13px; cursor: pointer;
}
.snsim-radio:has(input:checked) { border-color: #d9480f; background: #fdf0e9; font-weight: 700; }
.snsim-radio input { margin: 0; accent-color: #d9480f; }

.snsim-go {
  display: block; width: 100%; margin-top: 16px; padding: 13px;
  background: #d9480f; color: #fff; font-size: 16px; font-weight: 700;
  border: none; border-radius: 10px; cursor: pointer; letter-spacing: .04em;
}
.snsim-go:hover { background: #c23e0a; }

/* 結果 */
.snsim-error { margin-top: 12px; color: #c92a2a; font-weight: 700; font-size: 14px; }
.snsim-card { margin-top: 16px; border: 2px solid #d9480f; border-radius: 10px; padding: 14px 14px 16px; background: #fffdfb; }
.snsim-size-out { font-size: 15px; font-weight: 700; }
.snsim-size-out span { font-size: 30px; font-weight: 700; color: #d9480f; margin-left: 6px; font-feature-settings: "tnum"; }
.snsim-verdict { font-size: 15px; font-weight: 700; margin-top: 2px; }
.snsim-why-title { font-size: 12px; font-weight: 700; color: #8b929b; margin-top: 14px; letter-spacing: .06em; }

/* 計算ステップのチップ */
.snsim-steps { display: flex; flex-wrap: wrap; gap: 5px; align-items: stretch; margin-top: 8px; }
.snsim-step { background: #f6f6f2; border-radius: 8px; padding: 5px 10px; text-align: center; min-width: 58px; }
.snsim-step-label { display: block; font-size: 10px; color: #8b929b; white-space: nowrap; }
.snsim-step-val { display: block; font-size: 14px; font-weight: 700; font-feature-settings: "tnum"; }
.snsim-step-plus { color: #d9480f; }
.snsim-step-minus { color: #1a6fc4; }
.snsim-step-zero { color: #8b929b; }
.snsim-step-arrow { align-self: center; color: #c9cdd3; font-weight: 700; font-size: 13px; }
.snsim-step-final { background: #1b1e23; }
.snsim-step-final .snsim-step-label { color: #9aa1ab; }
.snsim-step-final .snsim-step-val { color: #fff; }

/* 作りの傾向メーター */
.snsim-meter { margin-top: 16px; }
.snsim-meter-title { font-size: 12px; font-weight: 700; color: #3d434b; }
.snsim-meter-track {
  position: relative; height: 8px; border-radius: 99px; margin: 26px 8px 5px;
  background: linear-gradient(90deg, #a8c6e8 0%, #e4e4df 50%, #f0a284 100%);
}
.snsim-meter-dot {
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  width: 16px; height: 16px; border-radius: 50%; background: #d9480f;
  border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.3);
}
.snsim-meter-bubble {
  position: absolute; bottom: 13px; transform: translateX(-50%);
  background: #1b1e23; color: #fff; font-size: 11px; font-weight: 700;
  padding: 2px 9px; border-radius: 99px; white-space: nowrap;
}
.snsim-meter-scale { display: flex; justify-content: space-between; font-size: 11px; color: #8b929b; padding: 0 2px; }

.snsim-note { margin-top: 10px; font-size: 13px; background: #f6f6f2; border-radius: 8px; padding: 8px 10px; }
.snsim-cta { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.snsim-btn {
  display: block; text-align: center; padding: 12px; border-radius: 8px;
  font-weight: 700; font-size: 15px; text-decoration: none; color: #fff !important;
}
.snsim-btn-rakuten { background: #bf0000; }
.snsim-btn-rakuten:hover { background: #a30000; }
.snsim-btn-amazon { background: #232f3e; }
.snsim-btn-amazon:hover { background: #131a22; }
.snsim-article { margin-top: 10px; font-size: 13px; }
.snsim-article a { color: #d9480f; font-weight: 700; }

@media (min-width: 480px) {
  .snsim-cta { flex-direction: row; }
  .snsim-btn { flex: 1; }
}

/* 記事内アンカーボタン（v1.1.2・立体プッシュ型） */
.snsim-anchor-wrap { margin: 1.4em 0; }
.snsim-anchor-btn {
  display: block; position: relative; width: 100%; max-width: 640px; box-sizing: border-box;
  background: linear-gradient(180deg, #ef5a19 0%, #d9480f 100%);
  color: #fff !important; text-decoration: none; text-align: center;
  padding: 11px 52px 12px 52px; border-radius: 14px; margin: 0 auto; font-family: inherit;
  box-shadow: 0 4px 0 #a63708, 0 8px 16px rgba(217, 72, 15, .28);
  transition: transform .12s ease, box-shadow .12s ease;
}
.snsim-anchor-sub { display: block; font-size: 11px; font-weight: 700; opacity: .92; letter-spacing: .05em; }
.snsim-anchor-main { display: block; font-size: 17px; font-weight: 700; letter-spacing: .04em; line-height: 1.4; }
.snsim-anchor-ico {
  position: absolute; right: 14px; top: 50%;
  width: 28px; height: 28px; border-radius: 50%; background: #fff; color: #d9480f;
  font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center;
  animation: snsim-bounce 2s ease-in-out infinite;
}
@keyframes snsim-bounce {
  0%, 100% { transform: translateY(-50%); }
  50% { transform: translateY(calc(-50% + 4px)); }
}
@media (prefers-reduced-motion: reduce) { .snsim-anchor-ico { animation: none; transform: translateY(-50%); } }
.snsim-anchor-btn:hover { transform: translateY(2px); box-shadow: 0 2px 0 #a63708, 0 5px 10px rgba(217, 72, 15, .25); }
.snsim-anchor-btn:active { transform: translateY(4px); box-shadow: 0 0 0 #a63708, 0 2px 6px rgba(217, 72, 15, .2); }

/* 最安情報リンク（v1.2.0） */
.snsim-cheapest { margin-top: 8px; }
.snsim-cheapest-btn {
  display: block; text-align: center; padding: 11px; border-radius: 8px;
  border: 2px solid #d9480f; color: #d9480f !important; background: #fff;
  font-weight: 700; font-size: 14px; text-decoration: none; cursor: pointer;
}
.snsim-cheapest-btn:hover { background: #fdf0e9; }