/* =========================================================
  Token（#index内で使う前提）
========================================================= */
#index {
  --ktora-gold: #c5a437;
  --ktora-ink: #222;
  --ktora-muted: #555;
  --ktora-bg: #f4f2ec;

  --ktora-card: #fff;
  --ktora-border: #e2e2e2;
  --ktora-shadow: 0 2px 10px rgba(0, 0, 0, .06);

  --ktora-radius: 14px;

  --ktora-btn: #f5b400;
  --ktora-btnText: #222;
}

/* =========================================================
  CTA（問い合わせ補助）
========================================================= */
.scenePick__bottomCta {
  margin: 20px 0 16px;
  padding: 16px 18px;
  background: #fffdf7;
  border: 1px solid rgba(0, 0, 0, .10);
  border-radius: var(--ktora-radius);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .06);

  display: flex;
  gap: 12px;
  justify-content: space-between;
  align-items: center;
}

.scenePick__bottomText {
  color: var(--ktora-ink);
  line-height: 1.6;
}

.scenePick__bottomText strong {
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .02em;
}

.scenePick__bottomBtns {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

.sceneBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 14px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 900;
  letter-spacing: .02em;
  white-space: nowrap;
}

.sceneBtn--primary {
  background: var(--ktora-btn);
  color: var(--ktora-btnText);
  box-shadow: 0 10px 22px rgba(245, 180, 0, .22);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}

@media (hover:hover) {
  .sceneBtn--primary:hover {
    transform: translateY(-1px);
    filter: brightness(1.02);
    box-shadow: 0 14px 26px rgba(245, 180, 0, .26);
  }
}

/* =========================================================
  仕様カード：見出し
========================================================= */
.spec-head {
  margin: 10px 0 10px;
}

.spec-title {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 900;
  color: var(--ktora-ink);
  letter-spacing: .02em;
}

.spec-lead {
  margin: 0;
  font-size: 13px;
  color: #666;
  line-height: 1.6;
}

/* =========================================================
  仕様カード：グリッド
========================================================= */
.item-detail-spec {
  margin: 10px 0 24px;
}

.spec-grid {
  display: grid;
  gap: 14px;
  /* カード間の見やすい余白 */
  grid-template-columns: 1fr;
}

@media (min-width:768px) {
  .spec-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* =========================================================
  仕様カード：本体
========================================================= */
.spec-card {
  position: relative;
  padding: 16px 16px 16px 56px;
  background: var(--ktora-card);
  border: 1px solid var(--ktora-border);
  border-radius: var(--ktora-radius);
  box-shadow: var(--ktora-shadow);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

@media (hover:hover) {
  .spec-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(0, 0, 0, .10);
    border-color: #d6d6d6;
  }
}

/* =========================================================
  仕様カード：アイコン（data-ico があるときだけ）
========================================================= */
.spec-card[data-ico]::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 16px;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: #f3f4f6;
  border: 1px solid #e0e0e0;
}

.spec-card[data-ico]::after {
  content: "";
  position: absolute;
  left: 16px;
  top: 16px;
  width: 30px;
  height: 30px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
  opacity: .95;
}

/* =========================================================
  仕様カード：テキスト
========================================================= */
.spec-key {
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .02em;
  margin-bottom: 6px;
  color: var(--ktora-ink);
}

.spec-val {
  font-size: 13px;
  line-height: 1.7;
  color: var(--ktora-muted);
}

/* =========================================================
  SP最適化
========================================================= */
@media (max-width:767px) {
  .scenePick__bottomCta {
    flex-direction: column;
    align-items: stretch;
  }

  .sceneBtn {
    width: 100%;
  }

  .spec-card {
    padding-left: 52px;
  }

  .spec-card[data-ico]::before,
  .spec-card[data-ico]::after {
    left: 12px;
    top: 12px;
  }
}

/* =========================================================
  アイコンSVG（既存を維持）
========================================================= */
.item-detail-spec .spec-card[data-ico="check"]::after {
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>\
<path d='M20 6L9 17l-5-5'/></svg>");
}

.item-detail-spec .spec-card[data-ico="invoice"]::after {
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>\
<path d='M6 2h9l3 3v17l-2-1-2 1-2-1-2 1-2-1-2 1-2-1-2 1V2z'/>\
<path d='M8 7h8'/><path d='M8 11h8'/><path d='M8 15h5'/>\
</svg>");
}

.item-detail-spec .spec-card[data-ico="wrap"]::after {
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>\
<path d='M20 7H4v14h16V7z'/><path d='M4 11h16'/>\
<path d='M12 7c0-2 1-3 2-3s2 1 2 3-1 3-2 3'/>\
<path d='M12 7c0-2-1-3-2-3S8 5 8 7s1 3 2 3'/>\
</svg>");
}

.item-detail-spec .spec-card[data-ico="bag"]::after {
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>\
<path d='M6 7h12l-1 14H7L6 7z'/>\
<path d='M9 7a3 3 0 0 1 6 0'/>\
</svg>");
}