/* スピカ デジコン一覧 v1.0.0
   デザイン基準：配色70:25:5 / 本文16px・行間1.8 / タップ44px以上 / ease-out 0.3s
   カードは重要度で大きさを変える（イチオシは横2つ分） */

.spica-dg-wrap{
  margin: 32px 0;
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif;
  color: #3a3358;
  line-height: 1.8;
  box-sizing: border-box;
}
.spica-dg-wrap *{ box-sizing: border-box; }

.spica-dg-wrap.is-sky{
  padding: 44px 20px;
  border-radius: 24px;
  background:
    radial-gradient(120% 55% at 18% -8%, rgba(140,105,220,.30) 0%, transparent 55%),
    radial-gradient(110% 50% at 88% -2%, rgba(247,180,230,.18) 0%, transparent 50%),
    linear-gradient(176deg,#3b2c6e 0%,#2b2050 25%,#211a3d 60%,#161129 100%);
}

.spica-dg-wrap .dg-lead{
  max-width: 660px;
  margin: 0 auto 30px;
  text-align: center;
  font-size: 16px;
  line-height: 1.8;
  color: #5b4a7d;
}
.spica-dg-wrap.is-sky .dg-lead{ color: rgba(255,255,255,.9); }

.spica-dg-wrap .dg-empty{
  text-align: center;
  color: #8a80a8;
  font-size: 15px;
  padding: 40px 0;
}

/* ── グリッド ── */
.spica-dg-wrap .dg-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
  gap: 26px 22px;
  max-width: 1040px;
  margin: 0 auto;
}

/* ── カード ── */
.spica-dg-wrap .dg-card{
  display: flex;
  flex-direction: column;
  background: #fdfbf6;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 8px 26px rgba(34,26,58,.10), 0 0 0 1px rgba(231,207,160,.45);
  transition: transform .3s ease-out, box-shadow .3s ease-out;
}
.spica-dg-wrap .dg-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(34,26,58,.16), 0 0 0 1px rgba(231,207,160,.7);
}
.spica-dg-wrap .dg-card.is-soldout{ opacity: .72; }

/* イチオシは横2つ分＋画像とテキストを左右に並べる（パソコン表示のみ） */
@media (min-width: 800px){
  .spica-dg-wrap .dg-card.is-featured{
    grid-column: span 2;
    flex-direction: row;
  }
  .spica-dg-wrap .dg-card.is-featured .dg-thumb{
    flex: 0 0 46%;
    aspect-ratio: auto;
  }
  .spica-dg-wrap .dg-card.is-featured .dg-body{
    justify-content: center;
    padding: 26px 26px 26px 24px;
  }
  .spica-dg-wrap .dg-card.is-featured .dg-title{ font-size: 21px; }
  .spica-dg-wrap .dg-card.is-featured .dg-desc{ -webkit-line-clamp: 4; }
  .spica-dg-wrap .dg-card.is-featured .dg-price{ margin-top: 4px; }
}

/* ── サムネイル ── */
.spica-dg-wrap .dg-thumb{
  position: relative;
  aspect-ratio: 16 / 10;
  background: #efe8fb;
  overflow: hidden;
}
.spica-dg-wrap .dg-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.spica-dg-wrap .dg-noimg{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(150deg,#3b2c6e,#221a3d);
}
.spica-dg-wrap .dg-noimg span{
  color: #e7cfa0;
  font-size: 30px;
  opacity: .85;
}

.spica-dg-wrap .dg-badge{
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  color: #3a2c12;
  background: linear-gradient(135deg,#f6e9bd 0%,#d3ab5f 52%,#efdcae 100%);
  box-shadow: 0 4px 12px rgba(185,143,69,.4);
}
.spica-dg-wrap .dg-soldout{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(26,20,48,.55);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .1em;
}

/* ── 本文 ── */
.spica-dg-wrap .dg-body{
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 20px 20px 22px;
}

.spica-dg-wrap .dg-genre{
  display: inline-block;
  align-self: flex-start;
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 12.5px;
  letter-spacing: .16em;
  color: #956e19;
  margin-bottom: 6px;
}

.spica-dg-wrap .dg-title{
  font-family: "Kaisei Decol", "Yu Mincho", serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.55;
  letter-spacing: .04em;
  color: #5b4a7d;
  margin: 0 0 10px;
  padding: 0;
  border: none;
  background: none;
}

.spica-dg-wrap .dg-desc{
  font-size: 14.5px;
  line-height: 1.8;
  color: #6f6790;
  margin: 0 0 14px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.spica-dg-wrap .dg-price{
  margin: auto 0 14px;
  font-size: 13px;
  color: #8a80a8;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.spica-dg-wrap .dg-price s{ opacity: .7; }
.spica-dg-wrap .dg-price b{
  font-family: "Cormorant Garamond", serif;
  font-weight: 600;
  font-size: 26px;
  color: #3a3358;
  letter-spacing: .02em;
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum";
}

.spica-dg-wrap .dg-btn{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 20px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15.5px;
  letter-spacing: .04em;
  text-align: center;
  color: #3a2c12 !important;
  text-decoration: none !important;
  background: linear-gradient(135deg,#f6e9bd 0%,#d3ab5f 52%,#efdcae 100%);
  box-shadow: 0 8px 20px rgba(185,143,69,.35), inset 0 1px 2px rgba(255,255,255,.7);
  transition: transform .3s ease-out, box-shadow .3s ease-out;
}
.spica-dg-wrap .dg-btn:hover,
.spica-dg-wrap .dg-btn:focus-visible{
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(185,143,69,.48), inset 0 1px 2px rgba(255,255,255,.8);
  color: #3a2c12 !important;
}
.spica-dg-wrap .dg-btn.is-disabled{
  background: #e6e0f0;
  color: #9a92b4 !important;
  box-shadow: none;
  cursor: default;
  font-weight: 500;
}

@media (max-width: 560px){
  .spica-dg-wrap.is-sky{ padding: 30px 12px; border-radius: 18px; }
  .spica-dg-wrap .dg-grid{
    grid-template-columns: 1fr;
    gap: 16px;
    max-width: none;   /* スマホでは幅を制限しない（画面いっぱいに使う） */
  }
  .spica-dg-wrap .dg-title{ font-size: 17.5px; }
}

/* ============================================================
   メンバーシップCTA（天職デジコンと同じデザイン）
   ============================================================ */
.spica-dg-wrap .dg-cta{
  text-align: center;
  margin-top: 34px;
}

.spica-dg-wrap .dg-mem{
  position: relative;
  max-width: 520px;
  margin: 0 auto;
  padding: 24px 26px;
  text-align: left;
  background: #fdfcff;
  border: 2px solid #b9a0e0;
  border-radius: 14px;
  box-shadow: 0 8px 22px rgba(120,70,160,.14);
}

.spica-dg-wrap .dg-mem-logo{
  display: block;
  height: 34px;
  width: auto;
  margin-bottom: 10px;
}

.spica-dg-wrap .dg-mem-about{
  font-size: 12px;
  color: #8d84a6;
  line-height: 1.8;
  margin: 0 0 14px;
}

.spica-dg-wrap .dg-mem-t{
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 16.5px;
  font-weight: 800;
  color: #4a3d75;
  margin-bottom: 8px;
}

.spica-dg-wrap .dg-mem-lead{
  font-size: 13px;
  color: #6a5f86;
  line-height: 1.9;
  margin: 0 0 12px;
}

.spica-dg-wrap .dg-mem-list{
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
}
.spica-dg-wrap .dg-mem-list li{
  font-size: 13.5px;
  color: #5a4f7e;
  font-weight: 600;
  padding: 5px 0;
  line-height: 1.8;
}

.spica-dg-wrap .dg-mem-price{
  font-size: 13px;
  color: #6a5f86;
  margin: 4px 0 6px;
}

.spica-dg-wrap .dg-mem-foot{
  padding-right: 128px;
}

.spica-dg-wrap .dg-mem-btn{
  display: inline-block;
  text-align: center;
  min-height: 48px;
  padding: 13px 30px;
  border-radius: 12px;
  font-size: 15px;
  color: #fff !important;
  font-weight: 800;
  text-decoration: none !important;
  background: #8f7ce0;
  box-shadow: 0 6px 16px rgba(120,70,160,.3);
  transition: background .3s ease-out;
}
.spica-dg-wrap .dg-mem-btn:hover,
.spica-dg-wrap .dg-mem-btn:focus-visible{
  background: #7f6ad4;
  color: #fff !important;
}

.spica-dg-wrap .dg-mem-spica{
  position: absolute;
  right: 30px;
  bottom: 14px;
  width: 104px;
  height: auto;
}

/* ============================================================
   [spica_hub] の初期カード用（バッジを画像に重ねず本文の先頭に置く）
   ============================================================ */
.spica-dg-wrap .dg-badgerow{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.spica-dg-wrap .dg-badgerow .dg-genre{ margin-bottom: 0; }
.spica-dg-wrap .dg-badgerow .dg-badge{
  position: static;
  box-shadow: 0 3px 9px rgba(185,143,69,.35);
}
/* 無料コンテンツ：スピカードのパステル紫 */
.spica-dg-wrap .dg-badge.free{
  color: #fff;
  background: linear-gradient(135deg,#b9a5e0,#8d76b5);
  box-shadow: 0 3px 9px rgba(141,118,181,.32);
}
.spica-dg-wrap .dg-btn.free{
  color: #fff !important;
  background: linear-gradient(135deg,#b9a5e0,#8d76b5);
  box-shadow: 0 8px 20px rgba(141,118,181,.3);
}
/* 画像は見切れないよう、カード画像の比率に合わせる */
.spica-dg-wrap .dg-thumb{ aspect-ratio: 1280/670; }

/* ============================================================
   メンバーシップCTA：天職ホロスコープと同じ見た目に揃える
   （天職の実際の適用値をブラウザで測って一致させています）
     パソコン … 枠520px/padding24-26 ロゴ122 スピカ122(右30・下14) foot142 ボタン15px
     スマホ  … padding18-16 ロゴ122 スピカ72(右8・下8) foot78 ボタン15px
   ============================================================ */
.spica-dg-wrap .dg-mem{
  /* 天職と同じ見た目にするため、幅の計算方法もそろえる
     （padding・枠線を幅に含めない＝実寸576pxになる） */
  box-sizing: content-box;
  max-width: 520px;
  padding: 24px 26px;
}
.spica-dg-wrap .dg-mem-logo{
  height: auto;
  width: 122px;
  max-width: 60%;
  object-fit: contain;
  margin-bottom: 10px;
}
.spica-dg-wrap .dg-mem-btn{
  background: linear-gradient(95deg,#9a7ce0 0%,#8f7ce0 50%,#7f8fe8 100%);
  white-space: nowrap;
  line-height: 1.4;
  padding: 13px 34px;
  font-size: 15px;
}
.spica-dg-wrap .dg-mem-spica{
  width: 122px;
  right: 30px;
  bottom: 14px;
}
.spica-dg-wrap .dg-mem-foot{ padding-right: 158px; }

@media (max-width: 560px){
  .spica-dg-wrap .dg-mem{
    padding: 18px 16px;
    max-width: none;   /* スマホでは幅を制限しない */
    box-sizing: border-box;
  }
  .spica-dg-wrap .dg-mem-spica{
    width: 72px;
    right: 8px;
    bottom: 8px;
  }
  .spica-dg-wrap .dg-mem-foot{ padding-right: 78px; }
}

/* 特典に付けたリンク（クリックできると分かるよう下線をつける） */
.spica-dg-wrap .dg-perk-link{
  color: #6a4fb5 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color .3s ease-out;
}
.spica-dg-wrap .dg-perk-link:hover,
.spica-dg-wrap .dg-perk-link:focus-visible{
  color: #4a3d75 !important;
}

/* ============================================================
   セール表示（元の値段に取り消し線／期限をそえる）
   ============================================================ */
.spica-dg-wrap .dg-price s{
  color: #9a92b4;
  font-size: 14px;
  text-decoration-thickness: 1px;
}
/* セール価格（取り消し線のうしろ）だけ赤みで目立たせる */
.spica-dg-wrap .dg-price s ~ b{ color: #c2405a; }
.spica-dg-wrap .dg-until{
  font-size: 12px;
  font-weight: 700;
  color: #c2405a;
  background: #fdeef1;
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}
/* セール中バッジ */
.spica-dg-wrap .dg-badge.sale{
  color: #fff;
  background: linear-gradient(135deg,#e2748c 0%,#c2405a 100%);
  box-shadow: 0 3px 9px rgba(194,64,90,.32);
}

/* 金額の上に出す注記（mondメンバーシップ限定 など） */
.spica-dg-wrap .dg-note{
  margin: auto 0 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: #6a4fb5;
  background: #f3eefc;
  border-radius: 8px;
  padding: 5px 10px;
  display: inline-block;
  align-self: flex-start;
}
/* 注記があるときは価格の上マージンを詰める */
.spica-dg-wrap .dg-note + .dg-price{ margin-top: 0; }