/*
Theme Name: MEN'S SCALEUP
Theme URI: https://example.com/
Author: Self-made
Description: 男性向け情報メディア「MEN'S SCALEUP｜BLACK EDITION」用オリジナル軽量テーマ。黒・白・グレー基調。プラグイン不要（お問い合わせフォーム・目次・アフィリエイトボックス・基本SEO内蔵）。
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: mens-scaleup
*/
/* MEN'S SCALEUP BLACK EDITION - design comp (Step2)
   WordPress化(Step4)で theme の style.css にそのまま移行する想定 */
:root{
  --bk:#0b0b0b; --bk2:#161616; --ch:#222; --gy6:#6b6b6b; --gy4:#9a9a9a;
  --gy2:#d9d9d9; --gy1:#f1f1f1; --wh:#fff;
  --font:"Hiragino Sans","Yu Gothic Medium","Yu Gothic","Meiryo",sans-serif;
  --en:"Helvetica Neue",Arial,"Hiragino Sans",sans-serif;
  --w:1120px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font);color:var(--bk);background:var(--wh);line-height:1.8;font-size:15px;-webkit-font-smoothing:antialiased}
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}
ul{list-style:none}
.wrap{max-width:var(--w);margin:0 auto;padding:0 24px}
.en{font-family:var(--en);letter-spacing:.2em}

/* header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(11,11,11,.96);color:#fff;border-bottom:1px solid #2a2a2a}
.site-header .in{display:flex;align-items:center;justify-content:space-between;height:68px}
.logo{font-family:var(--en);font-weight:800;letter-spacing:.2em;font-size:17px;line-height:1.15}
.logo small{display:block;font-weight:400;font-size:9px;letter-spacing:.45em;color:var(--gy4);margin-top:3px}
.gnav ul{display:flex;gap:28px;align-items:center}
.gnav a{font-family:var(--en);font-size:12px;letter-spacing:.2em;color:var(--gy2);padding:6px 0;border-bottom:1px solid transparent;transition:.2s}
.gnav a:hover,.gnav a.on{color:#fff;border-bottom-color:#fff}
.gnav .ig a{display:inline-flex;border:1px solid var(--gy4);padding:5px 12px;border-radius:0}
.gnav .ig a:hover{background:#fff;color:#000}
#nav-toggle,.burger{display:none}

/* hero */
.hero{position:relative;height:560px;color:#fff;background:#000;overflow:hidden}
.hero img{position:absolute;inset:0;opacity:.6;filter:grayscale(1) contrast(1.1)}
.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,.35) 60%,rgba(0,0,0,.1) 100%)}
.hero .wrap{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;justify-content:center}
.hero .eyebrow{font-size:12px;color:var(--gy4);letter-spacing:.5em}
.hero h1{font-size:52px;line-height:1.3;letter-spacing:.08em;margin:16px 0 20px;font-weight:800}
.hero p{max-width:460px;color:var(--gy2);font-size:14px;margin-bottom:30px}
.scroll{position:absolute;z-index:1;left:50%;bottom:20px;transform:translateX(-50%);font-family:var(--en);font-size:10px;letter-spacing:.4em;color:var(--gy4)}

/* buttons */
.btn{display:inline-block;font-family:var(--en);font-size:12px;letter-spacing:.25em;padding:14px 38px;border:1px solid currentColor;transition:.25s}
.btn.solid{background:#fff;color:#000;border-color:#fff}
.btn.solid:hover{background:transparent;color:#fff}
.btn.line:hover{background:#000;color:#fff}
.btn.line.lt:hover{background:#fff;color:#000}

/* sections */
.sec{padding:84px 0}
.sec.dk{background:var(--bk);color:#fff}
.sec.gy{background:var(--gy1)}
.sh{text-align:center;margin-bottom:44px}
.sh h2{font-family:var(--en);font-size:30px;letter-spacing:.35em;font-weight:800;padding-left:.35em}
.sh h2:after{content:"";display:block;width:36px;height:2px;background:currentColor;margin:14px auto 10px}
.sh span{font-size:12px;color:var(--gy6);letter-spacing:.15em}
.dk .sh span{color:var(--gy4)}
.more{text-align:center;margin-top:48px}

/* category tiles */
.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.cat{position:relative;aspect-ratio:3/4;overflow:hidden;display:block;background:#000}
.cat img{filter:grayscale(1);opacity:.7;transition:.5s}
.cat:hover img{transform:scale(1.06);opacity:.5}
.cat:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.8),transparent 60%)}
.cat .t{position:absolute;z-index:1;left:0;right:0;bottom:24px;text-align:center;color:#fff}
.cat .t b{display:block;font-family:var(--en);font-size:20px;letter-spacing:.3em;padding-left:.3em}
.cat .t small{font-size:11px;color:var(--gy2);letter-spacing:.2em}

/* cards */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:36px 28px}
.card{display:block}
.card .th{position:relative;aspect-ratio:3/2;overflow:hidden;background:#ddd;margin-bottom:14px}
.card .th img{filter:grayscale(1);transition:.5s}
.card:hover .th img{transform:scale(1.05);filter:grayscale(0)}
.badge{display:inline-block;background:#000;color:#fff;font-family:var(--en);font-size:10px;letter-spacing:.2em;padding:2px 10px}
.dk .badge,.card .th .badge{background:#fff;color:#000}
.card .th .badge{position:absolute;left:0;top:0}
.card h3{font-size:15px;line-height:1.6;font-weight:700;margin:8px 0 4px}
.card time{font-family:var(--en);font-size:11px;color:var(--gy6);letter-spacing:.1em}
.pr{font-family:var(--en);font-size:10px;letter-spacing:.15em;border:1px solid var(--gy4);color:var(--gy4);padding:1px 8px}

/* pickup */
.pick{display:grid;grid-template-columns:1.3fr 1fr;gap:56px;align-items:center}
.pick .th{aspect-ratio:3/2;overflow:hidden}
.pick .th img{filter:grayscale(1)}
.pick h3{font-size:26px;line-height:1.5;margin:14px 0}
.pick p{color:var(--gy2);font-size:14px;margin-bottom:28px}

/* ranking */
.rank{counter-reset:r}
.rank .card .th:before{counter-increment:r;content:counter(r);position:absolute;z-index:1;left:0;top:0;width:40px;height:40px;background:#000;color:#fff;font-family:var(--en);font-weight:800;display:flex;align-items:center;justify-content:center}

/* instagram */
.igrid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.igrid a{aspect-ratio:1;overflow:hidden;position:relative;background:#000}
.igrid img{filter:grayscale(1);transition:.4s}
.igrid a:hover img{opacity:.6}
.ig-handle{text-align:center;font-family:var(--en);letter-spacing:.2em;margin:-24px 0 32px;color:var(--gy4);font-size:13px}

/* footer */
.site-footer{background:#000;color:#fff;padding:56px 0 28px;text-align:center}
.site-footer .logo{display:inline-block}
.site-footer ul{display:flex;gap:28px;justify-content:center;flex-wrap:wrap;margin:26px 0;font-size:12px;color:var(--gy2);letter-spacing:.1em}
.site-footer ul a:hover{color:#fff;text-decoration:underline}
.site-footer .note{font-size:11px;color:var(--gy4);max-width:560px;margin:0 auto 20px}
.site-footer small{font-family:var(--en);font-size:10px;color:var(--gy6);letter-spacing:.15em}

/* sub pages */
.page-ttl{background:var(--bk);color:#fff;text-align:center;padding:76px 0 64px}
.page-ttl h1{font-family:var(--en);font-size:40px;letter-spacing:.45em;font-weight:800;padding-left:.45em}
.page-ttl p{font-size:13px;color:var(--gy4);margin-top:10px;letter-spacing:.1em}
.bc{font-size:11px;color:var(--gy6);padding:16px 0;letter-spacing:.05em}
.bc a:hover{text-decoration:underline}
.pager{display:flex;gap:8px;justify-content:center;margin-top:56px;font-family:var(--en);font-size:13px}
.pager a,.pager span{width:40px;height:40px;border:1px solid var(--gy2);display:flex;align-items:center;justify-content:center}
.pager .cur{background:#000;color:#fff;border-color:#000}
.pager a:hover{border-color:#000}
.catnav{display:flex;gap:8px;justify-content:center;margin-bottom:44px;flex-wrap:wrap}
.catnav a{font-family:var(--en);font-size:11px;letter-spacing:.2em;border:1px solid var(--gy2);padding:8px 20px}
.catnav a.on,.catnav a:hover{background:#000;color:#fff;border-color:#000}

/* article */
.art-wrap{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:56px;padding-bottom:84px}
.art-head .badge{margin-right:8px}
.art-head h1{font-size:30px;line-height:1.5;margin:18px 0 12px}
.art-head .meta{font-size:12px;color:var(--gy6);font-family:var(--en);letter-spacing:.1em}
.disclose{display:flex;gap:10px;align-items:center;background:var(--gy1);padding:10px 14px;font-size:12px;margin:20px 0;border-left:3px solid #000}
.eyec{aspect-ratio:16/9;overflow:hidden;margin:20px 0 32px}
.eyec img{filter:grayscale(1)}
.toc{border:1px solid var(--gy2);padding:22px 26px;margin-bottom:36px}
.toc b{font-family:var(--en);letter-spacing:.3em;font-size:13px}
.toc ol{margin:10px 0 0 1.4em;font-size:14px}
.toc a:hover{text-decoration:underline}
.entry h2{font-size:22px;background:#000;color:#fff;padding:12px 18px;margin:52px 0 22px;line-height:1.5}
.entry h3{font-size:18px;border-left:5px solid #000;padding-left:12px;margin:34px 0 14px}
.entry p{margin-bottom:20px}
.entry ul{list-style:disc;margin:0 0 20px 1.4em}
.entry .fig{margin:24px 0}
.entry .fig div{aspect-ratio:16/9;overflow:hidden}
.entry .fig img{filter:grayscale(1)}
.entry .fig span{display:block;font-size:11px;color:var(--gy6);margin-top:6px}
.entry blockquote{background:var(--gy1);border-left:4px solid var(--gy4);padding:16px 20px;margin:0 0 20px;font-size:14px;color:#444}
.entry table{width:100%;border-collapse:collapse;font-size:14px;margin-bottom:24px}
.entry th,.entry td{border:1px solid var(--gy2);padding:10px 12px;text-align:left}
.entry th{background:var(--gy1)}
.aff{border:2px solid #000;padding:24px;display:grid;grid-template-columns:200px 1fr;gap:24px;margin:30px 0}
.aff .th{aspect-ratio:1;overflow:hidden}
.aff .th img{filter:grayscale(1)}
.aff h4{font-size:18px;margin-bottom:6px}
.aff p{font-size:13px;color:var(--gy6);margin-bottom:14px}
.aff .btn{background:#000;color:#fff;border-color:#000;padding:13px 28px}
.aff .btn:hover{background:#fff;color:#000}
.share{display:flex;gap:10px;margin:40px 0;flex-wrap:wrap}
.share a{font-family:var(--en);font-size:11px;letter-spacing:.2em;border:1px solid #000;padding:9px 22px}
.share a:hover{background:#000;color:#fff}
.side h4{font-family:var(--en);font-size:13px;letter-spacing:.3em;border-bottom:2px solid #000;padding-bottom:8px;margin-bottom:18px}
.side .box{margin-bottom:44px}
.side .mini{display:grid;grid-template-columns:88px 1fr;gap:12px;margin-bottom:16px;font-size:13px;line-height:1.5;font-weight:700}
.side .mini .th{aspect-ratio:1;overflow:hidden}
.side .mini img{filter:grayscale(1)}
.side .tags{display:flex;flex-wrap:wrap;gap:6px}
.side .tags a{font-size:11px;border:1px solid var(--gy2);padding:3px 10px}
.side .prof{background:#000;color:#fff;padding:24px;text-align:center;font-size:13px}
.side .prof .logo{margin-bottom:10px}
.side .prof p{color:var(--gy2);margin-bottom:16px;font-size:12px}

/* contact */
.form{max-width:680px;margin:0 auto;padding-bottom:84px}
.form .row{margin-bottom:24px}
.form label{display:block;font-size:13px;font-weight:700;margin-bottom:6px}
.form label i{font-style:normal;background:#000;color:#fff;font-size:10px;padding:1px 8px;margin-left:8px}
.form input,.form select,.form textarea{width:100%;border:1px solid var(--gy4);padding:12px 14px;font:inherit;font-size:15px;background:#fff;border-radius:0}
.form textarea{height:180px}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid #000;border-color:#000}
.form .sub{text-align:center;margin-top:32px}
.form button{cursor:pointer;background:#000;color:#fff;font-family:var(--en);letter-spacing:.3em;font-size:13px;border:1px solid #000;padding:16px 64px;transition:.2s}
.form button:hover{background:#fff;color:#000}

/* ===== SP ===== */
@media(max-width:860px){
  .art-wrap{grid-template-columns:1fr}
}
@media(max-width:768px){
  body{font-size:14px}
  .wrap{padding:0 16px}
  .site-header .in{height:56px}
  .logo{font-size:14px}
  .burger{display:block;width:26px;height:18px;position:relative;cursor:pointer;z-index:60}
  .burger i,.burger:before,.burger:after{content:"";position:absolute;left:0;right:0;height:2px;background:#fff;transition:.25s}
  .burger:before{top:0}.burger i{top:8px}.burger:after{bottom:0}
  #nav-toggle:checked~.burger:before{top:8px;transform:rotate(45deg)}
  #nav-toggle:checked~.burger:after{bottom:8px;transform:rotate(-45deg)}
  #nav-toggle:checked~.burger i{opacity:0}
  .gnav{position:fixed;inset:56px 0 0 0;background:var(--bk);display:none;padding:24px 16px}
  #nav-toggle:checked~.gnav{display:block}
  .gnav ul{flex-direction:column;gap:0;align-items:stretch}
  .gnav li{border-bottom:1px solid #2a2a2a}
  .gnav a{display:block;padding:18px 4px;font-size:14px;border:0}
  .gnav .ig a{display:block;border:1px solid var(--gy4);text-align:center;margin-top:24px}
  .hero{height:480px}
  .hero:after{background:linear-gradient(0deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.2) 80%)}
  .hero .wrap{justify-content:flex-end;padding-bottom:56px}
  .hero h1{font-size:30px;margin:10px 0 14px}
  .hero p{font-size:13px;margin-bottom:22px}
  .sec{padding:56px 0}
  .sh{margin-bottom:30px}
  .sh h2{font-size:22px}
  .cats{grid-template-columns:1fr 1fr;gap:10px}
  .cat{aspect-ratio:1}
  .cat .t b{font-size:15px}
  .grid3{grid-template-columns:1fr;gap:20px}
  .grid3 .card{display:grid;grid-template-columns:120px 1fr;gap:14px;align-items:start}
  .grid3 .card .th{margin:0;aspect-ratio:1}
  .grid3 .card h3{font-size:14px;margin-top:6px}
  .pick{grid-template-columns:1fr;gap:24px}
  .pick h3{font-size:20px}
  .igrid{grid-template-columns:repeat(3,1fr);gap:4px}
  .page-ttl{padding:48px 0 40px}
  .page-ttl h1{font-size:26px}
  .art-head h1{font-size:22px}
  .entry h2{font-size:18px}
  .aff{grid-template-columns:1fr;padding:18px}
  .aff .th{aspect-ratio:16/9}
  .btn{padding:13px 30px}
}

/* ===== step3 additions ===== */
:focus-visible{outline:2px solid #fff;outline-offset:3px}
.sec:not(.dk):not(.gy) :focus-visible,.form :focus-visible,.entry :focus-visible,.card :focus-visible{outline-color:#000}
.skip{position:absolute;left:-999px;top:0;background:#fff;color:#000;padding:8px 14px;z-index:99}
.skip:focus{left:0}
#nav-toggle:focus-visible~.burger{outline:2px solid #fff;outline-offset:4px}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}.cat:hover img,.card:hover .th img{transform:none}}
/* fixed page */
.pg{max-width:760px;margin:0 auto;padding-bottom:84px}
.pg h2{font-size:20px;border-left:5px solid #000;padding-left:12px;margin:44px 0 14px;line-height:1.5}
.pg p{margin-bottom:18px}
.pg dl{border-top:1px solid var(--gy2);margin-bottom:24px}
.pg dl div{display:grid;grid-template-columns:160px 1fr;border-bottom:1px solid var(--gy2);padding:14px 4px;font-size:14px}
.pg dt{font-weight:700}
/* 404 */
.nf{text-align:center;padding:96px 0}
.nf b{font-family:var(--en);font-size:96px;letter-spacing:.1em;line-height:1;display:block}
.nf p{margin:20px 0 32px;color:var(--gy6)}
@media(max-width:768px){.pg dl div{grid-template-columns:1fr;gap:2px}.nf b{font-size:64px}}
.rel{grid-template-columns:repeat(2,1fr)}
@media(max-width:768px){.rel{grid-template-columns:1fr}}

/* ===== WordPress additions ===== */
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal}
.gnav .current-menu-item>a,.gnav .current-post-ancestor>a,.gnav .current-menu-ancestor>a,.gnav .current-category-ancestor>a{color:#fff;border-bottom-color:#fff}
.gnav .menu-item-ig a{display:inline-flex;border:1px solid var(--gy4);padding:5px 12px}
.gnav .menu-item-ig a:hover{background:#fff;color:#000}
.site-footer ul li{list-style:none}
/* pagination (the_posts_pagination) */
.nav-links{display:flex;gap:8px;justify-content:center;margin-top:56px;font-family:var(--en);font-size:13px;flex-wrap:wrap}
.nav-links .page-numbers{min-width:40px;height:40px;padding:0 10px;border:1px solid var(--gy2);display:flex;align-items:center;justify-content:center}
.nav-links .page-numbers.current{background:#000;color:#fff;border-color:#000}
.nav-links a.page-numbers:hover{border-color:#000}
.nav-links .dots{border:0}
/* content blocks */
.entry img{height:auto}
.entry figure{margin:24px 0}
.entry figure img{width:100%;filter:grayscale(1)}
.entry figcaption{font-size:11px;color:var(--gy6);margin-top:6px}
.entry .alignleft{float:left;margin:0 20px 12px 0;max-width:50%}
.entry .alignright{float:right;margin:0 0 12px 20px;max-width:50%}
.entry .aligncenter{margin-left:auto;margin-right:auto}
.entry ol{margin:0 0 20px 1.4em}
.entry a{text-decoration:underline}
.entry .btn,.entry .aff a.btn{text-decoration:none}
.entry .wp-block-table table{margin-bottom:0}
.entry::after{content:"";display:block;clear:both}
.pg a{text-decoration:underline}
/* search / no result */
.searchform{display:flex;max-width:520px;margin:0 auto}
.searchform input[type=search]{flex:1;border:1px solid var(--gy4);padding:12px 14px;font:inherit;font-size:15px;border-radius:0;background:#fff}
.searchform button{background:#000;color:#fff;border:1px solid #000;font-family:var(--en);letter-spacing:.2em;font-size:12px;padding:0 24px;cursor:pointer}
.searchform button:hover{background:#fff;color:#000}
.empty{text-align:center;padding:40px 0 20px;color:var(--gy6)}
.empty .searchform{margin-top:24px}
/* contact messages */
.msg{padding:14px 18px;margin-bottom:28px;font-size:14px;border-left:4px solid #000;background:var(--gy1)}
.msg.err{border-left-color:#b00020;background:#fdecee}
.hp{position:absolute!important;left:-9999px!important}
.form .note-s{font-size:12px;color:var(--gy6);margin-top:6px}
.eyec.noimg{background:var(--gy1)}

@media(max-width:768px){.gnav .menu-item-ig a{display:flex;justify-content:center;border:1px solid var(--gy4);margin-top:24px;padding:14px}}