/* =========================================
   爆速性癖チェッカー  全ページ統合 style.css
   v2025-10-12
   - ヘッダー/フッター/レイアウト
   - 記事一覧・記事詳細（mvap-*）
   - 診断/結果
   - 人気AV/アフィカード
   - FAQ/フォーム/シェア/広告
   - 共通ユーティリティ
   ========================================= */

/* ---------- Tokens ---------- */
:root{
  --ink:#222;
  --ink-weak:#555;
  --bg:#fff;
  --paper:#fff;
  --surface:#fff;
  --line:#f2d6e5;
  --pink-50:#fff0f7;
  --pink-100:#ffe4f1;
  --pink-300:#ff9bc8;
  --pink-500:#ff4fa3;
  --pink-600:#e83e8c;
  --ring: rgba(232,62,140,.35);
  --radius:16px;
  --container:1120px;
  --header-h:46px;

  --link:#e83e8c;
  --link-visited:#a72c65;
  --link-hover:#ff4fa3;
}

/* ---------- Base ---------- */
*{ box-sizing: border-box; }
html{
  scroll-behavior:smooth;
  scroll-padding-top: calc(var(--header-h) + env(safe-area-inset-top));
}
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0; color:var(--ink); background:#fffafc;
  font-family: system-ui,-apple-system,"Segoe UI",Roboto,
               "Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic UI",sans-serif;
  line-height:1.8;
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
figure{ margin:0; }
.container{ max-width:var(--container); margin:auto; padding:0 20px; }
.section{ padding:56px 0; }
.section-title{ font-size:1.6rem; margin:0 0 8px; }
.section-intro{ color:var(--ink-weak); margin:0 0 18px; }
hr{ border:none; border-top:1px solid #f0e1ea; margin:20px 0; }

/* ---------- Utilities ---------- */
.hide{ display:none !important; }
.center{ text-align:center; }
.m0{ margin:0 !important; }
.mt8{ margin-top:8px !important; } .mt16{ margin-top:16px !important; } .mt24{ margin-top:24px !important; }
.mb8{ margin-bottom:8px !important; } .mb16{ margin-bottom:16px !important; } .mb24{ margin-bottom:24px !important; }
.p16{ padding:16px !important; } .p24{ padding:24px !important; }
.round{ border-radius:12px !important; }
.shadow{ box-shadow:0 10px 24px rgba(232,62,140,.08); }

/* ===================================================
   Header / Global Nav
   =================================================== */
.site-header{
  position:sticky; top:0; z-index:1000;
  background:#fff; border-bottom:1px solid #f0d2e4;
  backdrop-filter:saturate(140%) blur(6px);
  padding-top: env(safe-area-inset-top);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:8px; min-height:var(--header-h); padding:4px 0;
}
.logo{
  display:inline-flex; align-items:center; gap:6px;
  font-weight:800; color:var(--pink-600);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width:50vw; font-size:clamp(14px,3.4vw,16px); line-height:1.2;
}
.nav{
  display:flex; align-items:center; gap:8px;
  max-width:46vw; white-space:nowrap;
  overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scrollbar-width:none;
  mask-image:linear-gradient(90deg,transparent 0,#000 10px,#000 calc(100% - 10px),transparent 100%);
}
.nav::-webkit-scrollbar{ display:none; }
.nav a{
  display:inline-flex; align-items:center; white-space:nowrap;
  color:#333; padding:6px 10px; border-radius:12px; font-size:13px; line-height:1.2;
}
.nav a:hover, .nav a:focus-visible{
  background:var(--pink-50); color:var(--pink-600); outline:2px solid transparent;
}
.nav .btn-small{
  padding:6px 12px; font-weight:700;
  background:linear-gradient(90deg,var(--pink-600),var(--pink-500));
  color:#fff; box-shadow:0 10px 24px rgba(232,62,140,.25);
}

/* compact on small screens */
@media (max-width:900px){ .logo{ max-width:52vw; } .nav{ max-width:44vw; } }
@media (max-width:600px){ .logo{ max-width:60vw; } .nav{ max-width:38vw; } }
@media (max-width:360px){ .logo{ max-width:64vw; } .nav{ max-width:34vw; } }

/* Mobile: wrap to two rows to show all links */
@media (max-width:600px){
  :root{ --header-h: 44px; }
  .header-inner{
    align-items:flex-start; justify-content:flex-start; flex-wrap:wrap; gap:6px 10px;
    min-height:auto; padding:6px 0;
  }
  .logo{ max-width:100%; font-size:15px; margin-bottom:2px; }
  .nav{
    order:2; width:100%; max-width:none;
    display:flex; flex-wrap:wrap; gap:8px 10px;
    white-space:normal; overflow:visible; mask-image:none;
  }
  .nav a{ font-size:13.5px; padding:7px 10px; border-radius:10px; }
}

/* ---------- Footer ---------- */
.site-footer{
  background:#fff; border-top:1px solid #f6cfe1; padding:24px 0; color:#666;
}
.site-footer .container{
  display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;
}
.site-footer a{ color: var(--link); text-decoration: underline; }
.site-footer a:hover{ color: var(--link-hover); }

/* ===================================================
   Link styles (site-wide)
   =================================================== */
a:not(.btn-primary):not(.btn-ghost):not(.logo):not(.aff-card):not(.card-link){
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: .12em;
  text-underline-offset: .18em;
  transition: color .15s ease, text-decoration-color .15s ease, background .15s ease;
}
a:not(.btn-primary):not(.btn-ghost):not(.logo):not(.aff-card):not(.card-link):visited{
  color: var(--link-visited);
}
a:not(.btn-primary):not(.btn-ghost):not(.logo):not(.aff-card):not(.card-link):hover{
  color: var(--link-hover);
  text-decoration-color: currentColor;
  background: rgba(255, 79, 163, .08);
}
a:focus-visible{
  outline: 3px solid var(--ring);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ===================================================
   Buttons
   =================================================== */
.btn-primary{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  background:linear-gradient(90deg, var(--pink-600), var(--pink-500));
  color:#fff; border-radius:999px; font-weight:700;
  box-shadow:0 10px 24px rgba(232,62,140,.25);
  padding:12px 20px; transition: transform .05s ease, box-shadow .2s;
}
.btn-primary:hover{ transform:translateY(-1px); box-shadow:0 14px 28px rgba(232,62,140,.35); }
.btn-ghost{
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--pink-600); background:var(--pink-50);
  border-radius:999px; font-weight:700; border:1px solid #ffd2e6; padding:12px 20px;
}
.btn-xxl{ font-size:1.25rem; padding:16px 28px; }
.btn-lg{ padding:12px 20px; }
.btn{ display:inline-flex; align-items:center; justify-content:center; padding:.7rem 1rem; border-radius:999px; border:1px solid #ddd; background:#fff; }

/* ===================================================
   Hero (Generic)
   =================================================== */
.hero{ padding:72px 0 48px; background:linear-gradient(180deg, #fff7fb, #fff); }
.hero h1{ font-size:clamp(1.8rem, 3vw, 3rem); letter-spacing:.02em; }
.hero .lead, .hero-lead{ color:var(--ink-weak); margin:.6rem 0 1.2rem; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:12px; }

/* ===================================================
   Articles List (articles.html)
   =================================================== */
.breadcrumbs{ font-size:.9rem; color:#666; margin:8px 0 16px; }
.breadcrumbs a{ color:inherit; text-decoration:underline; }

.pill-cats{ display:flex; gap:8px; flex-wrap:wrap; margin:8px 0 12px; }
.pill-cats .pill{
  padding:.45rem .8rem; border:1px solid #eee; border-radius:999px; background:#fafafa; cursor:pointer;
}
.pill-cats .pill.active{ background:#ffe6ef; border-color:#ffc2d4; }

.toolbar{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin:8px 0 20px; }
.toolbar .search{ flex:1; min-width:220px; }
.toolbar input[type="search"]{ width:100%; padding:10px; border:1px solid #ddd; border-radius:10px; }
.toolbar .select{ display:flex; gap:8px; }
.toolbar select{ padding:10px; border:1px solid #ddd; border-radius:10px; background:#fff; }

.cards, .articles-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:18px;
}
#cards, .cards, .articles-grid{ height:auto !important; max-height:none !important; overflow:visible !important; }

/* Card Core */
.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; transition: transform .06s, box-shadow .2s;
}
.card:hover{ transform:translateY(-2px); box-shadow:0 14px 30px rgba(0,0,0,.06); }
.card a{ color:inherit; text-decoration:none; display:block; height:100%; }
.thumb{ position:relative; overflow:hidden; background:#f8f2f5; border-radius:14px; }
.thumb::before{ content:""; display:block; padding-top:56.25%; } /* 16:9 */
.thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.card .body{ padding:12px 14px; }
.card h2{ font-size:1.05rem; margin:0 0 6px; }
.meta{ font-size:.85rem; color:#777; display:flex; gap:10px; align-items:center; }
.meta .tag{ font-size:.75rem; background:#f4f8ff; border:1px solid #e5eeff; padding:.2rem .5rem; border-radius:999px; }
.excerpt{ margin:10px 0 0; color:#444; line-height:1.7; }

/* ===================================================
   Article Detail (mvap-*)
   =================================================== */
.article h1{ margin:14px 0; }
.mvap-lead{
  font-size:16px; color:#444; background:var(--paper);
  border:1px solid #eee; border-radius:16px; padding:16px; margin:12px 0 20px;
}
.mvap-wrap{ display:grid; grid-template-columns:1fr; gap:24px; }

/* TOC（追従なし。必要なら .is-sticky を付与で有効化） */
.mvap-toc{
  background:var(--paper); border:1px solid #eee; border-radius:16px; padding:16px;
}
.mvap-toc.is-sticky{ position:sticky; top:80px; }
.mvap-toc h2{ font-size:16px; margin:0 0 8px; }
.mvap-toc ol{ margin:0; padding-left:18px; line-height:1.7; }
.mvap-toc a{ text-decoration:none; }

/* Section + Visual (16:9) */
.mvap-section{ margin:48px 0 24px; }
.mvap-visual{ margin:12px 0 0; border:1px dashed #e4e4e7; border-radius:12px; overflow:hidden; background:#fafafa; }
.mvap-visual img{ display:block; width:100%; height:auto; aspect-ratio:16 / 9; object-fit:cover; }
.mvap-visual figcaption{ font-size:12px; color:#777; padding:6px 10px 10px; }

/* 筆者の考え（ページ末尾） */
.mvap-thoughts{
  display:grid; grid-template-columns:1.4fr 1fr; gap:16px;
  border:2px solid var(--pink-500); border-radius:16px; padding:16px; background:#fff5f8; margin:36px 0;
}
.mvap-thoughts h3{ margin:0 0 8px; font-size:18px; }
.mvap-thoughts .mvap-thoughts-img{
  border-radius:12px; overflow:hidden; background:#fff; border:1px solid #eee;
}
.mvap-thoughts .mvap-thoughts-img img{ width:100%; height:auto; display:block; aspect-ratio:16/9; object-fit:cover; }

@media (max-width:800px){
  .mvap-thoughts{ grid-template-columns:1fr; }
}

/* 記事末ボタン */
.mvap-bottom-nav{ display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }
.mvap-btn{ display:inline-block; padding:10px 14px; border-radius:999px; border:1px solid #e5e7eb; background:#fff; text-decoration:none; }

/* ===================================================
   Quiz / Result
   =================================================== */
.quiz-box{ background:#fff; border:1px solid #f2d6e5; border-radius:var(--radius); padding:20px; }
.question{ font-weight:700; margin:0 0 12px; }
.choices{ display:grid; gap:10px; }
.choice{
  display:flex; align-items:center; gap:10px; padding:12px 14px;
  border:1px solid #f2d6e5; border-radius:12px; background:#fff; cursor:pointer;
  transition: background .15s ease, border-color .15s ease;
}
.choice:hover{ background:#fff7fb; border-color:#ffd2e6; }
.choice input{ accent-color: var(--pink-600); }

/* Result summary */
.result-card{
  background:#fff; border:1px solid #f2d6e5; border-radius:16px; padding:16px;
}
.result-tags{ display:flex; flex-wrap:wrap; gap:8px; }
.tag{
  display:inline-flex; align-items:center; gap:6px;
  padding:.35rem .65rem; background:#fff0f7; border:1px solid #ffd2e6; border-radius:999px;
  font-size:.85rem;
}

/* ===================================================
   Popular / Affiliate Cards
   =================================================== */
.aff-cards{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px;
}
@media (max-width:768px){ .aff-cards{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; } }
@media (max-width:480px){ .aff-cards{ grid-template-columns:1fr; gap:12px; } .aff-thumb{ aspect-ratio:4/3; } }

.aff-card{
  display:flex; flex-direction:column; background:#fff; border:1px solid #f2d6e5; border-radius:12px;
  overflow:hidden; text-decoration:none; transition: transform .12s ease, box-shadow .2s ease;
}
.aff-card:hover{ transform: translateY(-2px); box-shadow:0 6px 16px rgba(0,0,0,.08); }
.aff-thumb{ position:relative; width:100%; aspect-ratio:16/9; background:#f8f2f5; overflow:hidden; display:block; }
.aff-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.aff-badge{ position:absolute; top:6px; left:6px; font-size:11px; line-height:1; padding:4px 6px; background:var(--pink-600); color:#fff; border-radius:6px; }
.aff-body{ padding:12px 12px 14px; }
.aff-title{ margin:0 0 6px; font-size:14px; line-height:1.5; display:block; overflow:hidden; max-height: calc(1.5em * 2); }
.aff-desc{ font-size:12.5px; color:var(--ink-weak); margin:0; }

/* 旧 popular-grid のハードニング（HTMLそのままでも綺麗に） */
.popular-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
.popular-grid > div{ margin:0; padding:0; }
.popular-grid > div > a{ display:block; text-decoration:none; color:inherit; background:#fff; border:1px solid #f2d6e5; border-radius:12px; padding:6px; }
.popular-grid > div img{ display:block; width:100%; height:auto; border-radius:8px; }
@supports (aspect-ratio: 3 / 4){
  .popular-grid > div img{ aspect-ratio:3 / 4; object-fit:cover; }
}
.popular-grid > div span{ word-break:break-all; line-height:1.45; }

/* ===================================================
   FAQ / Forms
   =================================================== */
.faq{ background:#fff; border:1px solid #f2d6e5; border-radius:12px; padding:12px 14px; margin:8px 0; }
.faq > summary{ cursor:pointer; font-weight:700; }
.contact-form{ display:grid; gap:12px; max-width:640px; }
input, textarea{
  width:100%; padding:12px 14px; border:1px solid #eec3d8; border-radius:12px; background:#fff;
}
input:focus-visible, textarea:focus-visible{ outline:3px solid var(--ring); outline-offset:2px; }

/* ===================================================
   Share
   =================================================== */
#share-bar{ display:flex; flex-wrap:wrap; gap:12px; }
.share-row{ display:flex; flex-wrap:wrap; gap:12px; }
.share-note{
  display:block; flex:0 0 100%; min-width:100%;
  line-height:1.8; font-size:14px; color:#666; margin-top:8px;
}

/* ===================================================
   Ads
   =================================================== */
.ad-slot{
  min-height:80px; border:1px dashed #f4bdd6; border-radius:12px; margin:14px auto;
}
.widget-banner, .widget-banner-script{ display:block; width:100%; }

/* ===================================================
   “診断に戻る”ボタン（共通）
   =================================================== */
.back-to-diagnosis{ margin:18px 0; display:flex; justify-content:center; }
.btn-return{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 18px; border-radius:999px; border:1px solid var(--line);
  background: var(--pink-600); color:#fff; font-weight:700; text-decoration:none;
}
.btn-return:focus-visible{ outline:3px solid #ffd1e6; outline-offset:2px; }

/* ===================================================
   Responsive helpers
   =================================================== */
@media (max-width:960px){
  .mvap-wrap{ grid-template-columns:1fr; }
}
@media (max-width:800px){
  .aff-title{ max-height:none; }
}

/* ===================================================
   Print (簡易)
   =================================================== */
@media print{
  .site-header, .nav, #share-bar, .ad-slot, .back-to-diagnosis{ display:none !important; }
  a{ text-decoration:none; }
  body{ background:#fff; }
}
/* 記事一覧は全件表示を強制（他CSSの nth-child 非表示を無効化） */
#cards .card:nth-child(n+7){ display:block !important; visibility:visible !important; opacity:1 !important; }