@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
*/

:root{--ink:#1f2937;--line:#e5e7eb;--chip:#f7fafc;--accent:#2563eb}
.feature-box{border:1px solid var(--line);border-radius:12px;padding:14px;margin:18px 0;background:#fff}
.feature-box__title{margin:0 0 6px;font-size:1.05rem}
.feature-row{display:grid;grid-template-columns:8.5em 1fr;gap:.5rem 1rem;
  padding:8px 0;border-top:1px solid var(--line);align-items:start}
.feature-row:first-of-type{border-top:0}
.feature-row__label{font-weight:700;color:var(--ink);line-height:1.8}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.chips li{padding:6px 10px;border-radius:999px;font-size:.9rem;line-height:1;white-space:nowrap;
  border:1px solid var(--line);background:var(--chip);color:var(--ink)}
.more{margin-top:12px}
.more summary{cursor:pointer;list-style:none;display:inline-block;padding:8px 12px;border-radius:999px;
  border:1px dashed #a7c957;background:#f3ffe6;color:#2f3c00;font-weight:700}
.more summary::-webkit-details-marker{display:none}
.more[open] summary{opacity:.75}
@media (max-width:720px){.feature-row{grid-template-columns:6.5em 1fr}.chips li{font-size:.85rem}}

/* ============ ERABERU Card ============ */
.er-card{
  --accent:#f59e0b;--accent-2:#10b981;--ink:#111827;--muted:#6b7280;--line:#e5e7eb;--bg:#ffffff;
  border:1px solid var(--line);border-radius:16px;background:var(--bg);
  box-shadow:0 6px 20px rgba(17,24,39,.06);
  overflow:hidden;max-width:980px;margin:28px auto;font-family:system-ui,-apple-system,"Segoe UI",Roboto;
}

.er-card .hero{position:relative;aspect-ratio:16/9;overflow:hidden;background:#f3f4f6}
.er-card .hero img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.er-card:hover .hero img{transform:scale(1.03)}

.er-card .badge{position:absolute;left:12px;top:12px;background:#111827;color:#fff;font:600 12px/1 system-ui;
  padding:6px 10px;border-radius:999px}

.er-card .rating{position:absolute;right:12px;top:12px;display:flex;align-items:center;gap:6px;
  background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(6px);
  padding:6px 10px;border-radius:999px;border:1px solid var(--line)}
.er-card .rating .star{color:#f59e0b;font-size:14px}
.er-card .rating b{font:700 13px/1 system-ui;color:var(--ink)}
.er-card .rating span{font:12px/1 system-ui;color:var(--muted)}

.er-card .body{padding:16px 18px 6px}

.er-card .title{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
/* 修正：h3 → .name */
.er-card .title .name{margin:0;font:800 20px/1.35 system-ui;color:var(--ink)}
.er-card .title .alias{font:600 12px/1 system-ui;color:var(--muted);background:#f3f4f6;border:1px solid var(--line);
  padding:4px 8px;border-radius:999px}

.er-card .catch{margin:6px 0 10px;font:600 14px/1.6 system-ui;color:#374151}

.er-card .tags{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0 10px}
.er-card .tags .tag{font:700 12px/1 system-ui;color:#065f46;background:#ecfdf5;border:1px solid #d1fae5;
  padding:5px 10px;border-radius:999px}

.er-card .desc{margin:6px 0 2px;font:14px/1.8 system-ui;color:#374151}

.er-card .meta{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;margin-top:10px}
.er-card .meta .place{font:12px/1.6 system-ui;color:var(--muted)}

.er-card .cta{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.er-card .btn{appearance:none;border:1px solid var(--line);background:#fff;border-radius:12px;padding:10px 14px;
  font:700 14px/1 system-ui;color:var(--ink);cursor:pointer;transition:all .2s ease;text-decoration:none;display:inline-flex;align-items:center;gap:8px}
.er-card .btn:hover{box-shadow:0 6px 16px rgba(17,24,39,.08);transform:translateY(-1px)}
.er-card .btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}

/* 数字で見る特徴 */
.er-card .stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:16px 0;
  padding:16px;background:#f8fafc;border:1px solid var(--line);border-radius:12px
}
.er-card .stat{text-align:center}
.er-card .stat-number{
  font:800 18px/1.2 system-ui;color:#1e40af;margin-bottom:4px
}
.er-card .stat-label{
  font:600 11px/1.2 system-ui;color:var(--muted);letter-spacing:.02em
}

.er-card details{border-top:1px dashed var(--line);margin-top:12px}
.er-card summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;
  padding:12px 18px;font:700 14px/1.2 system-ui}
.er-card summary::-webkit-details-marker{display:none}
.er-card summary span{color:var(--muted);font-weight:600}

.er-card .panel{padding:0 18px 16px}
.er-card .grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}

.er-card .b{border:1px solid var(--line);border-radius:12px;padding:12px}
.er-card .b h4{margin:0 0 8px;font:800 13px/1.2 system-ui;color:#111827;letter-spacing:.02em}
.er-card .b ul{margin:6px 0 0 18px;padding:0}
.er-card .b li{font:13px/1.7 system-ui;color:#374151}

.er-card .note{font:12px/1.6 system-ui;color:var(--muted);margin-top:8px}

.er-card .kv{display:grid;grid-template-columns:120px 1fr;gap:10px}
.er-card .kv .k{font:700 12px/1.6 system-ui;color:#374151}
.er-card .kv .v{font:13px/1.6 system-ui;color:#111827}

.er-card .recommend{background:#fef3c7;border:1px solid #fbbf24;border-radius:12px;padding:14px;margin-top:12px}
.er-card .recommend h4{margin:0 0 8px;font:800 14px/1.2 system-ui;color:#92400e}
.er-card .recommend ul{margin:6px 0 0 18px;padding:0}
.er-card .recommend li{font:13px/1.7 system-ui;color:#451a03}

.er-card .foot-cta{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;margin-top:12px}

/* 手動配置H3見出し用CSS */
.jigyosho-heading {
  font-size: 24px;
  font-weight: 700;
  color: #1f2937;
  margin: 40px auto 20px auto;
  padding: 12px 0 12px 16px;
  border-left: 4px solid #f59e0b;
  background: linear-gradient(90deg, #fef3c7 0%, transparent 100%);
  max-width: 980px;
}

/* Responsive */
@media (max-width:720px){
  .er-card{border-radius:14px}
  .er-card .grid{grid-template-columns:1fr}
  .er-card .meta{grid-template-columns:1fr}
  /* 修正：h3 → .name */
  .er-card .title .name{font-size:18px}
  .er-card .desc{font-size:13.5px}
  .er-card .stats{grid-template-columns:repeat(2,1fr);gap:10px}
  .er-card .stat-number{font-size:16px}
  .er-card .stat-label{font-size:10px}
  
  /* H3見出しのモバイル対応 */
  .jigyosho-heading {
    font-size: 20px;
    margin: 30px auto 15px auto;
    padding: 10px 0 10px 12px;
  }
}

/* ========== /ERABERU Card ========== */