@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* ============================================================
   ↓ ここから追記 — カスタムブロックスタイル用CSS変数
   ============================================================ */

:root {
  --bk-pink:    #e8829a;
  --bk-pink-lt: #fdf0f4;
  --bk-red:     #c94b72;
  --bk-navy:    #1c2d5a;
  --bk-gold:    #c8a84b;
  --bk-green:   #3a8a5a;
  --bk-dark:    #141414;
  --bk-mid:     #3e3e3e;
  --bk-r:       12px;
  --bk-sh:      0 4px 24px rgba(0,0,0,.10);
}

/* ============================================================
   タグバッジ共通（テーブル内などで使用）
   ============================================================ */

.bk-tag,
.bk-tag-g,
.bk-tag-y,
.bk-tag-b,
.bk-tag-t {
  display: inline-block;
  font-size: 11px;
  padding: 2px 10px;
  border-radius: 100px;
  letter-spacing: .06em;
  font-weight: 600;
  margin: 2px;
}
.bk-tag   { background:var(--bk-red);   color:#fff; }
.bk-tag-g { background:var(--bk-green); color:#fff; }
.bk-tag-y { background:var(--bk-gold);  color:#fff; }
.bk-tag-b { background:var(--bk-navy);  color:#fff; }
.bk-tag-t { background:#00929a;         color:#fff; }

/* ============================================================
   1. ハイライトボックス
   使い方: グループブロック → スタイル「ハイライトボックス」
   クラス: .is-style-bk-highlight
   ============================================================ */

.is-style-bk-highlight {
  background: linear-gradient(135deg, var(--bk-pink-lt) 0%, #fff 100%) !important;
  border: 1.5px solid var(--bk-pink) !important;
  border-radius: var(--bk-r) !important;
  padding: 22px 26px !important;
}
.is-style-bk-highlight > *:first-child {
  font-size: 14px;
  font-weight: 700;
  color: var(--bk-red);
  margin-bottom: 8px;
  letter-spacing: .05em;
}

/* ============================================================
   2. スペシャルボックス（ダーク）
   クラス: .is-style-bk-special
   ============================================================ */

.is-style-bk-special {
  position: relative;
  background: linear-gradient(135deg, #1a0a10 0%, #2d1020 50%, var(--bk-navy) 100%) !important;
  border-radius: var(--bk-r) !important;
  padding: 28px 32px 28px 52px !important;
  color: #fff !important;
}
.is-style-bk-special::before {
  content: '🎋';
  position: absolute;
  left: 14px; top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
}
.is-style-bk-special > *:first-child {
  font-size: 15px;
  font-weight: 700;
  color: var(--bk-pink) !important;
  margin-bottom: 8px;
}
.is-style-bk-special p {
  color: rgba(255,255,255,.88) !important;
  font-size: 13.5px;
  line-height: 1.85;
}

/* ============================================================
   3. 警告ボックス（ゴールド左ボーダー）
   クラス: .is-style-bk-warn
   ============================================================ */

.is-style-bk-warn {
  border-left: 4px solid var(--bk-gold) !important;
  background: linear-gradient(to right, #fffbf0, #fffef8) !important;
  border-radius: 0 var(--bk-r) var(--bk-r) 0 !important;
  padding: 16px 20px 16px 20px !important;
  font-size: 13.5px;
  color: #5a4200 !important;
}
.is-style-bk-warn > *:first-child::before {
  content: '⚠️ ';
}
.is-style-bk-warn > *:first-child {
  font-weight: 700;
  color: #a07000;
  font-size: 12px;
  letter-spacing: .1em;
  margin-bottom: 6px;
}

/* ============================================================
   4. 情報ボックス（緑）
   クラス: .is-style-bk-info
   ============================================================ */

.is-style-bk-info {
  border-left: 4px solid var(--bk-green) !important;
  background: linear-gradient(to right, #f0faf4, #f8fffe) !important;
  border-radius: 0 var(--bk-r) var(--bk-r) 0 !important;
  padding: 16px 20px !important;
  font-size: 13.5px;
}
.is-style-bk-info > *:first-child {
  font-size: 13px;
  font-weight: 700;
  color: var(--bk-green);
  margin-bottom: 6px;
  letter-spacing: .08em;
}

/* ============================================================
   5. 情報ボックス（ネイビー）
   クラス: .is-style-bk-navy-box
   ============================================================ */

.is-style-bk-navy-box {
  border-left: 4px solid var(--bk-navy) !important;
  background: linear-gradient(to right, #f0f4ff, #f8f9fe) !important;
  border-radius: 0 var(--bk-r) var(--bk-r) 0 !important;
  padding: 16px 20px !important;
  font-size: 13.5px;
}
.is-style-bk-navy-box > *:first-child {
  font-size: 13px;
  font-weight: 700;
  color: var(--bk-navy);
  margin-bottom: 6px;
  letter-spacing: .08em;
}

/* ============================================================
   6. ステータスカードグリッド
   使い方: グループブロックの中にカラムブロックを並べる
   クラス: .is-style-bk-status-grid
   ============================================================ */

.is-style-bk-status-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)) !important;
  gap: 14px !important;
  background: transparent !important;
}
.is-style-bk-status-grid > .wp-block-group__inner-container > *,
.is-style-bk-status-grid > * {
  background: #fff;
  border-radius: var(--bk-r);
  border-top: 3px solid var(--bk-red);
  box-shadow: var(--bk-sh);
  padding: 18px 16px;
  text-align: center;
}

/* ステータスカード内 .bk-sc-* クラス */
.bk-sc-label { font-size:11px; color:#999; letter-spacing:.1em; margin-bottom:6px; display:block; }
.bk-sc-value { font-size:22px; font-weight:700; color:var(--bk-red); line-height:1.2; margin-bottom:4px; display:block; }
.bk-sc-sub   { font-size:11px; color:#aaa; display:block; }

/* ============================================================
   7. スポットカードグリッド
   クラス: .is-style-bk-spot-grid
   ============================================================ */

.is-style-bk-spot-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)) !important;
  gap: 16px !important;
  background: transparent !important;
}
.is-style-bk-spot-grid > * {
  background: #fff;
  border-radius: var(--bk-r);
  box-shadow: var(--bk-sh);
  overflow: hidden;
  transition: transform .22s;
}
.is-style-bk-spot-grid > *:hover { transform: translateY(-3px); }

/* スポットカード内 .bk-spot-* クラス */
.bk-spot-head {
  background: linear-gradient(135deg, #1a0a10 0%, var(--bk-navy) 100%);
  padding: 16px 18px; color: #fff;
}
.bk-spot-num  { font-size:10px; letter-spacing:.18em; color:var(--bk-pink); margin-bottom:4px; }
.bk-spot-name { font-size:16px; font-weight:700; }
.bk-spot-sub  { font-size:11.5px; color:rgba(255,255,255,.65); margin-top:3px; }
.bk-spot-b    { padding:14px 18px; font-size:13px; color:var(--bk-mid); line-height:1.8; }

/* ============================================================
   8. アフィリエイトカードグリッド
   クラス: .is-style-bk-aff-grid
   ============================================================ */

.is-style-bk-aff-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important;
  gap: 16px !important;
  background: transparent !important;
}
.is-style-bk-aff-grid > * {
  background: #fff;
  border-radius: var(--bk-r);
  box-shadow: var(--bk-sh);
  padding: 20px 18px;
  text-align: center;
  transition: transform .22s;
}
.is-style-bk-aff-grid > *:hover { transform: translateY(-3px); }

/* アフィリエイトカード内 .bk-aff-* クラス */
.bk-aff-icon { font-size:36px; margin-bottom:10px; }
.bk-aff-name { font-size:15px; font-weight:700; margin-bottom:6px; }
.bk-aff-desc { font-size:12.5px; color:#666; line-height:1.7; margin-bottom:14px; }
.bk-aff-btn {
  display: inline-block;
  background: var(--bk-navy);
  color: #fff !important;
  border-radius: 100px;
  padding: 9px 22px;
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none !important;
  transition: opacity .2s;
}
.bk-aff-btn:hover { opacity: .82; }

/* ============================================================
   9. 昼夜比較カード
   クラス: .is-style-bk-compare
   ============================================================ */

.is-style-bk-compare {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px !important;
  background: transparent !important;
}
.is-style-bk-compare > * {
  background: #fff;
  border-radius: var(--bk-r);
  box-shadow: var(--bk-sh);
  overflow: hidden;
}
.bk-cmp-h {
  padding: 14px 18px;
  font-size: 15px;
  font-weight: 700;
  color: #fff !important;
}
.bk-cmp-h.hiru { background: linear-gradient(135deg, var(--bk-pink), var(--bk-red)); }
.bk-cmp-h.yoru { background: linear-gradient(135deg, var(--bk-navy), #0a1a3a); }
.bk-cmp-b {
  padding: 14px 18px;
  font-size: 13px;
  color: var(--bk-mid);
  line-height: 1.8;
}
.bk-cmp-b ul { list-style: none; padding: 0; }
.bk-cmp-b ul li::before { content: '✔ '; color: var(--bk-red); font-size: 12px; }

/* ============================================================
   10. CTAブロック
   クラス: .is-style-bk-cta
   ============================================================ */

.is-style-bk-cta {
  position: relative;
  background: linear-gradient(135deg, var(--bk-dark) 0%, #2d0a18 40%, var(--bk-red) 100%) !important;
  border-radius: var(--bk-r) !important;
  padding: 44px 36px !important;
  text-align: center;
  color: #fff !important;
}
.is-style-bk-cta > * { color: #fff !important; }
.is-style-bk-cta h2,
.is-style-bk-cta h3 {
  line-height: 1.55;
  margin-bottom: 14px;
}
.is-style-bk-cta h3 {
  font-size: 13px;
  color: var(--bk-pink) !important;
  letter-spacing: .2em;
}
.is-style-bk-cta p {
  font-size: 13.5px;
  opacity: .83;
  line-height: 1.8;
  margin-bottom: 22px;
}
.bk-cta-btn {
  display: inline-block;
  background: #fff;
  color: var(--bk-navy) !important;
  border-radius: 100px;
  padding: 13px 36px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none !important;
  box-shadow: 0 4px 18px rgba(0,0,0,.22);
  margin: 0 6px 8px;
  transition: transform .2s;
}
.bk-cta-btn:hover { transform: scale(1.04); }

/* ============================================================
   11. テーブル（ネイビーヘッダー）
   クラス（テーブルブロック）: .is-style-bk-table
   ============================================================ */

.is-style-bk-table {
  border-radius: var(--bk-r) !important;
  overflow: hidden !important;
  box-shadow: var(--bk-sh) !important;
}
.is-style-bk-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.is-style-bk-table thead th,
.is-style-bk-table th {
  background: var(--bk-navy) !important;
  color: #fff !important;
  padding: 13px 16px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .05em;
  text-align: left;
  border: none !important;
}
.is-style-bk-table tbody td {
  padding: 13px 16px;
  border-bottom: 1px solid #f0e8ec !important;
  vertical-align: top;
  line-height: 1.7;
}
.is-style-bk-table tbody tr:last-child td { border-bottom: none !important; }
.is-style-bk-table tbody tr:nth-child(even) td {
  background: var(--bk-pink-lt);
}

/* ============================================================
   12. タイムライン
   クラス: .is-style-bk-timeline
   ============================================================ */

.is-style-bk-timeline {
  background: transparent !important;
}
.is-style-bk-timeline > * {
  display: flex;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px dashed var(--bk-pink);
  align-items: flex-start;
}
.is-style-bk-timeline > *:last-child { border-bottom: none; }

/* タイムライン内 .bk-tl-* クラス */
.bk-tl-dot {
  width: 14px; height: 14px;
  background: radial-gradient(circle, var(--bk-pink) 40%, var(--bk-red) 100%);
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 5px;
  box-shadow: 0 0 0 3px var(--bk-pink-lt);
}
.bk-tl-date  { font-size:12px; color:var(--bk-red); font-weight:700; letter-spacing:.08em; margin-bottom:3px; }
.bk-tl-title { font-size:14.5px; font-weight:700; margin-bottom:4px; }
.bk-tl-desc  { font-size:13px; color:var(--bk-mid); line-height:1.75; }

/* ============================================================
   レスポンシブ
   ============================================================ */

@media (max-width: 640px) {
  .is-style-bk-compare {
    grid-template-columns: 1fr !important;
  }
  .is-style-bk-spot-grid {
    grid-template-columns: 1fr !important;
  }
  .is-style-bk-status-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}