/* =========================================================
   つづくフィット  共有スタイル
   コンセプト: 高い・キツい・続かないを卒業／おうち中心のゆる運動
   カラー: 続くグリーン × 元気コーラル × 清潔なオフホワイト
   ========================================================= */
:root {
  --ink:      #1d2a27;   /* 基本の文字 */
  --ink-soft: #5d6b66;   /* 補助テキスト */
  --charcoal: #11201c;   /* ヘッダー/フッター背景 */
  --brand:    #0fa47f;   /* 続くグリーン（メイン） */
  --brand-dark:#0b7d60;
  --accent:   #ff6a45;   /* 元気コーラル（CTA） */
  --accent-dark:#e85030;
  --paper:    #f5faf8;   /* ページ背景 */
  --card:     #ffffff;
  --line:     #e2ece8;   /* 罫線 */
  --violet:   #7c6cf0;   /* ピラティス系アクセント */
  --radius:   14px;
  --shadow:   0 6px 22px rgba(20, 60, 45, 0.08);
  --shadow-lg:0 14px 40px rgba(20, 60, 45, 0.14);
  --wrap: 1080px;
  --font: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP",
          "Yu Gothic", Meiryo, system-ui, sans-serif;
  --serif: "Hiragino Mincho ProN","Yu Mincho",YuMincho,"Noto Serif JP",serif;
  /* 旧クラス名の互換エイリアス */
  --red: var(--brand); --red-dark: var(--brand-dark);
  --amber: var(--accent); --amber-dark: var(--accent-dark);
  --green: var(--brand);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.85;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--brand-dark); text-decoration: none; }
a:hover { text-decoration: underline; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }

/* ---------- ヘッダー ---------- */
.site-header {
  background: var(--charcoal);
  color: #fff;
  position: sticky; top: 0; z-index: 50;
  box-shadow: 0 2px 12px rgba(0,0,0,.22);
  border-bottom: 1px solid rgba(15,164,127,.28);
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 62px; gap: 16px;
}
.brand { display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 800; font-size: 1.15rem; letter-spacing: .02em; }
.brand:hover { text-decoration: none; }
.brand small { display:block; font-size:.6rem; color:#9fd8c6; font-weight:700; letter-spacing:.14em; }
.logo-mark {
  width:42px; height:42px; border-radius:12px;
  background:linear-gradient(135deg,var(--brand),var(--brand-dark)); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:1.2rem;
  font-family:var(--serif); flex:0 0 auto; box-shadow:0 2px 10px rgba(15,164,127,.45);
}
.nav { display: flex; gap: 4px; flex-wrap: wrap; }
.nav a {
  color: #d7e9e2; padding: 8px 13px; border-radius: 999px;
  font-size: .9rem; font-weight: 700; transition: .15s;
}
.nav a:hover { background: rgba(15,164,127,.18); color:#fff; text-decoration: none; }
.nav a.on { background: var(--brand); color:#fff; }

/* ---------- ボタン ---------- */
.btn {
  display: inline-block; font-weight: 800; border-radius: 999px;
  padding: 13px 26px; font-size: 1rem; transition: .15s; cursor: pointer;
  border: none; text-align: center;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn-accent, .btn-amber { background: var(--accent); color:#fff; box-shadow: 0 6px 16px rgba(255,106,69,.4); }
.btn-accent:hover, .btn-amber:hover { background: var(--accent-dark); color:#fff; }
.btn-primary, .btn-red { background: var(--brand); color:#fff; box-shadow: 0 6px 16px rgba(15,164,127,.35); }
.btn-primary:hover, .btn-red:hover { background: var(--brand-dark); color:#fff; }
.btn-ghost { background: transparent; color:#fff; border:2px solid rgba(255,255,255,.55); }
.btn-ghost:hover { background: rgba(255,255,255,.14); color:#fff; }

/* ---------- ヒーロー ---------- */
.hero-v2 {
  position:relative; color:#fff; padding:120px 0 76px;
  background:
    linear-gradient(90deg, rgba(9,26,21,.94) 0%, rgba(9,26,21,.7) 48%, rgba(9,26,21,.4) 100%),
    linear-gradient(135deg, #0f5f49 0%, #0b3f31 100%);
  overflow:hidden;
}
.hero-v2::after{
  content:""; position:absolute; right:-80px; top:-80px; width:340px; height:340px; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, rgba(255,106,69,.5), rgba(255,106,69,0) 70%); z-index:1;
}
.hero-v2 .wrap { position:relative; z-index:2; }
.hero-v2 h1 {
  font-weight:800; letter-spacing:.01em;
  font-size:clamp(1.9rem,5vw,3.2rem); line-height:1.42; margin:0 0 20px;
  text-shadow:0 2px 20px rgba(0,0,0,.35);
}
.hero-v2 h1 .accent { color:var(--accent); }
.hero-v2 .sub { font-size:1.04rem; line-height:2; color:#dcefe8; margin:0 0 30px; max-width:560px; }
.hero-cta { display:flex; gap:12px; flex-wrap:wrap; }

/* ---------- セクション ---------- */
section { padding: 56px 0; }
.section-head { text-align: center; margin-bottom: 38px; }
.section-head h2 { font-size: 1.7rem; margin: 0 0 8px; }
.section-head p { color: var(--ink-soft); margin: 0; }
.eyebrow { color: var(--brand); font-weight: 800; font-size: .82rem; letter-spacing: .16em; }
.serif-title { font-family:var(--serif); font-size:1.7rem; font-weight:700; margin:0 0 26px; }

/* ---------- 季節/告知バナー ---------- */
.season-banner{ background:linear-gradient(90deg,var(--brand),var(--accent)); }
.season-banner .season-inner{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:14px 0; color:#fff; }
.season-banner .season-inner:hover{ text-decoration:none; opacity:.96; }
.season-badge{ background:rgba(255,255,255,.22); border:1px solid rgba(255,255,255,.55); padding:5px 14px; border-radius:999px; font-weight:800; font-size:.9rem; white-space:nowrap; }
.season-copy{ font-weight:600; font-size:.95rem; line-height:1.5; }
.season-copy strong{ text-decoration:underline; text-underline-offset:2px; }

/* ---------- 特集カード ---------- */
.feature-sec { background:var(--paper); padding:56px 0 64px; }
.feature-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.feature-card {
  position:relative; aspect-ratio:5/4; border-radius:14px; overflow:hidden;
  display:flex; align-items:flex-end; box-shadow:var(--shadow); transition:.18s;
}
.feature-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); text-decoration:none; }
.feature-card .fbg { position:absolute; inset:0; background-size:cover; background-position:center; }
.feature-card::after {
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 28%, rgba(6,30,24,.78) 100%);
}
.feature-card .fc-text {
  position:relative; z-index:2; padding:18px 18px 20px; color:#fff;
  font-weight:800; font-size:1.14rem; line-height:1.5; text-shadow:0 1px 8px rgba(0,0,0,.5);
}
.feature-card .fc-tag {
  position:absolute; top:12px; left:12px; z-index:2; background:rgba(255,106,69,.92);
  color:#fff; font-size:.7rem; font-weight:800; padding:3px 10px; border-radius:999px; letter-spacing:.04em;
}

/* ---------- 3本柱カード ---------- */
.cat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px; }
.pillar {
  background: var(--card); border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow); border: 1px solid var(--line);
  display: flex; flex-direction: column; transition: .18s;
}
.pillar:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); text-decoration:none; }
.pillar .body { padding: 22px 22px 24px; flex: 1; display:flex; flex-direction:column; }
.pillar h3 { font-size: 1.2rem; margin: 8px 0 6px; color: var(--ink); }
.pillar p { color: var(--ink-soft); font-size: .92rem; margin: 0 0 16px; flex:1; }
.pillar .go { font-weight: 800; font-size: .9rem; color:var(--brand-dark); }
.tag { display:inline-block; font-size:.72rem; font-weight:800; padding:3px 10px; border-radius:999px; letter-spacing:.04em; }
.tag-green { background:#dff3ec; color:var(--brand-dark); }
.tag-amber { background:#ffe7de; color:var(--accent-dark); }
.tag-violet { background:#eae7fd; color:#5544cc; }

/* ---------- 導線（funnel）帯 ---------- */
.funnel { background: #10211c; color:#fff; }
.funnel .steps { display:grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: 10px; }
.step { background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius: var(--radius); padding: 22px; }
.step .n { font-size: .8rem; color: var(--accent); font-weight:800; letter-spacing:.1em; }
.step h4 { margin:.4rem 0 .4rem; font-size:1.05rem; }
.step p { margin:0; color:#c8d8d1; font-size:.88rem; }

/* ---------- 記事本文 ---------- */
.cat-hero { background:var(--charcoal); color:#fff; padding:46px 20px; text-align:center; }
.cat-hero h1 { margin:0 0 8px; font-size:1.9rem; }
.cat-hero p { margin:0; color:#c8d8d1; }
.article { max-width: 760px; margin: 0 auto; padding: 40px 20px 60px; }
.breadcrumb { font-size:.82rem; color:var(--ink-soft); margin-bottom: 18px; }
.breadcrumb a { color: var(--ink-soft); }
.article h1 { font-size: clamp(1.5rem,4vw,2.1rem); line-height:1.5; margin: 6px 0 14px; }
.meta-row { display:flex; gap:12px; align-items:center; color:var(--ink-soft); font-size:.82rem; margin-bottom:26px; flex-wrap:wrap; }
.article h2 {
  font-size:1.4rem; margin: 46px 0 16px; padding: 10px 0 10px 16px;
  border-left: 6px solid var(--brand); background:#e9f6f1;
}
.article h3 { font-size:1.15rem; margin: 30px 0 10px; border-bottom:2px dotted var(--line); padding-bottom:6px; }
.article p { margin: 14px 0; }
.article ul, .article ol { padding-left: 1.3em; }
.article li { margin: 7px 0; }
.lead { font-size:1.05rem; background:#fff; border:1px solid var(--line); border-left:5px solid var(--accent);
  padding:18px 20px; border-radius:8px; box-shadow:var(--shadow); }

/* 開示（ステマ規制対応） */
.disclosure {
  background:#eef4f1; border-radius:8px; padding:8px 14px; font-size:.78rem; color:var(--ink-soft);
  margin: 0 0 24px;
}

/* 体験談（インタビュー・一次情報ボックス） */
.voice {
  background:#fff; border:1px solid var(--line); border-left:5px solid var(--violet);
  border-radius:10px; padding:16px 18px; margin:20px 0; box-shadow:var(--shadow);
}
.voice .v-who { font-weight:800; font-size:.85rem; color:#5544cc; margin:0 0 6px; }
.voice p { margin:6px 0; font-size:.95rem; }

/* 編集部の一押し（結論ボックス） */
.top-pick { background:linear-gradient(180deg,#fff4f0,#fff); border:1px solid var(--accent); border-left:5px solid var(--accent-dark); border-radius:12px; padding:18px 20px; margin:24px 0; box-shadow:var(--shadow); }
.top-pick .tp-badge { display:inline-block; background:var(--brand); color:#fff; font-weight:800; font-size:.72rem; padding:4px 12px; border-radius:999px; letter-spacing:.06em; }
.top-pick h3 { margin:12px 0 6px; font-size:1.18rem; border:none; padding:0; }
.top-pick p { margin:0 0 14px; font-size:.92rem; color:var(--ink-soft); line-height:1.7; }
.top-pick .tp-btn { display:inline-block; background:var(--accent); color:#fff; font-weight:800; padding:11px 22px; border-radius:10px; text-decoration:none; font-size:.95rem; transition:.15s; }
.top-pick .tp-btn:hover { background:var(--accent-dark); }

/* アフィリCTAボックス */
.cta-box {
  background: linear-gradient(135deg,#fff,#eef8f4); border:2px solid var(--brand);
  border-radius: var(--radius); padding: 24px; margin: 30px 0; text-align:center; box-shadow: var(--shadow);
}
.cta-box .k { font-size:.78rem; font-weight:800; color:var(--brand-dark); letter-spacing:.1em; }
.cta-box h4 { margin:.4rem 0 .3rem; font-size:1.2rem; }
.cta-box p { margin:.2rem 0 16px; font-size:.9rem; color:var(--ink-soft); }
.pr-note { font-size:.72rem; color:#98a5a0; margin-top:10px; }

/* 比較テーブル */
.cmp { width:100%; border-collapse:collapse; margin: 22px 0; font-size:.9rem; box-shadow:var(--shadow); border-radius:10px; overflow:hidden; }
.cmp th, .cmp td { padding: 12px 12px; border-bottom:1px solid var(--line); text-align:left; }
.cmp thead th { background:var(--charcoal); color:#fff; font-size:.85rem; }
.cmp tbody tr:nth-child(even){ background:#eff7f3; }
.cmp .rank { font-weight:800; color:var(--brand-dark); white-space:nowrap; }
.stars { color: var(--accent); letter-spacing:1px; }
.scroll-hint{ display:none; }
@media (max-width: 720px){
  .cmp{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .cmp .rank{ min-width:8.5em; }
  .scroll-hint{ display:block; font-size:.75rem; font-weight:700; color:var(--brand-dark); text-align:right; margin:2px 0 4px; }
}

/* メリット・デメリット */
.pros-cons { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:14px 0; }
.pros-cons .box { border-radius:10px; padding:12px 14px; font-size:.86rem; }
.pros-cons .pros { background:#e4f4ec; }
.pros-cons .cons { background:#ffece6; }
.pros-cons h5 { margin:0 0 6px; }

/* レビューカード */
.review-card {
  border:1px solid var(--line); border-radius:var(--radius); padding:20px 22px; margin:22px 0;
  background:var(--card); box-shadow:var(--shadow);
}
.review-card .rc-head { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:6px; }
.review-card .rc-rank { background:var(--brand); color:#fff; font-weight:800; padding:2px 12px; border-radius:999px; font-size:.82rem; }
.review-card h3 { margin:0; border:none; padding:0; }

/* かんたんリンク枠（運用時にASPリンクへ差し替え） */
.kantan-slot {
  margin-top:16px; padding:14px 16px; border:1px solid var(--line); border-radius:12px;
  background:#fff; display:flex; align-items:center; gap:14px; box-shadow:var(--shadow);
}
.kantan-slot .kn-thumb {
  flex:0 0 54px; width:54px; height:54px; border-radius:10px; background:#eef7f3;
  display:flex; align-items:center; justify-content:center; font-size:1.7rem;
}
.kantan-slot .kn-thumb.ph { border:1.5px dashed #bcd6cc; color:#8fb0a5; font-size:.62rem; font-weight:700; text-align:center; line-height:1.3; }
.kantan-slot .kn-body { flex:1; min-width:0; }
.kantan-slot .kn-label { display:block; font-weight:700; font-size:.9rem; margin-bottom:8px; color:var(--ink); }
.kantan-slot .kn-btns { display:flex; gap:8px; flex-wrap:wrap; }
.kantan-slot .kn-btn { font-size:.82rem; font-weight:800; color:#fff; padding:6px 14px; border-radius:8px; white-space:nowrap; }
.kn-primary { background:var(--brand); }
.kn-accent { background:var(--accent); }

/* ---------- フッター ---------- */
.site-footer { background: var(--charcoal); color:#b6ccc3; padding: 46px 0 30px; margin-top: 30px; font-size:.9rem; border-top:1px solid rgba(15,164,127,.2); }
.footer-grid { display:grid; grid-template-columns: 2fr 1fr 1fr; gap: 30px; }
.site-footer h5 { color:#fff; margin:0 0 12px; font-size:.95rem; }
.site-footer a { color:#b6ccc3; }
.site-footer a:hover { color:#fff; }
.site-footer ul { list-style:none; padding:0; margin:0; }
.site-footer li { margin:6px 0; }
.copyright { text-align:center; border-top:1px solid rgba(255,255,255,.1); margin-top:30px; padding-top:20px; font-size:.8rem; color:#7d938a; }

/* ---------- レスポンシブ ---------- */
@media (max-width:900px){ .feature-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width: 860px) {
  .cat-grid, .funnel .steps { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 22px; }
  .pros-cons { grid-template-columns: 1fr; }
  .nav { gap:0; }
  .nav a { padding:7px 9px; font-size:.82rem; }
  .brand small { display:none; }
}
@media (max-width:600px){ .feature-grid { grid-template-columns:1fr 1fr; gap:12px; } }
@media (max-width: 720px){
  .site-header .wrap{
    flex-direction: column; align-items: stretch;
    min-height: 0; gap: 4px; padding-top: 8px; padding-bottom: 8px;
  }
  .brand{ font-size: 1.05rem; gap: 8px; }
  .logo-mark{ width: 34px; height: 34px; font-size: 1rem; }
  .nav{
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    gap: 4px; scrollbar-width: none; margin: 0 -20px; padding: 0 20px 2px;
  }
  .nav::-webkit-scrollbar{ display: none; }
  .nav a{ white-space: nowrap; flex: 0 0 auto; }
}