/* =====================================================
   feature.css — チュパレロ 特集ページ共通スタイル
   初回のみ書き出し。デザイン変更時に上書きする。
===================================================== */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

:root{
  --bg:oklch(11% 0.012 30);
  --bg2:oklch(14% 0.012 30);
  --bg3:oklch(17% 0.014 30);
  --surface:oklch(15% 0.013 30);
  --border:oklch(25% 0.015 30);
  --text:oklch(88% 0.008 60);
  --text-muted:oklch(55% 0.008 60);
  --text-faint:oklch(38% 0.008 60);
  --accent:oklch(64% 0.13 350);
  --accent-glow:oklch(64% 0.13 350 / 0.3);
  --accent-dim:oklch(64% 0.13 350 / 0.12);
  --font-jp:'Zen Maru Gothic',sans-serif;
  --font-ui:'Nunito',sans-serif;
  --img-width:720px;
  --card-width:860px;
  --wrap-width:860px;
}

body{
  font-family:var(--font-jp);
  background:var(--bg);
  color:var(--text);
  font-size:17px;
  font-weight:500;
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
}

/* ── ラッパー ── */
.wrap{max-width:var(--wrap-width);margin:0 auto;padding:0 20px;}
.wrap--wide{max-width:1080px;margin:0 auto;padding:0 24px;}

/* ── ヘッダー ── */
.site-header{
  position:sticky;top:0;z-index:100;
  background:oklch(11% 0.012 30 / 0.92);
  backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
}
.site-header .wrap--wide{
  height:56px;display:flex;align-items:center;
}
.logo-link{text-decoration:none;}
.logo-name{font-family:var(--font-jp);font-size:20px;font-weight:700;color:var(--text);letter-spacing:0.05em;}

/* ── パンくず ── */
.breadcrumb{
  padding:12px 0;
  display:flex;gap:6px;align-items:center;
  font-size:14px;color:var(--text);font-family:var(--font-ui);
}
.breadcrumb a{color:var(--text);text-decoration:none;}

/* ── 特集メイン画像 ── */
.feature-main-img{
  margin:16px auto 24px;
  max-width:var(--img-width);
  border-radius:12px;
  overflow:hidden;
}
.feature-main-img img{width:100%;display:block;}

/* ── 記事ヘッダー ── */
.article-cat{
  font-family:var(--font-ui);font-size:14px;font-weight:700;
  letter-spacing:0.12em;color:var(--accent);margin-bottom:12px;
}
.article-title{
  font-size:29px;font-weight:700;color:var(--text);
  line-height:1.4;letter-spacing:0.03em;margin-bottom:16px;
}
.article-lead{
  font-size:16px;color:var(--text);line-height:1.9;
  background:var(--bg2);border:1px solid var(--border);
  border-left:3px solid var(--accent);
  padding:16px 20px;border-radius:0 8px 8px 0;margin-bottom:32px;
}

/* ── 作品カード ── */
.work-card-full{
  background:var(--surface);border:1px solid var(--border);
  border-radius:16px;overflow:hidden;
  margin:0 auto 24px;max-width:var(--card-width);
}
.card-rank-strip{
  background:linear-gradient(90deg,oklch(16% 0.025 350),var(--bg2));
  border-bottom:1px solid var(--border);padding:12px 24px;
}
.card-rank-num{
  font-family:var(--font-ui);font-size:14px;font-weight:700;
  letter-spacing:0.14em;text-transform:uppercase;color:var(--accent);
}
/* 画像はカード内でも最大720pxに抑える */
.card-img-link{display:block;width:100%;overflow:hidden;}
.card-img-link img{width:100%;max-width:var(--img-width);display:block;margin:0 auto;transition:transform 0.3s;}
.card-img-link:hover img{transform:scale(1.03);}
.card-info-grid{padding:20px 24px 0;}
.card-circle-name{font-size:14px;color:var(--accent);margin-bottom:6px;}
.card-title-main{font-size:20px;font-weight:700;color:var(--text);line-height:1.4;margin-bottom:8px;}
.card-meta-row{display:flex;flex-wrap:wrap;gap:14px;font-size:15px;font-family:var(--font-ui);color:var(--text);margin-bottom:10px;}
.card-tags{display:flex;flex-wrap:wrap;gap:6px;padding:0 24px 16px;}
.card-tag{font-size:13px;font-family:var(--font-ui);color:var(--text);background:var(--bg3);border:1px solid var(--border);padding:4px 12px;border-radius:4px;}
.card-tag.hl{color:var(--accent);background:var(--accent-dim);border-color:oklch(64% 0.13 350 / 0.3);}
.card-divider{border:none;border-top:1px solid var(--border);margin:0 24px;}
.card-section{padding:16px 24px;}
.card-section-title{
  font-family:var(--font-ui);font-size:14px;font-weight:700;
  letter-spacing:0.16em;text-transform:uppercase;color:var(--accent);
  margin-bottom:12px;display:flex;align-items:center;gap:6px;
}
.card-section-title::after{content:'';flex:1;height:1px;background:var(--border);}
.points-list{list-style:none;display:flex;flex-direction:column;gap:8px;}
.points-list li{display:flex;gap:10px;align-items:flex-start;font-size:16px;color:var(--text);line-height:1.7;}
.points-list li::before{content:'✓';color:var(--accent);font-weight:700;font-size:14px;margin-top:2px;flex-shrink:0;}
.review-box{
  background:var(--bg3);border:1px solid var(--border);border-radius:8px;
  padding:16px 18px;font-size:16px;color:var(--text);line-height:1.85;
  font-style:italic;position:relative;
}
.review-box::before{
  content:'"';position:absolute;top:-2px;left:10px;
  font-size:36px;font-family:Georgia,serif;color:var(--accent);opacity:0.4;line-height:1;
}
.recommend-strip{
  background:oklch(64% 0.13 350 / 0.06);
  border:1px dashed oklch(64% 0.13 350 / 0.25);
  border-radius:8px;padding:12px 16px;
  display:flex;align-items:center;gap:8px;font-size:16px;color:var(--text);
}
.cta-btn-wrap{padding:18px 24px 24px;}
.cta-btn{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;
  background:linear-gradient(135deg,var(--accent),oklch(55% 0.14 340));
  color:white;font-family:var(--font-jp);font-size:17px;font-weight:700;
  letter-spacing:0.06em;padding:16px 20px;border-radius:10px;
  text-decoration:none;box-shadow:0 4px 20px var(--accent-glow);
}

/* ── まとめ ── */
.summary-box{
  background:var(--bg2);border:1px solid var(--border);
  border-radius:12px;padding:24px;margin-top:24px;max-width:var(--card-width);margin-left:auto;margin-right:auto;
}
.summary-box p{font-size:16px;color:var(--text);line-height:1.9;}

/* ── フッター ── */
.site-footer{border-top:1px solid var(--border);padding:32px 20px 40px;text-align:center;}
.footer-logo{font-family:var(--font-jp);font-size:18px;font-weight:700;color:var(--text);margin-bottom:12px;}
.footer-logo a{color:var(--text);text-decoration:none;}
.footer-age{
  display:inline-flex;align-items:center;gap:6px;
  background:oklch(64% 0.13 350 / 0.08);border:1px solid oklch(64% 0.13 350 / 0.2);
  color:var(--text);font-family:var(--font-ui);font-size:12px;
  padding:5px 14px;border-radius:20px;margin-bottom:14px;
}
.footer-copy{font-family:var(--font-ui);font-size:13px;color:var(--text);line-height:2.2;}

/* ── レスポンシブ ── */
@media(max-width:640px){
  body{font-size:16px;}
  .article-title{font-size:22px;}
  .card-title-main{font-size:17px;}
  .points-list li{font-size:15px;}
  .review-box{font-size:15px;}
  .recommend-strip{font-size:15px;}
  .cta-btn{font-size:16px;padding:14px 16px;}
}