/*
Theme Name: マッチングアプリ大全 Child (AFFINGER6 Child)
Template: affinger
Description: マッチングアプリ大全リニューアル用子テーマ。デザイン案(デザイン案_トップページ/)で承認済みのCSSをそのまま採用。
Version: 1.0.0
Author: 凪工房
*/

:root{
  --pink: #e83a68;
  --pink-soft: #fbe4ea;
  --pink-deep: #b81f47;
  --cream: #fff8f5;
  --text: #3a2e2e;
  --text-sub: #8a7876;
  --white: #ffffff;
}
*{ margin:0; padding:0; box-sizing:border-box; }
body{
  font-family:"Noto Sans JP", sans-serif;
  color:var(--text);
  background:var(--cream);
  line-height:1.8;
}
h1,h2,h3,.logo,.nana-role + h2{ font-family:"Zen Maru Gothic", sans-serif; }
a{ text-decoration:none; color:inherit; }
img{ max-width:100%; display:block; }

/* Header */
.site-header{
  position:sticky; top:0; z-index:10;
  background:rgba(255,248,245,.92); backdrop-filter:blur(6px);
  border-bottom:1px solid #f3dbe1;
}
.header-inner{
  max-width:1120px; margin:0 auto; padding:18px 24px;
  display:flex; align-items:center; justify-content:space-between;
}
.logo{ font-weight:900; font-size:22px; color:var(--pink-deep); letter-spacing:.02em; }
.nav{ display:flex; gap:28px; font-size:14px; font-weight:500; }
.nav a{ color:var(--text); position:relative; }
.nav a:hover{ color:var(--pink); }
.nav-about, .nav-current{ color:var(--pink); font-weight:700; }

/* Hero */
.hero{ padding:64px 24px 0; }
.hero-inner{ max-width:1120px; margin:0 auto; display:flex; align-items:center; gap:56px; }
.hero-text{ flex:1.1; }
.eyebrow{
  display:inline-block; font-size:13px; font-weight:700; color:var(--pink-deep);
  background:var(--pink-soft); padding:6px 14px; border-radius:999px; margin-bottom:20px;
}
.hero-text h1{ font-size:38px; font-weight:900; line-height:1.5; color:var(--text); margin-bottom:20px; }
.hero-sub{ font-size:15px; color:var(--text-sub); max-width:440px; }
.hero-photo{ flex:.9; display:flex; justify-content:center; }
.hero-photo img{
  width:300px; height:300px; border-radius:50%; object-fit:cover;
  border:6px solid var(--white); box-shadow:0 20px 50px rgba(232,58,104,.18);
}

/* 診断CTA */
.diagnosis{
  max-width:1120px; margin:56px auto 0; padding:32px 24px;
  background:var(--white); border-radius:24px;
  box-shadow:0 14px 40px rgba(184,31,71,.08); text-align:center;
}
.diagnosis-title{ font-weight:700; font-size:16px; margin-bottom:20px; color:var(--pink-deep); }
.diagnosis-options{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.diagnosis-btn{
  flex:1; min-width:180px; max-width:260px;
  background:linear-gradient(135deg, var(--pink), var(--pink-deep));
  color:#fff; border-radius:16px; padding:22px 16px;
  font-weight:700; font-size:14.5px; text-align:center;
  box-shadow:0 10px 24px rgba(232,58,104,.28); transition:transform .15s ease;
}
.diagnosis-btn:hover{ transform:translateY(-3px); }
.inline-diagnosis{ margin:40px 0; padding:24px; }
.inline-diagnosis .diagnosis-btn{ font-size:13px; padding:16px 12px; }

/* Sections common */
.section-title{ font-size:22px; font-weight:900; text-align:center; margin-bottom:32px; color:var(--text); }

/* Popular articles / card grid */
.popular{ max-width:1120px; margin:88px auto 0; padding:0 24px; }
.card-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.article-card{ background:var(--white); border-radius:18px; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,.06); transition:transform .15s ease; }
.article-card:hover{ transform:translateY(-4px); }
.card-img{ height:170px; background-size:cover; background-position:center; }
.card-body{ padding:20px; }
.card-tag{ display:inline-block; font-size:11px; font-weight:700; color:var(--pink-deep); background:var(--pink-soft); padding:4px 10px; border-radius:999px; margin-bottom:10px; }
.card-body h3{ font-size:15px; font-weight:700; line-height:1.6; }

/* Categories */
.categories{ max-width:1120px; margin:88px auto 0; padding:0 24px; }
.category-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.category-card{ background:var(--white); border:1.5px solid #f3dbe1; border-radius:16px; padding:24px; text-align:center; display:flex; flex-direction:column; gap:6px; transition:border-color .15s ease, background .15s ease; }
.category-card:hover{ border-color:var(--pink); background:var(--pink-soft); }
.cat-jp{ font-weight:700; font-size:15px; }
.cat-en{ font-size:11px; letter-spacing:.12em; color:var(--text-sub); }

/* Nana profile */
.nana-profile{ margin:96px auto 0; padding:64px 24px; background:linear-gradient(135deg, var(--pink-deep), var(--pink)); color:#fff; }
.nana-inner{ max-width:900px; margin:0 auto; display:flex; align-items:center; gap:44px; }
.nana-photo{ width:170px; height:170px; border-radius:50%; object-fit:cover; border:5px solid rgba(255,255,255,.6); flex-shrink:0; }
.nana-role{ font-size:12px; opacity:.85; margin-bottom:6px; letter-spacing:.08em; }
.nana-text h2{ font-size:24px; font-weight:900; margin-bottom:14px; }
.nana-text h2 span{ font-size:14px; font-weight:500; opacity:.9; margin-left:10px; }
.nana-text p{ font-size:14px; opacity:.95; max-width:560px; }

/* 記事詳細 */
.breadcrumb{ background:var(--white); border-bottom:1px solid #f3dbe1; }
.breadcrumb-inner{ max-width:860px; margin:0 auto; padding:14px 24px; font-size:12.5px; color:var(--text-sub); }
.breadcrumb-inner a{ color:var(--text-sub); }
.breadcrumb-inner a:hover{ color:var(--pink); }
.breadcrumb-inner .current{ color:var(--text); }
.breadcrumb-inner span{ margin:0 6px; }

.article{ max-width:860px; margin:0 auto; padding:40px 24px 0; }
.article-head h1{ font-size:28px; font-weight:900; line-height:1.5; margin:14px 0 12px; }
.article-meta{ font-size:12.5px; color:var(--text-sub); }
.article-eyecatch{ height:320px; border-radius:20px; background-size:cover; background-position:center; margin:28px 0 40px; }
.article-body{ font-size:15.5px; }
.article-body .lead{ font-size:16px; color:var(--text); margin-bottom:32px; }
.article-body h2{ font-size:20px; font-weight:900; margin:48px 0 18px; padding-top:8px; border-top:3px solid var(--pink-soft); }
.article-body h3{ font-size:16.5px; font-weight:700; margin-bottom:8px; }
.article-body p{ margin-bottom:18px; color:var(--text); }

.toc{ background:var(--white); border:1px solid #f3dbe1; border-radius:16px; padding:20px 24px; margin-bottom:36px; }
.toc-title{ font-weight:700; font-size:14px; color:var(--pink-deep); margin-bottom:10px; }
.toc ol{ padding-left:20px; font-size:14px; color:var(--text-sub); }
.toc li{ margin-bottom:4px; }

.ranking-item{ background:var(--white); border:1px solid #f3dbe1; border-radius:18px; padding:26px 26px 22px; margin-bottom:20px; position:relative; }
.rank-badge{ display:inline-block; background:var(--pink); color:#fff; font-weight:700; font-size:12.5px; padding:5px 14px; border-radius:999px; margin-bottom:12px; }
.cta-button{ display:inline-block; margin-top:12px; background:linear-gradient(135deg, var(--pink), var(--pink-deep)); color:#fff; font-weight:700; font-size:14px; padding:13px 26px; border-radius:999px; box-shadow:0 8px 20px rgba(232,58,104,.25); }

.nana-comment{ display:flex; gap:18px; align-items:flex-start; background:var(--pink-soft); border-radius:18px; padding:24px; margin:36px 0; }
.nana-comment img{ width:56px; height:56px; border-radius:50%; object-fit:cover; flex-shrink:0; border:3px solid var(--white); }
.nana-comment-role{ font-size:12px; font-weight:700; color:var(--pink-deep); margin-bottom:6px; }
.nana-comment-body p:last-child{ font-size:14.5px; color:var(--text); margin-bottom:0; }

.next-articles{ max-width:860px; margin:64px auto 0; padding:0 24px 20px; }
.next-articles .card-grid{ grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); }

/* カテゴリ一覧 */
.category-head{ max-width:860px; margin:0 auto; padding:48px 24px 0; text-align:center; }
.category-head h1{ font-size:30px; font-weight:900; margin:10px 0 16px; }
.category-desc{ font-size:14.5px; color:var(--text-sub); max-width:600px; margin:0 auto; }
.category-list{ max-width:1120px; margin:48px auto 0; padding:0 24px; }
.card-grid-list{ grid-template-columns:repeat(3,1fr); }
.pagination{ display:flex; justify-content:center; gap:10px; margin:44px 0 0; font-size:14px; font-weight:700; }
.pagination a, .pagination span{ padding:9px 16px; border-radius:10px; color:var(--text-sub); border:1px solid #f3dbe1; }
.pagination .current{ background:var(--pink); color:#fff; border-color:var(--pink); }
.pagination a:hover{ border-color:var(--pink); color:var(--pink); }
.other-categories{ max-width:1120px; margin:80px auto 0; padding:0 24px; }
.other-categories .category-grid{ grid-template-columns:repeat(5,1fr); }

/* Footer */
.site-footer{ margin-top:88px; padding:48px 24px; background:#2c2020; color:#fff; }
.footer-inner{ max-width:1120px; margin:0 auto; text-align:center; }
.footer-logo{ font-family:"Zen Maru Gothic",sans-serif; font-weight:900; font-size:18px; margin-bottom:16px; }
.footer-nav{ display:flex; gap:24px; justify-content:center; font-size:13px; opacity:.85; margin-bottom:20px; flex-wrap:wrap; }
.footer-copy{ font-size:12px; opacity:.6; }

/* アイキャッチ画像（imgタグ・トリミングなし） */
.article-eyecatch-img{
  width:100%; height:auto; display:block;
  border-radius:20px; margin:28px 0 40px;
}
/* Responsive */
@media (max-width:860px){
  .hero-inner{ flex-direction:column-reverse; text-align:center; gap:32px; }
  .hero-sub{ margin:0 auto; }
  .hero-text h1{ font-size:28px; }
  .diagnosis-options{ flex-direction:column; align-items:center; }
  .card-grid{ grid-template-columns:1fr; }
  .category-grid{ grid-template-columns:repeat(2,1fr); }
  .nana-inner{ flex-direction:column; text-align:center; }
  .nav{ display:none; }
  .card-grid-list{ grid-template-columns:1fr; }
  .other-categories .category-grid{ grid-template-columns:repeat(2,1fr); }
  .next-articles .card-grid{ grid-template-columns:1fr; }
  .article-eyecatch{ height:200px; }
}