/* ==========================================================
   おくやみ撰果 スマホサイト共通CSS
   headタグ設定に貼り付けてください
   ========================================================== */

/* ---------- ブランドカラー変数 ---------- */
:root {
  --brand-navy: #0f2040;
  --brand-gold: #c9a35c;
  --brand-bg: #f7f5f1;
}

/* ---------- 基本フォント ---------- */
body {
  font-family:
    "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo,
    sans-serif;
  color: #333;
  -webkit-text-size-adjust: 100%;
}

/* ---------- ヘッダーロゴ帯 ---------- */
#sps-header {
  background: var(--brand-navy) !important;
}
#sps-header .sps-logo a img {
  max-height: 44px;
}

/* ---------- グローバルナビ（アイコン4つ） ---------- */
#sps-gnav {
  background: var(--brand-navy) !important;
}
#sps-gnav li a {
  color: #fff !important;
  font-size: 10px;
}
#sps-gnav li a img {
  filter: brightness(0) invert(1);
}

/* ---------- 見出し（ランキング・おすすめ等） ---------- */
.sps-section-title,
.sps-ranking h2,
.sps-pickup h2,
.sps-newItem h2,
.sps-group h2 {
  background: none !important;
  border-bottom: 2px solid var(--brand-gold) !important;
  color: var(--brand-navy) !important;
  font-family: "Noto Serif JP", "游明朝", serif;
  padding: 0 0 6px !important;
  margin: 16px 0 12px !important;
  font-size: 15px !important;
  letter-spacing: 0.05em;
}

/* ---------- 商品カード ---------- */
.sps-item-name a {
  color: var(--brand-navy) !important;
}
.sps-item-price,
.sps-item-price-num {
  color: #c00 !important;
}

/* ---------- ボタン共通 ---------- */
.sps-btn,
.sps-cart-btn,
input[type="submit"] {
  background: var(--brand-navy) !important;
  color: #fff !important;
  border-radius: 3px !important;
  border: none !important;
}

/* ---------- フリーエリア内ulのマージン上書き ---------- */
/* PCと同様の .freeArea2 .free-contents ul 問題に対応 */
.sps-free ul,
.sps-freearea ul,
[class*="free"] ul {
  margin: 0 !important;
  padding: 0;
  list-style: none;
}
[class*="free"] ul li {
  list-style-type: none !important;
}

/* ---------- 初めての方へ（スマホ版） ---------- */
.smp-first {
  background: #fff;
  padding: 20px 16px;
  border-bottom: 1px solid #e5e0d5;
}
.smp-first-en {
  font-size: 10px;
  letter-spacing: 0.15em;
  color: var(--brand-gold);
  text-align: center;
  display: block;
  margin: 0 0 4px;
}
.smp-first-title {
  font-size: 15px;
  font-weight: bold;
  color: var(--brand-navy);
  font-family: "Noto Serif JP", "游明朝", serif;
  text-align: center;
  margin: 0 0 14px;
}
.smp-first-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0 !important;
  padding: 0;
  list-style: none;
}
.smp-first-grid li {
  list-style-type: none !important;
}
.smp-first-grid li a {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #e5e0d5;
  border-radius: 4px;
  padding: 10px 12px;
  text-decoration: none;
  background: var(--brand-bg);
}
.smp-first-grid li a:active {
  border-color: var(--brand-gold);
  background: #fff;
}
.smp-first-ico {
  display: block;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.smp-first-ico--manner {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f2040' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2c-3 3-3 6 0 9c3-3 3-6 0-9z'/%3E%3Cpath d='M12 11v9'/%3E%3Cpath d='M8 22h8'/%3E%3C/svg%3E");
}
.smp-first-ico--noshi {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f2040' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='1'/%3E%3Cpath d='M3 8l9 6l9-6'/%3E%3C/svg%3E");
}
.smp-first-ico--delivery {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f2040' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='7' width='14' height='10'/%3E%3Cpath d='M15 10h4l3 3v4h-7z'/%3E%3Ccircle cx='6' cy='19' r='1.6'/%3E%3Ccircle cx='17.5' cy='19' r='1.6'/%3E%3C/svg%3E");
}
.smp-first-ico--faq {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f2040' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.5 9.5a2.5 2.5 0 1 1 3.5 2.3c-1 0.5-1.5 1-1.5 2.2'/%3E%3Ccircle cx='12' cy='17' r='0.4' fill='%230f2040'/%3E%3C/svg%3E");
}
.smp-first-lbl {
  font-size: 12px;
  color: #0f2040;
  line-height: 1.3;
}

/* ---------- ご予算から選ぶ（スマホ版） ---------- */
.smp-section {
  padding: 20px 16px;
  border-bottom: 1px solid #e5e0d5;
}
.smp-section-step {
  font-size: 10px;
  color: var(--brand-gold);
  letter-spacing: 0.1em;
  display: block;
  margin: 0 0 2px;
}
.smp-section-title {
  font-size: 14px;
  font-weight: bold;
  color: var(--brand-navy);
  border-bottom: 1px solid var(--brand-gold);
  padding: 0 0 6px;
  margin: 0 0 12px;
}
.smp-budget-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0 !important;
  padding: 0;
  list-style: none;
}
.smp-budget-grid li {
  list-style-type: none !important;
}
.smp-budget-grid li a {
  display: block !important;
  background: var(--brand-bg);
  border: 1px solid #e5e0d5;
  border-radius: 3px;
  padding: 10px 6px;
  font-size: 11px;
  color: var(--brand-navy);
  text-align: center;
  text-decoration: none;
  line-height: 1.4;
}
.smp-budget-grid li a:active {
  border-color: var(--brand-gold);
  background: #fff;
}

/* ---------- 用途から選ぶ（スマホ版） ---------- */
.smp-occasion-list {
  margin: 0 !important;
  padding: 0;
  list-style: none;
}
.smp-occasion-list li {
  list-style-type: none !important;
  border-bottom: 1px dotted #e0dccf;
}
.smp-occasion-list li:last-child {
  border-bottom: none;
}
.smp-occasion-list li a {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  padding: 12px 4px;
  font-size: 13px;
  color: #333;
  text-decoration: none;
}
.smp-occasion-list li a::after {
  content: "›";
  color: var(--brand-gold);
  font-size: 16px;
  flex: 0 0 auto;
}

/* ---------- 商品内容で選ぶ（スマホ版） ---------- */
.smp-content-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0 !important;
  padding: 0;
  list-style: none;
}
.smp-content-grid li {
  list-style-type: none !important;
}
.smp-content-grid li a {
  display: flex !important;
  align-items: center;
  gap: 8px;
  background: var(--brand-bg);
  border: 1px solid #e5e0d5;
  border-radius: 3px;
  padding: 10px 10px;
  font-size: 12px;
  color: var(--brand-navy);
  text-decoration: none;
}
.smp-content-grid li a:active {
  border-color: var(--brand-gold);
  background: #fff;
}
.smp-content-ico {
  display: block;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.smp-content-ico--fruit {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f2040' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 8c-4 0-7 3-7 6.5S8 21 12 21s7-3 7-6.5S16 8 12 8z'/%3E%3Cpath d='M12 8c0-3 1.5-5 3.5-5'/%3E%3C/svg%3E");
}
.smp-content-ico--can {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f2040' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='3' width='14' height='18' rx='2'/%3E%3Cpath d='M9 7h6M9 11h6M9 15h4'/%3E%3C/svg%3E");
}

/* ---------- 当店が選ばれる理由（スマホ版） ---------- */
.smp-reason-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0 !important;
  padding: 0;
  list-style: none;
}
.smp-reason-grid li {
  list-style-type: none !important;
  border: 1px solid #e5e0d5;
  border-radius: 4px;
  padding: 14px 10px;
  text-align: center;
  background: #fff;
}
.smp-reason-ico {
  display: block;
  width: 32px;
  height: 32px;
  margin: 0 auto 8px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.smp-reason-title {
  font-size: 12px;
  font-weight: bold;
  color: var(--brand-navy);
  display: block;
  margin: 0 0 4px;
  line-height: 1.4;
}
.smp-reason-desc {
  font-size: 10px;
  color: #5a5247;
  line-height: 1.6;
  display: block;
}
.smp-reason-ico--quality {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9a35c' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/%3E%3C/svg%3E");
}
.smp-reason-ico--select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9a35c' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 8c-4 0-7 3-7 6.5S8 21 12 21s7-3 7-6.5S16 8 12 8z'/%3E%3Cpath d='M12 8c0-3 1.5-5 3.5-5'/%3E%3C/svg%3E");
}
.smp-reason-ico--safe {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9a35c' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E");
}
.smp-reason-ico--wrap {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9a35c' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='9' width='18' height='11'/%3E%3Cpath d='M3 9V6h18v3'/%3E%3Cpath d='M12 6v14'/%3E%3Cpath d='M12 6c-1.5-3-5-3-5 0c0 1.2 2 1.5 5 0z'/%3E%3Cpath d='M12 6c1.5-3 5-3 5 0c0 1.2-2 1.5-5 0z'/%3E%3C/svg%3E");
}

/* ---------- Q&Aバナー（スマホ版） ---------- */
.smp-qa {
  background: var(--brand-navy);
  border-radius: 4px;
  padding: 18px 16px;
  text-align: center;
}
.smp-qa-title {
  font-size: 14px;
  font-weight: bold;
  color: #fff;
  margin: 0 0 6px;
}
.smp-qa-text {
  font-size: 11px;
  color: #cfc6b8;
  margin: 0 0 14px;
  line-height: 1.7;
}
.smp-qa-btn {
  display: inline-block;
  background: var(--brand-gold);
  color: var(--brand-navy) !important;
  font-weight: bold;
  font-size: 13px;
  padding: 10px 28px;
  border-radius: 3px;
  text-decoration: none;
}