/*
Theme Name: 髪と頭皮のケアガイド (Hair Care Guide)
Theme URI: https://www.hair-care-guide.com/
Description: AGA・FAGA・育毛剤・頭皮ケアの比較／診断メディア用オリジナルテーマ。LINE Seed JP・白基調・「カード病」を避けるデザイン憲法に準拠。トップは「悩み調査 → 心理 → 自宅ケア → 相談」の感情導線。
Author: 編集部
Version: 1.5.3
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: hcg
*/

  /* ===== 配色：背景は白がメイン。緑・オレンジ・黄緑・黄色は差し色 ===== */
  :root{
    --green:#10A453; --green-d:#0A7C3D; --lime:#8CCB32; --orange:#F5821F; --orange-d:#DD7016; --gold:#F7B500;
    --gold-d:#EAA200; --silver:#8FA0AD; --bronze:#DC8128;
    --ink:#1F2A23; --ink-2:#5E6A62; --ink-3:#8B958D; --line:#E7ECE8; --thumb:#F2F4F2; --fv:url("assets/img/fv-hero.jpg"); --fv-mb:url("assets/img/fv-hero-sp.jpg");
  }
  /* font-weight は 600 まで */
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{font-family:'LINE Seed JP','Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif;color:var(--ink);background:#fff;font-size:16px;line-height:1.85;font-weight:400;-webkit-font-smoothing:antialiased;padding-bottom:66px}
  .wrap{max-width:1120px;margin:0 auto;padding:0 28px}
  a{color:inherit;text-decoration:none}
  :focus-visible{outline:2px solid var(--green);outline-offset:2px;border-radius:4px}
  .b{font-weight:600}

  header{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.95);backdrop-filter:blur(8px);box-shadow:0 1px 0 var(--line)}
  .nav{display:flex;align-items:center;justify-content:space-between;height:66px}
  .brand{display:flex;align-items:center;gap:9px;font-weight:600;font-size:18px}
  .brand .leaf{width:24px;height:24px;border-radius:7px;background:var(--green);display:flex;align-items:center;justify-content:center;flex:none}
  .nav menu{display:flex;gap:26px;list-style:none;font-size:14px;font-weight:600;color:var(--ink-2)}
  .nav menu a:hover{color:var(--green)}
  .nav-cta{font-size:14px;font-weight:600;color:#fff;background:var(--orange);padding:9px 18px;border-radius:8px}
  .nav-cta:hover{background:var(--orange-d)}

  /* ===== FV（WILL風）：白背景＋右にイラスト ===== */
  .hero{position:relative;background:#fff;overflow:hidden;min-height:min(84vh,720px);display:flex;align-items:center;padding:48px 0}
  .hero::after{content:"";position:absolute;inset:0;background:var(--fv) no-repeat right bottom;background-size:cover;z-index:0;pointer-events:none}
  .hero::before{content:"";position:absolute;inset:0;background:linear-gradient(92deg,#fff 17%,rgba(255,255,255,.74) 44%,rgba(255,255,255,0) 68%);z-index:1;pointer-events:none}
  .hero .wrap{position:relative;z-index:2;width:100%}
  .eyebrow-h{display:flex;align-items:center;gap:12px;font-size:12px;font-weight:600;letter-spacing:.14em;color:var(--ink-3)}
  .eyebrow-h::before{content:"";width:34px;height:1.5px;background:var(--green)}
  .hero h1{font-weight:600;font-size:clamp(34px,5.2vw,58px);line-height:1.4;margin-top:20px;max-width:14em}
  .hero h1 .u{background:linear-gradient(transparent 56%,rgba(140,203,50,.5) 56%);padding:0 2px}
  .hero .sub{margin-top:18px;font-size:16px;color:var(--ink-2);max-width:22em}
  .hero-cta{display:flex;align-items:center;gap:22px;margin-top:30px;flex-wrap:wrap}
  .btn-p{font-family:inherit;font-weight:600;background:var(--orange);color:#fff;font-size:15.5px;padding:15px 30px;border-radius:999px;display:inline-flex;align-items:center;gap:10px;border:none;cursor:pointer;transition:background .15s}
  .btn-p:hover{background:var(--orange-d)}
  .btn-g{font-weight:600;font-size:15px;color:var(--ink);display:inline-flex;align-items:center;gap:8px}
  .btn-g:hover{color:var(--green)}
  .trust-row{margin-top:26px;display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;font-size:12.5px;color:var(--ink-2)}
  .pr-pill{background:var(--ink);color:#fff;font-size:11px;font-weight:600;padding:3px 9px;border-radius:5px}
  .trust-row a{color:var(--green);font-weight:600}

  /* ===== カテゴリ横一列（WILLサービス欄風・フラット） ===== */
  .cstrip{display:grid;grid-template-columns:repeat(6,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .ci{display:flex;flex-direction:column;align-items:center;gap:9px;padding:26px 8px;text-align:center;transition:background .12s}
  .ci + .ci{box-shadow:-1px 0 0 var(--line)}
  .ci:hover{background:#FAFBFA}
  .ci .jl{font-weight:600;font-size:14.5px}
  .ci:hover .jl{color:var(--green)}
  .ci .el{font-size:10px;letter-spacing:.1em;color:var(--ink-3)}

  .section{padding:58px 0}
  .eyebrow{display:flex;align-items:center;gap:11px;font-size:12px;font-weight:600;letter-spacing:.12em;color:var(--green)}
  .eyebrow::before{content:"";width:26px;height:1.5px;background:var(--green)}
  .h2{font-weight:600;font-size:clamp(23px,3vw,30px);line-height:1.4;margin-top:12px}
  .meta{margin-top:14px;display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;font-size:12.5px;color:var(--ink-2)}
  .meta a{color:var(--green);font-weight:600;text-decoration:underline;text-underline-offset:3px}

  /* 信頼（フラット3カラム） */
  .why{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
  .why .c{display:flex;gap:14px;align-items:flex-start}
  .why .ic{width:40px;height:40px;color:var(--green);flex:none;display:flex;align-items:center;justify-content:center}
  .why .ttl{font-weight:600;font-size:15.5px}
  .why .d{font-size:13px;color:var(--ink-2);margin-top:3px;line-height:1.7}

  .lead-sub{margin-top:12px;font-size:14.5px;color:var(--ink-2);max-width:40em}
  .rank-note{margin-top:18px;font-size:12px;color:var(--ink-2);line-height:1.75;max-width:62em;border-left:3px solid var(--line);padding-left:14px}
  .rank-note a{color:var(--green);font-weight:600;text-decoration:underline;text-underline-offset:3px;margin-left:4px}
  .findlist{margin-top:24px;border-top:1px solid var(--line)}
  .fitem{display:flex;align-items:center;gap:20px;padding:22px 6px 22px 20px;border-left:4px solid var(--ac,var(--green));box-shadow:0 1px 0 var(--line);transition:background .12s}
  .fitem:hover{background:#FAFBFA}
  .fitem .fttl{font-weight:600;font-size:16.5px;line-height:1.4}
  .fitem:hover .fttl{color:var(--green)}
  .fitem .fdesc{font-size:13px;color:var(--ink-2);margin-top:4px;line-height:1.7;max-width:48em}
  .fitem .farrow{margin-left:auto;color:var(--green);font-weight:600;font-size:18px;flex:none}

  /* v12 additions */
  .hero-mb{display:none;width:100%;height:220px;background:var(--fv-mb) no-repeat center/cover;overflow:hidden}
  .chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
  .chip{display:inline-flex;align-items:center;font-size:13.5px;font-weight:600;color:var(--ink);background:#F3F5F3;padding:10px 16px;border-radius:999px;transition:background .12s,color .12s}
  .chip:hover{background:#EAEFEA;color:var(--green)}
  .qa3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:24px}
  .qa{border-left:3px solid var(--green);padding-left:16px}
  .qa .qn{font-size:12px;font-weight:600;color:var(--green)}
  .qa .qt{font-weight:600;font-size:16px;margin-top:4px}
  .qa .qd{font-size:13px;color:var(--ink-2);margin-top:7px;line-height:1.75}
  .inline-cta{display:inline-block;margin-top:24px;font-weight:600;color:var(--green);font-size:14.5px}
  .inline-cta:hover{color:var(--green-d)}
  .branch{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:26px}
  .bcard{border-left:4px solid var(--ac,var(--green));padding:2px 0 2px 20px;transition:background .12s}
  .bcard .bnum{font-size:12px;font-weight:600;color:var(--ac,var(--green));letter-spacing:.02em}
  .bcard .btt{font-weight:600;font-size:16.5px;margin-top:9px;line-height:1.45}
  .bcard:hover .btt{color:var(--green)}
  .bcard .bdd{font-size:13px;color:var(--ink-2);margin-top:9px;line-height:1.75}
  .bcard .blink{display:inline-block;margin-top:13px;font-weight:600;color:var(--green);font-size:13.5px}
  td.fit{font-size:12.5px;color:var(--ink-2)}
  @media(max-width:880px){ .hero{padding-top:24px} .hero .wrap{display:flex;flex-direction:column} .hero-mb{display:block;order:-1;margin:0 0 22px} .qa3{grid-template-columns:1fr;gap:18px} .branch{grid-template-columns:1fr;gap:22px} }

  /* ===== ランキング（フラット・角丸カード廃止） ===== */
  .rank{margin-top:8px}
  .rk-item{padding:30px 6px 30px 26px;border-left:4px solid var(--silver)}
  .rk-item + .rk-item{margin-top:10px}
  .rk-item.no1{border-left-color:var(--gold-d)} .rk-item.r2{border-left-color:var(--silver)} .rk-item.r3{border-left-color:var(--bronze)}
  .ctop{display:flex;align-items:flex-start;gap:18px;flex-wrap:wrap}
  .medal{flex:none;width:50px;text-align:center}
  .medal .rk{font-weight:600;font-size:13px;border-radius:8px;padding:7px 0;display:block;color:#fff}
  .medal .rk.g{background:var(--gold-d)} .medal .rk.s{background:var(--silver)} .medal .rk.b{background:var(--bronze)}
  .medal .star{font-size:11px;color:var(--gold);margin-top:6px;display:block;letter-spacing:1px}
  .chead{flex:1;min-width:210px}
  .chead .bestfor{display:inline-block;font-size:11px;font-weight:600;color:#fff;background:var(--orange);padding:3px 11px;border-radius:6px;margin-bottom:7px}
  .chead .name{font-weight:600;font-size:21px;line-height:1.3}
  .chead .lead{font-size:13.5px;color:var(--ink-2);margin-top:5px;line-height:1.7;max-width:42em}
  .crate{flex:none;text-align:center;min-width:92px}
  .crate .lab{font-size:11px;color:var(--ink-2)}
  .crate .num{font-size:36px;font-weight:600;color:var(--green);line-height:1}
  .crate .st{font-size:12px;color:var(--gold);letter-spacing:1px}
  .facts{display:grid;grid-template-columns:repeat(4,1fr);gap:14px 26px;margin-top:20px;max-width:760px}
  .facts .k{font-size:11px;color:var(--ink-2)}
  .facts .v{font-weight:600;font-size:16px;margin-top:3px}
  .facts .v small{font-weight:400;font-size:11px;color:var(--ink-2)}
  .scores{display:flex;gap:20px;margin-top:18px;flex-wrap:wrap;font-size:12.5px;color:var(--ink-2)}
  .scores b{font-size:16px}
  .mk-g{color:var(--green)} .mk-o{color:var(--gold)} .mk-n{color:var(--silver)}
  .pros{margin-top:14px;font-size:13px;display:flex;flex-direction:column;gap:5px}
  .pros span{display:flex;gap:8px;align-items:flex-start}
  .pros .ck{color:var(--green);font-weight:600;flex:none}
  .cbtns{display:flex;gap:12px;margin-top:20px;flex-wrap:wrap;max-width:760px}
  .cbtns .go{flex:1;min-width:200px;text-align:center;background:var(--orange);color:#fff;font-weight:600;font-size:15px;padding:14px 0;border-radius:10px;transition:background .15s}
  .cbtns .go:hover{background:var(--orange-d)}
  .cbtns .rev{flex:none;text-align:center;color:var(--green);font-weight:600;font-size:14px;padding:14px 24px;border-radius:10px;border:1.5px solid var(--green);transition:background .12s}
  .cbtns .rev:hover{background:#F4FAF6}

  /* 一覧比較テーブル */
  .tablewrap{margin-top:24px;overflow-x:auto}
  table{width:100%;border-collapse:collapse;min-width:760px;font-size:14px}
  thead th{font-size:12.5px;font-weight:600;color:var(--ink-2);text-align:center;padding:0 10px 12px;border-bottom:2px solid var(--ink)}
  thead th:first-child{text-align:left}
  tbody td{padding:18px 10px;text-align:center;border-bottom:1px solid var(--line)}
  tbody td:first-child{text-align:left;font-weight:600}
  .mark{font-size:19px;font-weight:600}
  .mark.g{color:var(--green)}.mark.o{color:var(--gold)}.mark.t{color:var(--silver)}
  td .mini{display:inline-block;background:var(--orange);color:#fff;font-size:12px;font-weight:600;padding:8px 16px;border-radius:8px}
  td .mini:hover{background:var(--orange-d)}
  .note{margin-top:14px;font-size:11.5px;color:var(--ink-2)}

  /* 新着記事：左カテゴリ＋12カード（フラット） */
  .art-layout{display:grid;grid-template-columns:220px 1fr;gap:40px;margin-top:28px;align-items:start}
  .cats{position:sticky;top:84px}
  .cats h3{font-size:12px;font-weight:600;color:var(--ink-3);letter-spacing:.1em;margin-bottom:6px}
  .cats a{display:flex;align-items:center;gap:11px;padding:11px 0;font-size:14px;font-weight:600;box-shadow:0 1px 0 var(--line)}
  .cats a:hover{color:var(--green)}
  .cats .dot{width:8px;height:8px;border-radius:50%;flex:none}
  .cats .cnt{margin-left:auto;font-size:12px;color:var(--ink-3);font-weight:400}
  .art-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:30px 24px}
  .acard{--cc:var(--green);--ct:linear-gradient(135deg,#10A453,#74C24C)}
  .acard.faga{--cc:var(--orange);--ct:linear-gradient(135deg,#F5821F,#FBB36A)}.acard.cost{--cc:#C98A12;--ct:linear-gradient(135deg,#F2A900,#FBD26A)}.acard.online{--cc:#5C9E00;--ct:linear-gradient(135deg,#0FA086,#7FCF9E)}
  .acard.side{--cc:#79848F;--ct:linear-gradient(135deg,#6C7B89,#A6B5C1)}.acard.ikumou{--cc:var(--green-d);--ct:linear-gradient(135deg,#0A7C3D,#56B06C)}.acard.camp{--cc:var(--orange);--ct:linear-gradient(135deg,#F5821F,#F7B500)}
  .acard.basic{--cc:#79848F;--ct:linear-gradient(135deg,#5E7A8C,#9DB6C4)}.acard.check{--cc:#5C9E00;--ct:linear-gradient(135deg,#5C9E00,#A0CB3F)}
  .acard .thumb{position:relative;aspect-ratio:4/3;background:var(--ct);display:flex;align-items:center;justify-content:center;overflow:hidden}
  .acard .thumb .cat{position:absolute;top:8px;left:8px;font-size:10.5px;font-weight:600;color:var(--cc);background:#fff;padding:2px 8px;border-radius:4px}
  .acard .ttl{font-weight:600;font-size:14.5px;line-height:1.55;margin-top:11px}
  .acard:hover .ttl{color:var(--green)}
  .acard .ex{margin-top:7px;font-size:13px;line-height:1.72;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .acard .by{font-size:11.5px;color:var(--ink-3);margin-top:9px;display:flex;align-items:center;gap:6px}
  .acard .by .av{width:18px;height:18px;border-radius:50%;background:var(--thumb);flex:none}

  /* 記事中CTA（左アクセントのフラット） */
  .read{max-width:740px}
  .rh{font-weight:600;font-size:21px;border-left:4px solid var(--green);padding-left:14px;line-height:1.5}
  .read p{margin-top:16px}
  .incta{margin-top:24px;border-left:4px solid var(--green);padding:6px 0 6px 22px}
  .incta .t{font-weight:600;font-size:16px}
  .incta .d{font-size:14px;color:var(--ink-2);margin-top:6px}
  .incta a{margin-top:12px;display:inline-flex;align-items:center;gap:7px;font-weight:600;color:var(--green);font-size:14.5px}

  /* FAQ */
  .faq{max-width:840px;margin-top:18px}
  .faq details{box-shadow:0 1px 0 var(--line)}
  .faq summary{cursor:pointer;list-style:none;padding:18px 0;font-weight:600;font-size:15.5px;display:flex;justify-content:space-between;gap:16px}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::after{content:"+";color:var(--green);font-weight:600;font-size:20px}
  .faq details[open] summary::after{content:"\2212"}
  .faq p{padding:0 0 18px;color:var(--ink-2);font-size:14px}

  .about{display:flex;gap:16px;flex-wrap:wrap;align-items:center;font-size:13px;color:var(--ink-2);padding-top:6px;box-shadow:0 -1px 0 var(--line);padding-top:30px}
  .about .links{display:flex;gap:18px;margin-left:auto}
  .about .links a{color:var(--green);font-weight:600;text-decoration:underline;text-underline-offset:3px}

  footer{margin-top:8px;background:#fff;box-shadow:0 -1px 0 var(--line);padding:46px 0 36px;color:var(--ink-2)}
  .foot{display:flex;justify-content:space-between;gap:26px;flex-wrap:wrap}
  .foot .fm{font-weight:600;font-size:17px;color:var(--green)}
  .foot ul{list-style:none;display:flex;flex-direction:column;gap:8px;font-size:13.5px}
  .foot ul a:hover{color:var(--green)}
  .fcopy{margin-top:30px;font-size:11.5px;line-height:1.8;color:var(--ink-3)}

  .cta-band{position:relative;background:linear-gradient(118deg,var(--green-d),var(--green));color:#fff;text-align:center;padding:74px 0;overflow:hidden}
  .cta-band .wrap{position:relative;z-index:1}
  .cta-band h2{font-weight:600;font-size:clamp(24px,3.4vw,34px);line-height:1.42}
  .cta-band p{margin:14px auto 0;font-size:15px;color:rgba(255,255,255,.92);max-width:34em}
  .cta-band .bw{margin-top:28px;display:inline-flex;align-items:center;gap:10px;background:var(--orange);color:#fff;font-weight:600;font-size:15.5px;padding:15px 34px;border-radius:999px;transition:transform .12s,background .12s}
  .cta-band .bw:hover{background:var(--orange-d);transform:translateY(-2px)}

  .mbar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:none;gap:10px;background:rgba(255,255,255,.97);backdrop-filter:blur(8px);padding:9px 16px;box-shadow:0 -1px 0 var(--line)}
  .mbar a{flex:1;text-align:center;font-weight:600;font-size:14px;padding:13px 0;border-radius:9px}
  .mbar .m1{background:var(--orange);color:#fff}.mbar .m2{color:var(--green);border:1.5px solid var(--green)}

  @media(max-width:980px){ .art-layout{grid-template-columns:1fr;gap:22px} .cats{position:static} .cats a{display:inline-flex;box-shadow:none;padding:8px 16px 8px 0} .cats nav{display:flex;flex-wrap:wrap;gap:2px 6px} }
  @media(max-width:880px){ .nav menu{display:none} .hero::after{display:none} .hero{min-height:auto} .hero h1,.hero .sub{max-width:none} .cstrip{grid-template-columns:repeat(3,1fr)} .ci+.ci{box-shadow:none} .why{grid-template-columns:1fr;gap:20px} .art-grid{grid-template-columns:repeat(2,1fr)} .facts{grid-template-columns:repeat(2,1fr)} }
  @media(max-width:620px){ .mbar{display:flex} .art-grid{grid-template-columns:1fr} .crate{min-width:0} }
  @media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}}

  /* === v15 追加：悩み調査（クリックで対策へ橋渡し） === */
  .find-grid{display:grid;grid-template-columns:repeat(6,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:26px}
  .fci{font-family:inherit;background:none;border:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:9px;padding:24px 8px;text-align:center;transition:background .12s;position:relative;color:var(--ink)}
  .fci + .fci{box-shadow:-1px 0 0 var(--line)}
  .fci:hover{background:#FAFBFA}
  .fci:hover .jl{color:var(--green)}
  .fci .jl{font-weight:600;font-size:14.5px}
  .fci .el{font-size:10px;letter-spacing:.1em;color:var(--ink-3)}
  .fci.active{background:#F2FAF5}
  .fci.active .jl{color:var(--green-d)}
  .fci.active::after{content:"";position:absolute;left:18%;right:18%;bottom:0;height:3px;background:var(--green);border-radius:3px 3px 0 0}
  .find-result{margin-top:24px;border-left:4px solid var(--green);padding:4px 0 4px 22px;display:none}
  .find-result.on{display:block;animation:fadein .18s ease}
  @keyframes fadein{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
  .find-result .rh{font-weight:600;font-size:16.5px;color:var(--ink);border-left:0;padding-left:0}
  .find-result .rb{margin-top:8px;font-size:14px;color:var(--ink-2);max-width:38em;line-height:1.8}
  .find-result .rl{display:inline-block;margin-top:14px;font-weight:600;color:var(--green);font-size:14px}
  @media(max-width:880px){ .find-grid{grid-template-columns:repeat(3,1fr)} .fci + .fci{box-shadow:none} }

/* ===== WordPress テンプレート用 追加スタイル ===== */
.admin-bar header{top:32px}
@media screen and (max-width:782px){.admin-bar header{top:46px}}
.crumb{font-size:12px;color:var(--ink-3);margin-bottom:18px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.crumb a{color:var(--ink-2)}.crumb a:hover{color:var(--green)}.crumb .cur{color:var(--ink-3)}
.post-h1{font-weight:600;font-size:clamp(24px,3.4vw,34px);line-height:1.45;margin-top:8px}
.post-meta{margin-top:12px;display:flex;gap:16px;font-size:12.5px;color:var(--ink-2)}
.post-fv{margin-top:24px}.post-fv img{width:100%;height:auto;display:block}
.entry{margin-top:26px;font-size:16px;line-height:1.95;color:var(--ink)}
.entry > * + *{margin-top:1.1em}
.entry h2{font-weight:600;font-size:22px;border-left:4px solid var(--green);padding-left:14px;line-height:1.5;margin-top:1.8em}
.entry h3{font-weight:600;font-size:18px;margin-top:1.6em;color:var(--green-d)}
.entry a{color:var(--green);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.entry ul,.entry ol{padding-left:1.4em}.entry li{margin-top:.45em}
.entry img{max-width:100%;height:auto}
.entry blockquote{border-left:4px solid var(--line);padding-left:16px;color:var(--ink-2);margin-top:1.2em}
.entry table{width:100%;border-collapse:collapse;font-size:14px;margin-top:1.2em}
.entry table th,.entry table td{padding:12px 10px;border-bottom:1px solid var(--line);text-align:left}
.arch-head{padding-bottom:8px}
.pager{display:flex;gap:8px;justify-content:center;margin-top:40px;flex-wrap:wrap}
.pager a,.pager span{font-weight:600;font-size:14px;padding:10px 16px;border-radius:8px;color:var(--ink-2)}
.pager a:hover{color:var(--green)}.pager .current{background:var(--green);color:#fff}
.aligncenter{display:block;margin-inline:auto}.alignright{float:right;margin:0 0 1em 1.5em}.alignleft{float:left;margin:0 1.5em 1em 0}
.wp-caption{max-width:100%}.wp-caption-text{font-size:12px;color:var(--ink-3);margin-top:6px;text-align:center}
.searchform{display:flex;gap:8px;margin-top:16px;max-width:520px}
.searchform input[type=search]{flex:1;border:1.5px solid var(--line);border-radius:8px;padding:11px 14px;font-family:inherit;font-size:15px}
.searchform button{background:var(--green);color:#fff;border:none;border-radius:8px;padding:11px 18px;font-weight:600;cursor:pointer}

/* =====================================================================
   v2（修正版）：クリックできる“面”カード＝背景トーン＋左4pxアクセント
   ・border-radius / 囲みボックス / 浮かせ影は不使用（デザイン憲法準拠）
   ・画像はすべて 4:3（少し横長・正方形に近い）に固定
   ===================================================================== */

/* STEP3 自宅でできる対策／STEP4 よく聞かれること：白box＋角丸はやめ、背景トーンで“面”に */
.branch .bcard,
.qa3 .qa{
  display:block;background:#F4F7F4;
  border-left:4px solid var(--ac,var(--green));
  padding:22px 22px 20px;
  text-decoration:none;color:inherit;
  transition:background .14s ease;
}
.branch .bcard:hover,
.qa3 .qa:hover{background:#EAF0EA}
.qa3 .qa{--ac:var(--green)}
.qa3 .qa:hover .qt{color:var(--green)}
.qa3 .qa .qlink{display:inline-block;margin-top:12px;font-weight:600;color:var(--green);font-size:13px}

/* RANKING：左バナー画像（4:3）／右テキスト。角丸なし */
.rk-item{display:grid;grid-template-columns:200px 1fr;gap:24px;align-items:start}
.rk-img{margin:0;width:100%;aspect-ratio:4/3;overflow:hidden;background:#F2F5F2}
.rk-img img{width:100%;height:100%;object-fit:cover;display:block}
.rk-body{min-width:0}

/* COMPARE：サービス名セルにロゴ。角丸なし */
.cmp-logo{display:inline-flex;vertical-align:middle;margin-right:10px}
.cmp-logo img{width:40px;height:40px;object-fit:contain;background:#fff;display:block}

/* GUIDE 悩み・目的から探す：左アイキャッチ（4:3）／右テキスト。角丸なし */
.fitem{align-items:flex-start}
.fitem .fimg{margin:0;flex:none;width:150px;aspect-ratio:4/3;overflow:hidden;background:#F2F5F2}
.fitem .fimg img{width:100%;height:100%;object-fit:cover;display:block}

/* 記事中CTA：PCのみ左右2列・均等（スマホは縦並び） */
.selfcheck-2col{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:stretch;margin-top:8px}
.sc-card{border-left:4px solid var(--green);padding:2px 0 2px 22px;display:flex;flex-direction:column}
.sc-card .sc-h{font-weight:600;font-size:18px;line-height:1.5}
.sc-card .sc-d{margin-top:10px;color:var(--ink-2);font-size:15px;line-height:1.95;flex:1}
.sc-card .sc-link{margin-top:14px;display:inline-flex;align-items:center;gap:7px;font-weight:600;color:var(--green);font-size:14.5px}
.sc-card .sc-link:hover{color:var(--green-d)}

@media(max-width:880px){
  .rk-item{grid-template-columns:1fr;gap:14px}
  .rk-img{max-width:300px}
  .fitem .fimg{width:104px}
  .selfcheck-2col{grid-template-columns:1fr;gap:18px}
}

/* 編集ポリシー（信頼性）バンド：白基調の中で薄いニュートラルトーンの“面”として明示（緑帯ではない／カードでもない） */
.trust{background:#F6F8F7;padding:50px 0}
.trust .why{margin-top:28px}

/* ===== 悩みの声（VOICES）v1.4.6：引用ブロック・男女を表に出す（横4列×2行／枠で囲わない） ===== */
.pains .lead-sub{max-width:47em}
.pains-note{margin-top:8px;font-size:12px;color:var(--ink-3)}
.sp-br{display:none}
.pain-group{--ac:var(--green);margin-top:30px}
.pain-group.m{--ac:var(--green)}
.pain-group.f{--ac:var(--orange);margin-top:46px}

/* 男性／女性のラベル（タブではなく見出しとして常時表示） */
.pg-label{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;font-weight:600;font-size:19px;color:var(--ink);padding-left:14px;border-left:4px solid var(--ac);margin:0 0 20px;line-height:1.4}
.pg-sub{font-size:13px;font-weight:400;color:var(--ink-2)}

/* 声＝引用ブロック：枠線・角丸・影なし。淡いトーンの面＋大きな引用符。横4列×2行 */
.voice-list{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.voice{position:relative;display:flex;flex-direction:column;background:#F4F7F5;padding:24px 22px 22px}
.voice::before{content:"\201C";position:absolute;top:2px;left:14px;font-family:Georgia,'Times New Roman',serif;font-size:44px;line-height:1;color:#C6D2C9}
.voice::after{content:"\201D";position:absolute;right:14px;bottom:-10px;font-family:Georgia,'Times New Roman',serif;font-size:44px;line-height:1;color:#C6D2C9}
.voice blockquote{position:relative;z-index:1;font-size:14px;line-height:1.9;color:var(--ink);padding-top:8px}
.voice .who{margin-top:auto;padding-top:14px;font-weight:600;font-size:12.5px;color:var(--ac);letter-spacing:.02em}
.pain-group.f .voice .who{color:var(--orange-d)}

.pains-cta{margin:22px 0 2px;display:flex;flex-wrap:wrap;gap:10px}
.pc-btn{display:inline-flex;align-items:center;gap:8px;font-family:inherit;font-weight:600;font-size:14px;line-height:1;padding:13px 20px;border-radius:10px;border:1.5px solid var(--ac);transition:background .15s,filter .15s}
.pc-btn.is-outline{background:#fff;color:var(--ac)}
.pc-btn.is-outline:hover{background:#F1F5F1}
.pc-btn.is-primary{background:var(--ac);color:#fff}
.pc-btn.is-primary:hover{filter:brightness(.94)}
.pain-group.f .pc-btn.is-outline{color:var(--orange-d);border-color:var(--orange-d)}
.pains-close{margin-top:42px;text-align:center;background:#F6F8F7;padding:34px 24px}
.pains-close .esc{font-size:13.5px;color:var(--ink-2)}
.pains-close .lead{font-weight:600;font-size:clamp(17px,2.3vw,21px);line-height:1.6;margin-top:10px}
.pains-close .btn-p{margin-top:18px}
@media(max-width:880px){
  .sp-br{display:inline}
  .voice-list{grid-template-columns:1fr 1fr;gap:16px}
  .pain-group.f{margin-top:36px}
  .pains-close{padding:28px 18px}
}
@media(max-width:520px){
  .voice-list{grid-template-columns:1fr;gap:16px}
  .pains-cta{flex-direction:column;align-items:stretch}
  .pc-btn{justify-content:center;padding:14px 18px}
}

/* ===== 商材 詳細ページ（v1.5.0）：枠で囲わず、余白・左4px線・トーンで構造化 ===== */
.offer-detail .od-catch{font-weight:600;color:var(--green-d);font-size:15px;margin:8px 0 0;line-height:1.6}
.offer-detail .od-pr{margin-top:14px}
.offer-detail .od-img{margin:18px 0;background:var(--thumb)}
.offer-detail .od-img img{width:100%;max-height:380px;object-fit:cover;display:block}
.offer-detail .od-stars{margin:14px 0 0}
.offer-detail .od-keys{display:grid;grid-template-columns:repeat(2,1fr);gap:12px 26px;margin:18px 0;padding-left:14px;border-left:4px solid var(--green)}
.offer-detail .od-k{display:flex;flex-direction:column;gap:2px}
.offer-detail .od-k .l{font-size:11px;color:var(--ink-3)}
.offer-detail .od-k .v{font-size:15px;font-weight:600;color:var(--ink)}
.offer-detail .od-cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin:20px 0}
.offer-detail .od-detail{margin:20px 0}
.offer-detail .od-note{margin-top:18px}
.offer-detail .hcg-offer__btn{display:inline-flex;align-items:center;gap:7px;background:var(--orange);color:#fff;font-weight:600;font-size:15px;padding:13px 24px;border-radius:9px;text-decoration:none;transition:background .12s}
.offer-detail .hcg-offer__btn:hover{background:var(--orange-d);color:#fff}
@media(max-width:560px){
  .offer-detail .od-keys{grid-template-columns:1fr}
  .offer-detail .hcg-offer__btn{width:100%;justify-content:center}
}

/* ===== PRバナー枠（v1.5.1）：PC横3列／スマホ横スクロール。素材は無加工 ===== */
.pr-banners{padding:20px 0 6px}
.pr-banners__label{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.pr-banners__head{font-size:12.5px;color:var(--ink-2);font-weight:600;letter-spacing:.03em}
.pr-banners__row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;justify-items:center}
.pr-banners__slide{width:100%;max-width:300px;display:flex;justify-content:center;align-items:flex-start}
.pr-banners__slide img{max-width:100%;height:auto;display:block}
.pr-banners__slide a{display:inline-block;line-height:0}
@media(max-width:760px){
  .pr-banners__row{display:flex;grid-template-columns:none;overflow-x:auto;gap:12px;padding-bottom:8px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
  .pr-banners__slide{flex:0 0 auto;width:300px;scroll-snap-align:start}
}

/* =====================================================================
   記事本文：スマホの“横スクロール（はみ出し）”対策  v1.5.2
   方針：
   ・表(table) … 本文内だけ「その場で横スクロール」。ページ全体は広げない。
   ・リスト/本文 … 長い英単語・URLを折り返して、はみ出しの根を断つ。
   ・デザイン憲法準拠：囲みカード化しない／余白とトーンで構造を見せる。
   ※ front-page.php のランキング/比較表（.tablewrap）には影響しません。
   ===================================================================== */

/* ① 本文の長い文字列を折り返す（ul/ol/p のはみ出しを止める。リストは“折り返し”が正解） */
.entry{overflow-wrap:anywhere}
.entry :where(p,li,h2,h3,blockquote,a,figcaption){overflow-wrap:anywhere}
.entry :where(iframe,video,embed,object){max-width:100%}
.entry pre{max-width:100%;overflow-x:auto}

/* ② 表は本文内だけ“枠ごと横スクロール”。継承の min-width:760px を解除 */
.entry table{
  display:block;            /* 表自身をスクロール領域にする（ラッパー不要） */
  width:100%;
  max-width:100%;           /* 画面より広くしない＝ページは横スクロールしない */
  min-width:0;              /* グローバルの min-width:760px を打ち消す */
  overflow-x:auto;          /* はみ出したぶんだけ横スクロール */
  -webkit-overflow-scrolling:touch;
  margin:1.2em 0;
  /* スクロールできる合図：左右の端にうっすら影（指でなぞれるサイン。中身が無ければ自動で消える） */
  background:
    linear-gradient(to right,#fff 28%,rgba(255,255,255,0)) 0 0/26px 100% no-repeat,
    linear-gradient(to left, #fff 28%,rgba(255,255,255,0)) 100% 0/26px 100% no-repeat,
    radial-gradient(farthest-side at 0 50%, rgba(31,42,35,.13),rgba(31,42,35,0)) 0 0/12px 100% no-repeat,
    radial-gradient(farthest-side at 100% 50%, rgba(31,42,35,.13),rgba(31,42,35,0)) 100% 0/12px 100% no-repeat;
  background-attachment:local,local,scroll,scroll;
}
.entry table th,.entry table td{white-space:nowrap;overflow-wrap:normal}  /* セルは1行のまま→横スクロールで全列見せる */
.entry table::-webkit-scrollbar{height:6px}
.entry table::-webkit-scrollbar-thumb{background:rgba(31,42,35,.25);border-radius:6px}


/* =====================================================================
   トップのスマホ最適化  v1.5.3
   ① ランキングのバナー画像を切り抜かず“全体表示”（途切れ防止／A8素材は無加工）
   ② 一覧比較表のセルを1行に固定（横スクロールで崩さず読める）
   ===================================================================== */

/* ① ランキングのバナー画像：4:3の切り抜き(cover)をやめ、素材をそのまま全体表示 */
.rk-img{aspect-ratio:auto;overflow:visible;background:transparent}
.rk-img img{width:100%;height:auto;object-fit:contain}

/* ② 一覧比較表（.tablewrap）：セル内を改行させず1行に。横スクロールで全項目を読める */
.tablewrap{position:relative;-webkit-overflow-scrolling:touch}
.tablewrap table th,.tablewrap table td{white-space:nowrap}
.tablewrap::-webkit-scrollbar{height:6px}
.tablewrap::-webkit-scrollbar-thumb{background:rgba(31,42,35,.25);border-radius:6px}