:root{
    --plum:#5b4a7d; --gold:#cdab6e; --gold-deep:#956e19; --ink:#3a3358;
    --paper:#fbf7ff; --paper2:#f3ecfb;
  }
  .spica-hub *{box-sizing:border-box;}
  
  
  .spica-hub a{color:inherit;text-decoration:none;}
  .spica-hub img{max-width:100%;display:block;}

  /* ヘッダー（夜空） */
  .hub-hero{position:relative;overflow:hidden;color:#fff;text-align:center;padding:64px 22px 58px;
    background:
      radial-gradient(120% 55% at 18% -8%, rgba(140,105,220,.32) 0%, transparent 55%),
      radial-gradient(110% 50% at 88% -2%, rgba(247,180,230,.20) 0%, transparent 50%),
      linear-gradient(176deg,#3b2c6e 0%,#2b2050 25%,#211a3d 60%,#161129 100%);}
  /* 星：小さな光の粒 */
  .hub-hero .stars b{position:absolute;border-radius:50%;
    background:radial-gradient(circle,#fff 0%,rgba(255,255,255,.7) 45%,transparent 72%);
    opacity:var(--b,.2);animation:hubTwd 4s infinite ease-in-out;}
  @keyframes hubTwd{0%,100%{opacity:var(--b,.2);transform:scale(1);}50%{opacity:var(--p,.9);transform:scale(1.4);}}
  /* 星：きらめく十字星 */
  .hub-hero .stars i{position:absolute;color:#fff;opacity:0;font-style:normal;
    text-shadow:0 0 6px rgba(255,255,255,.95),0 0 16px rgba(205,182,240,.85),0 0 30px rgba(231,207,160,.45);
    animation:hubTw 4.5s infinite ease-in-out;}
  @keyframes hubTw{0%,100%{opacity:.12;transform:scale(.75) rotate(0deg);}50%{opacity:.95;transform:scale(1.18) rotate(18deg);}}
  @media (prefers-reduced-motion: reduce){
    .hub-hero .stars b,.hub-hero .stars i{animation:none;opacity:.55;}
  }
  .hub-hero .eyebrow{font-family:"Cormorant Garamond",serif;font-style:italic;letter-spacing:.3em;color:#e7cfa0;font-size:13px;margin-bottom:16px;position:relative;}
  .hub-hero h1{font-family:"Kaisei Decol",serif;font-weight:700;font-size:clamp(24px,5.4vw,34px);letter-spacing:.06em;line-height:1.5;position:relative;}
  .hub-hero p{margin-top:16px;font-size:14.5px;opacity:.9;max-width:540px;margin-inline:auto;position:relative;}

  /* カテゴリチップ（絞り込み風・見た目のみ） */
  .hub-nav{position:sticky;top:0;z-index:20;background:rgba(251,247,255,.92);backdrop-filter:blur(8px);
    border-bottom:1px solid #eadffb;padding:14px 16px;text-align:center;}
  .hub-nav a{display:inline-block;margin:4px 5px;padding:7px 16px;border-radius:999px;font-size:13px;font-weight:700;
    color:var(--plum);background:#fff;border:1px solid #e3d7f5;transition:all .3s ease-out;}
  .hub-nav a:hover{background:var(--plum);color:#fff;border-color:var(--plum);}
.spica-hub section{padding:52px 20px;}
  .wrap{max-width:1040px;margin:0 auto;}
  .sec-head{text-align:center;margin-bottom:34px;}
  .sec-head .k{font-family:"Cormorant Garamond",serif;font-style:italic;letter-spacing:.22em;color:var(--gold-deep);font-size:13px;display:block;margin-bottom:8px;}
  .sec-head h2{font-family:"Kaisei Decol",serif;color:var(--plum);font-size:clamp(21px,4.6vw,27px);letter-spacing:.05em;}
  .sec-head p{margin-top:10px;color:#6b6385;font-size:14px;}

  .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:24px 20px;}

  .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;}
  .card:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(34,26,58,.16),0 0 0 1px rgba(231,207,160,.7);}
  .thumb{position:relative;aspect-ratio:1280/670;display:flex;align-items:center;justify-content:center;
    background:linear-gradient(150deg,#3b2c6e,#221a3d);}
  .thumb span{color:#e7cfa0;font-size:30px;opacity:.85;}
  .thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
  .thumb.love{background:linear-gradient(150deg,#6b3a68,#2c1d3f);}
  .thumb.back{background:linear-gradient(150deg,#3a3a7a,#1d1636);}
  .thumb.luck{background:linear-gradient(150deg,#7a5a2a,#2a2013);}
  .thumb.work{background:linear-gradient(150deg,#2a5a5a,#132a2a);}
  /* バッジは画像に重ねず、本文の先頭に置く（画像のタイトル文字を隠さないため） */
  .badgerow{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap;}
  .badge{display:inline-block;padding:4px 13px;border-radius:999px;font-size:11.5px;font-weight:700;letter-spacing:.05em;color:#3a2c12;
    background:linear-gradient(135deg,#f6e9bd,#d3ab5f 52%,#efdcae);box-shadow:0 3px 9px rgba(185,143,69,.35);}
  .badge.free{color:#fff;background:linear-gradient(135deg,#b9a5e0,#8d76b5);box-shadow:0 3px 9px rgba(141,118,181,.32);}
  .
  .genre{align-self:flex-start;font-family:"Cormorant Garamond",serif;font-style:italic;font-size:12px;letter-spacing:.14em;color:var(--gold-deep);margin-bottom:6px;}
  .card h3{font-family:"Kaisei Decol",serif;font-weight:700;font-size:17.5px;line-height:1.55;letter-spacing:.03em;color:var(--plum);margin-bottom:9px;}
  .card .desc{font-size:14px;line-height:1.8;color:#6f6790;margin-bottom:14px;flex:1;}
  .price{margin-bottom:13px;font-size:12.5px;color:#8a80a8;display:flex;align-items:baseline;gap:7px;}
  .price s{opacity:.7;}
  .price b{font-family:"Cormorant Garamond",serif;font-weight:600;font-size:24px;color:var(--ink);font-variant-numeric:lining-nums;}
  .price .freetxt{font-family:"Kaisei Decol",serif;font-size:19px;color:#8d76b5;}
  .btn{display:flex;align-items:center;justify-content:center;min-height:46px;padding:11px 18px;border-radius:999px;
    font-weight:700;font-size:15px;letter-spacing:.03em;color:#3a2c12 !important;
    background:linear-gradient(135deg,#f6e9bd,#d3ab5f 52%,#efdcae);
    box-shadow:0 8px 20px rgba(185,143,69,.35),inset 0 1px 2px rgba(255,255,255,.7);transition:transform .3s ease-out;}
  .btn:hover{transform:translateY(-2px);}
  .btn.free{color:#fff !important;background:linear-gradient(135deg,#b9a5e0,#8d76b5);box-shadow:0 8px 20px rgba(141,118,181,.3);}
  .btn small{font-size:11px;font-weight:500;opacity:.8;margin-left:6px;}

  /* 無料セクションは淡い背景で区別 */
  .sec-free{background:#fff;}
  .sec-love{background:linear-gradient(180deg,#fff5fa,#fdeef6);}
  .sec-paid{background:var(--paper2);}

  /* mondメンバーCTA（天職デジコンと同じ完全版） */
  .mem-sec{background:var(--paper);padding:56px 20px 52px;}
  .mem-sec .sec-head{margin-bottom:24px;}
  .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);}
  .mem-logo{display:block;height:34px;width:auto;margin-bottom:10px;}
  .mem-about{font-size:12px;color:#8d84a6;line-height:1.8;margin-bottom:14px;}
  .mem-t{font-size:16.5px;font-weight:800;color:#4a3d75;margin-bottom:8px;}
  .mem-lead{font-size:13px;color:#6a5f86;line-height:1.9;margin-bottom:12px;}
  .mem ul{list-style:none;margin-bottom:14px;}
  .mem li{font-size:13.5px;color:#5a4f7e;font-weight:600;padding:5px 0;}
  .mem-price{font-size:13px;color:#6a5f86;margin-bottom:10px;}
  .mem-foot{padding-right:128px;}
  .mem-btn{display:inline-block;min-height:48px;line-height:22px;padding:13px 30px;border-radius:12px;font-size:15px;color:#fff !important;font-weight:800;background:#8f7ce0;box-shadow:0 6px 16px rgba(120,70,160,.3);transition:background .3s ease-out;}
  .mem-btn:hover{background:#7f6ad4;}
  .mem-spica{position:absolute;right:30px;bottom:14px;width:104px;height:auto;}
  @media(max-width:560px){
    .mem{padding:20px 18px;}
    .mem-foot{padding-right:92px;}
    .mem-spica{width:78px;right:14px;bottom:12px;}
  }

  footer{background:#120e22;color:#8d84ad;text-align:center;padding:32px 22px 40px;font-size:12px;}
  footer .en{color:var(--gold);letter-spacing:.3em;display:block;margin-bottom:6px;font-family:"Cormorant Garamond",serif;}

  .note{max-width:1040px;margin:0 auto;padding:16px 20px;background:#fff6df;border:1px dashed #d8bd7e;border-radius:14px;color:#7a6636;font-size:12.5px;line-height:1.9;}

  @media(max-width:560px){
    .grid{grid-template-columns:1fr;max-width:420px;margin-inline:auto;}
  }

/* ============================================================
   スマホ表示：左右の余白をなくし、コンテンツを画面いっぱいに
   ============================================================ */
@media (max-width: 600px){
  .spica-hub section{ padding-left: 0 !important; padding-right: 0 !important; }
  .spica-hub .wrap{
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: none !important;
  }
  /* 文章まわりは読みやすいよう、ほどよい余白を確保 */
  .spica-hub .sec-head{
    padding-left: 20px;
    padding-right: 20px;
    margin-bottom: 20px;      /* 説明文とカードの間（34px→20px） */
  }
  /* 見出しまわりの行間をスマホ向けに詰める */
  .spica-hub section{ padding-top: 34px; padding-bottom: 34px; }   /* 52px→34px */
  .spica-hub .sec-head .k{ margin-bottom: 2px !important; }        /* 英字と見出しの間 */
  .spica-hub .sec-head h2{
    line-height: 1.45 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  .spica-hub .sec-head p{
    margin-top: 6px !important;                                    /* 見出しと説明文の間 */
    margin-bottom: 0 !important;
    line-height: 1.7 !important;
  }
  .spica-hub .hub-hero{ padding-left: 20px; padding-right: 20px; }
  .spica-hub .hub-nav{ padding-left: 10px; padding-right: 10px; }

  /* カード：画面いっぱいに広げる */
  .spica-hub .spica-dg-wrap{
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .spica-hub .dg-grid{
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    max-width: none !important;
    padding: 0 16px !important;
  }
  /* メンバーシップCTA：カードと同じ幅に */
  .spica-hub .mem-sec{ padding-left: 0 !important; padding-right: 0 !important; }
  .spica-hub .dg-cta{ padding: 0 16px !important; }
  .spica-hub .dg-mem{
    max-width: none !important;
    width: auto !important;
    box-sizing: border-box !important;
  }
}

/* ============================================================
   タップ端末の対策
   （指で触れる端末では hover を無効にする。
     1回目のタップがホバー扱いになって「2回押さないと反応しない」現象を防ぎます）
   ============================================================ */
@media (hover: none){
  .spica-hub .hub-nav a:hover,
  .spica-hub .card:hover,
  .spica-hub .btn:hover,
  .spica-hub .mem-btn:hover,
  .spica-dg-wrap .dg-card:hover,
  .spica-dg-wrap .dg-btn:hover,
  .spica-dg-wrap .dg-mem-btn:hover{
    transform: none;
    background: inherit;
  }
  /* ボタンの色は元のまま保つ（背景を継承させない） */
  .spica-dg-wrap .dg-btn:hover{
    background: linear-gradient(135deg,#f6e9bd 0%,#d3ab5f 52%,#efdcae 100%);
  }
  .spica-dg-wrap .dg-btn.free:hover{
    background: linear-gradient(135deg,#b9a5e0,#8d76b5);
  }
  .spica-dg-wrap .dg-mem-btn:hover{ background: #8f7ce0; }
  .spica-hub .hub-nav a:hover{ background:#fff; color:var(--plum); border-color:#e3d7f5; }
}

/* ============================================================
   スマホ：見出し下の文を読みやすい位置で改行する
   ============================================================ */
/* sp-br：スマホでだけ改行する目印（パソコンでは何も起きない） */
.spica-hub .sp-br{ display: none; }
@media (max-width: 600px){
  .spica-hub .sp-br{ display: block; }
}

/* ============================================================
   テーマ（SWELL等）が見出しに付ける装飾を打ち消す
   ＝見出しの左右に出る縦線・下線・背景色を消します
   ============================================================ */
.spica-hub h1,
.spica-hub h2,
.spica-hub h3,
.spica-dg-wrap h3{
  border: none !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: none !important;
  background: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.spica-hub h1::before, .spica-hub h1::after,
.spica-hub h2::before, .spica-hub h2::after,
.spica-hub h3::before, .spica-hub h3::after,
.spica-dg-wrap h3::before, .spica-dg-wrap h3::after{
  content: none !important;
  display: none !important;
}

/* ============================================================
   ページの左右に出る白い縦帯を消す
   （テーマが本文に幅の制限をかけているため、
     その制限を飛び越えて画面の端まで背景を広げます）
   ============================================================ */
.spica-hub{
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
/* 中身は読みやすい幅のまま中央に置く */
.spica-hub .wrap{
  max-width: 1040px;
  margin-left: auto;
  margin-right: auto;
}