
:root{
  --bg:#F5F5F7; --card:#FFFFFF;
  --ink:#1D1D1F; --sub:#48484A; --muted:#6E6E73;
  --hairline:#E8E8ED;
  --amber:#A8791F; --amber-deep:#8A6318;
  --shu:#C73A22; --shu-deep:#A62D18; --shu-tint:#FAEFE9;
  --radius:18px;
  --gothic:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic Medium","Yu Gothic","Noto Sans JP",sans-serif;
  color-scheme: light;
}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg); color:var(--ink); font-family:var(--gothic); font-size:17px; line-height:1.9; margin:0}
*{box-sizing:border-box}
img{max-width:100%}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:2px solid var(--ink); outline-offset:2px}
@media (prefers-reduced-motion: reduce){*{transition:none !important}}

.viewer-bar{background:#1D1D1F; color:#B9B9BE; position:sticky; top:0; z-index:50; display:flex; align-items:center; gap:4px; padding:8px 14px; flex-wrap:wrap}
.viewer-bar .vlabel{font-family:Menlo,monospace; font-size:10.5px; letter-spacing:.18em; margin-right:10px; color:#8A8A8F}
.viewer-bar button{background:none; border:0; color:#B9B9BE; font-family:var(--gothic); font-size:13px; font-weight:600; padding:6px 14px; border-radius:999px; cursor:pointer}
.viewer-bar button:hover{color:#fff}
.viewer-bar button.on{background:#FFFFFF; color:#1D1D1F}

.page{display:block}

.site-head{background:var(--card); border-bottom:1px solid var(--hairline)}
.trustline{text-align:center; font-size:12.5px; color:var(--muted); padding:8px 16px; letter-spacing:.03em; border-bottom:1px solid var(--hairline)}
.head-inner{max-width:1040px; margin:0 auto; padding:16px 24px; display:flex; align-items:center; gap:28px; flex-wrap:wrap}
.wordmark{display:flex; align-items:baseline; gap:8px; text-decoration:none}
.wordmark .small{font-size:13px; font-weight:600; letter-spacing:.22em; color:var(--muted)}
.wordmark .large{font-size:26px; font-weight:700; letter-spacing:.1em}
.gnav{display:flex; gap:24px; margin-left:auto; align-items:center; flex-wrap:wrap}
.gnav a{font-size:14px; font-weight:500; text-decoration:none; color:var(--sub); padding:6px 0}
.gnav a:hover{color:var(--ink)}
.gnav .shindan{background:var(--shu); color:#fff; padding:10px 22px; border-radius:999px; font-weight:600; font-size:14px}
.gnav .shindan:hover{background:var(--shu-deep)}
.gnav .modenote{font-family:Menlo,monospace; font-size:11px; color:var(--muted); letter-spacing:.06em}

.wrap{max-width:1040px; margin:0 auto; padding:0 32px}
.wrap-narrow{max-width:760px; margin:0 auto; padding:0 32px}
h1,h2,h3{letter-spacing:.01em; text-wrap:balance}
.sec-head{display:flex; align-items:baseline; gap:14px; margin:110px 0 28px; position:relative; border-bottom:1px solid var(--hairline); padding-bottom:14px}
.sec-head::after{content:""; position:absolute; left:0; bottom:-1px; width:64px; height:3px; background:var(--shu)}
.sec-head h2{font-size:31px; font-weight:700; letter-spacing:.005em; margin:0}
.sec-head .en{display:none}
.sec-head .more{margin-left:auto; font-size:13.5px; color:var(--muted); text-decoration:none}
.sec-head .more:hover{color:var(--ink)}

.cat{display:inline-block; font-size:11.5px; font-weight:600; letter-spacing:.16em; color:var(--amber-deep)}
.tno{font-family:Menlo,monospace; font-size:10.5px; letter-spacing:.08em; color:var(--muted)}
.rtime{display:flex; gap:14px; font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums}
.rtime b{font-weight:600; color:var(--sub)}

.card{display:block; text-decoration:none; background:var(--card); border-radius:var(--radius); overflow:hidden; transition:transform .18s ease}
.card:hover{transform:translateY(-2px)}
.card .photo{aspect-ratio:16/9; background:linear-gradient(150deg,#E9E9EE,#DEDEE4); display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:12px; letter-spacing:.14em}
.card .body{padding:26px 32px 26px}
.card h3{font-size:19px; font-weight:700; line-height:1.6; margin:8px 0 8px}
.card p{font-size:14px; color:var(--sub); line-height:1.8; margin:0 0 12px}

.feature{display:grid; grid-template-columns:1.15fr 1fr; background:var(--card); border-radius:var(--radius); overflow:hidden; text-decoration:none}
.feature .photo{background:linear-gradient(150deg,#E9E9EE,#D8D8DF); display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:12px; letter-spacing:.14em; min-height:340px}
.feature .txt{padding:44px 44px 36px; display:flex; flex-direction:column}
.feature h1{font-size:31px; font-weight:700; line-height:1.6; margin:10px 0 12px}
.feature .desc{font-size:14.5px; color:var(--sub); line-height:1.95; margin:0 0 16px}
.feature .rtime{margin-top:auto}

.list-card{background:var(--card); border-radius:var(--radius); padding:14px 42px; margin:0}
.list-row{display:flex; align-items:center; gap:26px; padding:22px 0; border-bottom:1px solid var(--hairline); text-decoration:none}
.list-card .list-row:last-child{border-bottom:0}
.list-row .thumb{flex-shrink:0; width:116px; height:72px; border-radius:10px; background:linear-gradient(150deg,#E9E9EE,#DEDEE4)}
.list-row .mid{flex:1; min-width:0}
.list-row .t{display:block; font-size:16.5px; font-weight:700; line-height:1.6}
.list-row:hover .t{color:var(--amber-deep)}
.list-row .sum{display:block; font-size:13px; color:var(--muted); line-height:1.7; margin-top:2px}
.list-row .cat{display:block; margin-bottom:2px}
.list-row .rtime{flex-shrink:0; white-space:nowrap; flex-direction:column; gap:2px; align-items:flex-end}

.rank-card{background:var(--card); border-radius:var(--radius); padding:16px 42px}
.rank-row{display:flex; gap:22px; align-items:baseline; padding:20px 0; border-bottom:1px solid var(--hairline); text-decoration:none}
.rank-card .rank-row:last-child{border-bottom:0}
.rank-row .no{font-size:22px; font-weight:700; color:var(--amber-deep); font-variant-numeric:tabular-nums; width:28px; flex-shrink:0}
.rank-row .t{font-size:16px; font-weight:600; line-height:1.65; flex:1}
.rank-row:hover .t{color:var(--amber-deep)}
.rank-row .rtime{flex-shrink:0}

.cta{background:var(--card); border-radius:var(--radius); padding:68px 48px; text-align:center}
.cta .lead-s{font-size:13.5px; font-weight:600; color:var(--amber-deep); letter-spacing:.1em}
.cta h2,.cta .big{font-size:28px; font-weight:700; margin:12px 0 10px; line-height:1.55}
.cta p{font-size:14.5px; color:var(--sub); margin:0 auto; max-width:560px; line-height:1.9}
.btn{display:inline-block; margin-top:24px; padding:15px 44px; border-radius:999px; background:var(--shu); color:#FFFFFF; text-decoration:none; font-size:16px; font-weight:600; letter-spacing:.02em; transition:background .15s ease}
.btn:hover{background:var(--shu-deep)}
.cta .flow-s{font-size:12px; color:var(--muted); margin-top:14px; letter-spacing:.04em}

.sheet{background:var(--card); border-radius:var(--radius); padding:12px 56px 52px; margin:42px 0}
.kekkaron{background:var(--bg); border-radius:14px; padding:24px 28px; margin:34px 0}
.kekkaron .label{font-size:12px; font-weight:700; letter-spacing:.2em; color:var(--amber-deep); margin-bottom:6px}
.kekkaron p{margin:0; font-size:17.5px; font-weight:600; line-height:1.95}
.step-block{display:flex; gap:20px; margin:26px 0; align-items:flex-start}
.step-block .no{flex-shrink:0; width:42px; height:42px; border-radius:50%; background:var(--ink); color:#fff; font-weight:600; font-size:18px; display:flex; align-items:center; justify-content:center; font-variant-numeric:tabular-nums}
.step-block h4{margin:6px 0 6px; font-size:17px; font-weight:700}
.step-block p{margin:0; font-size:15.5px; color:var(--sub); line-height:1.9}
.caution{background:var(--bg); border-left:4px solid var(--amber); border-radius:12px; padding:18px 24px; margin:32px 0}
.caution b{display:block; font-size:13px; letter-spacing:.16em; color:var(--amber-deep); margin-bottom:4px}
.caution p{margin:0; font-size:15px; line-height:1.9; color:var(--sub)}
.kouka{display:flex; gap:14px; flex-wrap:wrap; margin:30px 0}
.kouka .tile{flex:1 1 150px; background:var(--bg); border-radius:14px; padding:20px 20px 16px; text-align:center}
.kouka .k{font-size:11.5px; color:var(--muted); letter-spacing:.06em}
.kouka .v{font-size:32px; font-weight:700; font-variant-numeric:tabular-nums; line-height:1.3; margin-top:4px}
.kouka .v em{font-style:normal; color:var(--amber-deep)}
.kouka .u{font-size:12.5px; color:var(--sub); font-weight:600}

.site-foot{margin-top:88px; background:var(--card); border-top:1px solid var(--hairline)}
.foot-inner{max-width:1040px; margin:0 auto; padding:30px 24px 56px; font-size:13px; color:var(--sub); line-height:2}
.foot-inner .mark{font-weight:700; font-size:16px; letter-spacing:.1em; margin-bottom:6px}
.foot-inner .note{color:var(--muted); font-size:12px}

.art-head{padding:56px 0 22px}
.art-head .meta-top{display:flex; gap:14px; align-items:baseline; flex-wrap:wrap}
.art-head h1{font-size:33px; font-weight:700; line-height:1.6; margin:14px 0 14px}
.art-head .lead{font-size:16.5px; color:var(--sub); line-height:2}
.art-head .meta-bottom{display:flex; gap:22px; flex-wrap:wrap; margin-top:20px; font-size:12.5px; color:var(--muted); font-variant-numeric:tabular-nums}
.art-head .meta-bottom b{color:var(--sub); font-weight:600}
.art-visual{background:linear-gradient(150deg,#E9E9EE,#DEDEE4); border-radius:var(--radius); aspect-ratio:16/8; display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:12px; letter-spacing:.14em; margin:8px 0 0}
.art-body h2{font-size:23px; font-weight:700; margin:52px 0 16px}
.art-body p{margin:16px 0; line-height:2.05}
.yougo{font-size:13px; color:var(--muted)}
.next-read{margin:64px 0 0}
.author{display:flex; gap:18px; align-items:center; background:var(--bg); border-radius:14px; padding:20px 24px; margin:44px 0}
.author .face{width:56px; height:56px; border-radius:50%; background:#E4E4E9; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:11px; color:var(--muted)}
.author .who{font-size:13px; color:var(--muted)}
.author .who b{display:block; font-size:15px; color:var(--ink); font-weight:600; margin-bottom:2px}

.page-head{padding:52px 0 8px}
.page-head h1{font-size:29px; font-weight:700; margin:10px 0 10px}
.page-head p{color:var(--sub); font-size:15px; max-width:70ch}
.stage{background:var(--card); border-radius:var(--radius); padding:44px 30px; display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:40px; margin:24px 0; overflow-x:auto}
.spec-note{font-size:13px; color:var(--muted); line-height:1.9; margin-top:10px}
.spec-table{border-collapse:separate; border-spacing:0; width:100%; background:var(--card); border-radius:14px; overflow:hidden; font-size:14.5px}
.spec-table th{text-align:left; font-size:11px; letter-spacing:.1em; color:var(--muted); font-weight:600; padding:12px 16px; border-bottom:1px solid var(--hairline); background:var(--card)}
.spec-table td{padding:12px 16px; border-bottom:1px solid var(--hairline); vertical-align:top; line-height:1.75}
.spec-table tr:last-child td{border-bottom:0}

.meishi{width:91mm; height:55mm; background:#FFFFFF; color:#1D1D1F; border-radius:2.5mm; box-shadow:0 1px 3px rgba(29,29,31,.16), 0 6px 18px rgba(29,29,31,.10); padding:5.5mm 6.5mm 5mm; display:flex; flex-direction:column; font-family:var(--gothic); position:relative; overflow:hidden; flex-shrink:0}
.meishi .head{display:flex; justify-content:space-between; align-items:baseline}
.meishi .brand{font-size:8px; font-weight:600; letter-spacing:.3em; color:#8A6318}
.meishi .no{font-family:Menlo,monospace; font-size:6.5px; color:#6E6E73; letter-spacing:.1em}
.meishi .title{font-size:10.5px; font-weight:600; color:#48484A; margin-top:2.5mm}
.meishi .scorebox{display:flex; align-items:baseline; gap:3mm; margin-top:1mm}
.meishi .num{font-size:64px; font-weight:700; line-height:1; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.meishi .num small{font-size:16px; font-weight:600; color:#6E6E73; letter-spacing:0}
.meishi .level{font-size:11px; font-weight:600; line-height:1.5}
.meishi .level span{display:block; font-size:8px; color:#6E6E73; font-weight:400}
.meishi .scale{margin-top:auto}
.meishi .bar{position:relative; height:2mm; background:#ECECF0; border-radius:1mm}
.meishi .bar .fill{position:absolute; left:0; top:0; bottom:0; width:62%; background:#1D1D1F; border-radius:1mm}
.meishi .bar .pin{position:absolute; left:62%; top:50%; width:3.4mm; height:3.4mm; background:#A8791F; border:0.5mm solid #FFFFFF; border-radius:50%; transform:translate(-50%,-50%); box-shadow:0 0.3mm 0.8mm rgba(29,29,31,.3)}
.meishi .ticks{display:flex; justify-content:space-between; font-family:Menlo,monospace; font-size:6px; color:#6E6E73; margin-top:1.2mm}
.meishi .foot{display:flex; justify-content:space-between; align-items:baseline; margin-top:2mm; font-size:6.5px; color:#6E6E73}
.meishi .foot b{font-weight:600; color:#48484A}

.sns{width:400px; height:400px; background:#FFFFFF; color:#1D1D1F; border-radius:16px; box-shadow:0 1px 3px rgba(29,29,31,.16), 0 8px 24px rgba(29,29,31,.10); padding:34px 36px 30px; display:flex; flex-direction:column; font-family:var(--gothic); flex-shrink:0}
.sns .head{display:flex; justify-content:space-between; align-items:baseline}
.sns .brand{font-size:12px; font-weight:600; letter-spacing:.3em; color:#8A6318}
.sns .no{font-family:Menlo,monospace; font-size:10px; color:#6E6E73}
.sns .title{font-size:16px; font-weight:600; color:#48484A; margin-top:22px}
.sns .num{font-size:128px; font-weight:700; line-height:1.05; letter-spacing:-.03em; font-variant-numeric:tabular-nums}
.sns .num small{font-size:26px; font-weight:600; color:#6E6E73}
.sns .level{font-size:17px; font-weight:600; margin-top:2px}
.sns .level span{color:#6E6E73; font-weight:400; font-size:13px}
.sns .scale{margin-top:auto}
.sns .bar{position:relative; height:8px; background:#ECECF0; border-radius:4px}
.sns .bar .fill{position:absolute; left:0; top:0; bottom:0; width:62%; background:#1D1D1F; border-radius:4px}
.sns .bar .pin{position:absolute; left:62%; top:50%; width:16px; height:16px; background:#A8791F; border:2.5px solid #FFFFFF; border-radius:50%; transform:translate(-50%,-50%); box-shadow:0 1px 3px rgba(29,29,31,.3)}
.sns .ticks{display:flex; justify-content:space-between; font-family:Menlo,monospace; font-size:10px; color:#6E6E73; margin-top:6px}
.sns .foot{display:flex; justify-content:space-between; margin-top:14px; font-size:10.5px; color:#6E6E73}
.sns .foot b{color:#48484A; font-weight:600}

.ogp{width:600px; height:315px; background:#FFFFFF; color:#1D1D1F; border-radius:16px; box-shadow:0 1px 3px rgba(29,29,31,.16), 0 8px 24px rgba(29,29,31,.10); padding:30px 36px 26px; display:flex; flex-direction:column; font-family:var(--gothic); position:relative; overflow:hidden; flex-shrink:0}
.ogp::after{content:""; position:absolute; left:0; right:0; bottom:0; height:7px; background:#A8791F}
.ogp .head{display:flex; align-items:baseline; gap:12px}
.ogp .brand{font-size:16px; font-weight:700; letter-spacing:.12em}
.ogp .brand small{font-size:9px; letter-spacing:.3em; color:#8A6318; display:block; font-weight:600}
.ogp .cat-l{font-size:11px; font-weight:600; letter-spacing:.16em; color:#8A6318; margin-left:auto}
.ogp h3{font-size:28px; line-height:1.65; font-weight:700; margin:auto 0}
.ogp .foot{display:flex; justify-content:space-between; font-size:11px; color:#6E6E73; margin-bottom:8px; font-variant-numeric:tabular-nums}
.ogp .foot b{color:#48484A; font-weight:600}

.slot{position:relative; border:1.5px dashed #C9C9CF; border-radius:14px}
.slot::before{content:attr(data-slot); position:absolute; top:-11px; left:16px; background:var(--bg); padding:0 8px; font-family:Menlo,monospace; font-size:10px; letter-spacing:.12em; color:var(--amber-deep)}
.lp-hero{text-align:center}
.lp-hero .who{font-size:14px; font-weight:600; color:var(--amber-deep); letter-spacing:.12em}
.lp-hero h1{font-size:36px; font-weight:700; line-height:1.6; margin:16px 0 12px}
.lp-hero .sub{font-size:15.5px; color:var(--sub); max-width:620px; margin:0 auto; line-height:2}
.proofs{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.proofs .proof{background:var(--card); border-radius:14px; padding:24px 22px 18px; text-align:center}
.proof .v{font-size:34px; font-weight:700; font-variant-numeric:tabular-nums; line-height:1.2}
.proof .v em{font-style:normal; color:var(--amber-deep)}
.proof .k{font-size:13px; color:var(--sub); margin-top:4px; line-height:1.7}
.voice{display:flex; gap:20px; background:var(--card); border-radius:14px; padding:26px 28px}
.voice .face{width:64px; height:64px; border-radius:50%; background:#E4E4E9; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:11px; color:var(--muted)}
.voice blockquote{margin:0; font-size:16px; font-weight:600; line-height:2}
.voice .who{font-size:12.5px; color:var(--muted); margin-top:8px; font-weight:400}
.faq details{background:var(--card); border-radius:12px; padding:16px 22px; margin:10px 0}
.faq summary{font-size:15.5px; font-weight:600; cursor:pointer}
.faq p{font-size:14.5px; color:var(--sub); margin:10px 0 0; line-height:1.95}
.lp-note{background:var(--card); border-radius:14px; padding:22px 28px; margin:56px 0 26px; font-size:13.5px; color:var(--sub); line-height:2}
.lp-note b{color:var(--ink)}

.rules{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:14px; margin:24px 0}
.rule{background:var(--card); border-radius:14px; padding:22px 26px}
.rule .no{font-family:Menlo,monospace; font-size:10.5px; color:var(--amber-deep); letter-spacing:.16em}
.rule h3{font-size:17px; font-weight:700; margin:8px 0 6px}
.rule p{font-size:14px; color:var(--sub); margin:0; line-height:1.9}
.kinku{margin:20px 0; overflow-x:auto}
.kinku td.ng{color:#98564B; text-decoration:line-through; text-decoration-thickness:1px; white-space:nowrap}
.kinku td.ok b{color:var(--amber-deep)}
.rei{background:var(--card); border-radius:14px; padding:26px 30px; margin:22px 0}
.rei .label{font-size:11.5px; font-weight:600; letter-spacing:.16em; color:var(--muted); margin-bottom:8px}
.rei .ng-t{color:#98564B; font-size:15px; line-height:2; margin:0 0 14px; padding-bottom:14px; border-bottom:1px dashed var(--hairline)}
.rei .ok-t{font-size:15.5px; line-height:2; margin:0; font-weight:700}

.design-note{background:var(--card); border-radius:var(--radius); padding:28px 32px; margin:22px 0}
.design-note h3{font-size:17px; font-weight:700; margin:0 0 10px}
.design-note p, .design-note li{font-size:14.5px; color:var(--sub); line-height:2}
.design-note ul{margin:8px 0; padding-left:1.3em}
.design-note b{color:var(--ink)}

@media (max-width:860px){
  .hero{min-height:520px}
  .hero .inner{min-height:520px; padding:64px 26px 56px}
  .hero .wash{background:linear-gradient(180deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,.55) 70%, rgba(255,255,255,.2) 100%)}
  .hero h1{font-size:30px}
  .feature{grid-template-columns:1fr}
  .feature .photo{min-height:200px}
  .feature h1{font-size:24px}
  .grid-3,.cases,.proofs{grid-template-columns:1fr}
  .art-head h1{font-size:25px}
  .lp-hero h1{font-size:27px}
  .list-row .thumb{width:76px; height:54px}
  .list-row .rtime{display:none}
  .sec-head{margin-top:48px}
}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.cases{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.seminar{background:var(--card); border-radius:var(--radius); padding:44px 48px; display:flex; gap:30px; align-items:center; flex-wrap:wrap}
.seminar .txt{flex:1; min-width:260px}
.seminar h3{font-size:20px; font-weight:700; margin:0 0 8px}
.seminar p{font-size:14.5px; color:var(--sub); margin:0; line-height:1.9}
.seminar .btn{margin-top:0; padding:13px 32px; font-size:15px; flex-shrink:0}
.yakusoku-band{display:flex; gap:26px; align-items:center; flex-wrap:wrap; background:var(--shu); color:#fff; border-radius:var(--radius); padding:34px 42px; margin:42px 0 0}
.yakusoku-band .txt{flex:1; min-width:280px}
.yakusoku-band .txt b{display:block; font-size:17px; font-weight:700; margin-bottom:2px}
.yakusoku-band .txt span{font-size:13px; color:rgba(255,255,255,.78)}
.yakusoku-band .btn{margin-top:0; padding:13px 32px; font-size:15px; flex-shrink:0; background:#fff; color:var(--shu)}
.yakusoku-band .btn:hover{background:#F6E8E4}

.hero{position:relative; display:block; width:100vw; margin-left:calc(50% - 50vw); min-height:600px; text-decoration:none; overflow:hidden}
.hero .bg{position:absolute; inset:0}
.hero .bg img{width:100%; height:100%; object-fit:cover; object-position:center right; display:block}
.hero .wash{position:absolute; inset:0; background:linear-gradient(90deg, rgba(255,255,255,.88) 0%, rgba(255,255,255,.62) 34%, rgba(255,255,255,0) 62%)}
.hero .inner{position:relative; max-width:1040px; margin:0 auto; padding:96px 32px 88px; min-height:600px; display:flex; flex-direction:column; justify-content:center}
.hero .kicker{font-size:13.5px; font-weight:600; letter-spacing:.1em; color:var(--sub)}
.hero h1{font-size:clamp(40px, 4.6vw, 58px); font-weight:700; line-height:1.4; letter-spacing:.005em; margin:18px 0 14px; max-width:14em}
.hero .sub{font-size:16px; color:var(--sub); line-height:1.95; margin:0; max-width:30em}
.hero-meta{font-size:12.5px; color:var(--muted); margin-top:16px; font-variant-numeric:tabular-nums}
.hero .actions{display:flex; gap:14px; margin-top:30px; flex-wrap:wrap}
.hero .read{display:inline-block; padding:15px 40px; border-radius:999px; background:var(--ink); color:#fff; font-size:15.5px; font-weight:600}
.hero .read:hover{background:#000}
.hero .shindan2{display:inline-block; padding:15px 34px; border-radius:999px; background:rgba(255,255,255,.7); border:1.5px solid var(--ink); color:var(--ink); font-size:15.5px; font-weight:600}
.hero .shindan2:hover{background:#fff}


.thumb-art{aspect-ratio:16/9; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-end; padding:16px 20px; position:relative; overflow:hidden}
.thumb-art .no2{position:absolute; top:12px; right:16px; font-family:Menlo,monospace; font-size:10px; letter-spacing:.1em; color:rgba(29,29,31,.4)}
.thumb-art .word{font-size:24px; font-weight:700; letter-spacing:.03em; line-height:1.4; color:#1D1D1F}
.thumb-art .word small{display:block; font-size:11.5px; font-weight:600; letter-spacing:.16em; color:rgba(29,29,31,.5); margin-bottom:4px}
.c1{background:linear-gradient(135deg,#F2EBD9,#E9DFC4)}
.c2{background:linear-gradient(135deg,#E4EBE6,#D6E2DA)}
.c3{background:linear-gradient(135deg,#E4E8F0,#D5DCE9)}
.c4{background:linear-gradient(135deg,#F1E6DE,#E8D8CC)}
.c5{background:linear-gradient(135deg,#EBE5F0,#DDD4E6)}
.c6{background:linear-gradient(135deg,#F0E4E4,#E6D3D3)}
.shushi{background:var(--card); padding:44px 0}
.shushi .inner{max-width:1040px; margin:0 auto; padding:0 32px; display:flex; gap:40px; align-items:center; flex-wrap:wrap}
.shushi .lead2{flex:1 1 380px}
.shushi .lead2 b{display:block; font-size:20px; font-weight:700; margin-bottom:6px}
.shushi .lead2 span{font-size:14px; color:var(--sub); line-height:1.9}
.shushi .pillars{display:flex; gap:28px; flex-wrap:wrap}
.shushi .pillar{min-width:120px}
.shushi .pillar b{display:block; font-size:15px; font-weight:700}
.shushi .pillar span{font-size:12px; color:var(--muted)}
.catbar{display:flex; gap:10px; flex-wrap:wrap; margin:20px 0 26px}
.catbar a{font-size:13px; font-weight:600; color:var(--sub); background:var(--card); border-radius:999px; padding:8px 18px; text-decoration:none}
.catbar a:hover{color:var(--ink)}
.catbar a.on{background:var(--shu); color:#fff}
.grid-3g{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
@media (max-width:860px){ .grid-3g{grid-template-columns:1fr} }


.hero .inner{padding-bottom:170px}
.hero .kicker{font-family:var(--gothic); font-size:14.5px; font-weight:600; letter-spacing:.06em; color:var(--ink)}
.hero .kicker span{color:var(--muted); font-weight:500}
.hero-picks{position:absolute; left:0; right:0; bottom:0; display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(255,255,255,.4); backdrop-filter:blur(2px)}
.hero-picks .pick{background:rgba(255,255,255,.93); padding:18px 26px 16px}
.hero-picks .pc{font-size:10.5px; font-weight:600; letter-spacing:.16em; color:var(--amber-deep)}
.hero-picks .pt{display:block; font-size:14.5px; font-weight:600; color:var(--ink); line-height:1.65; margin-top:3px}
.hero-picks .pm{font-size:11px; color:var(--muted); font-variant-numeric:tabular-nums}
@media (max-width:860px){ .hero-picks{grid-template-columns:1fr 1fr} .hero-picks .pick:nth-child(3){display:none} .hero .inner{padding-bottom:150px} }


.heroz{background:#EDEEF0; width:100vw; margin-left:calc(50% - 50vw); padding:48px 0 56px}
.heroz .hz-in{max-width:1080px; margin:0 auto; padding:0 32px}
.hz-head{display:flex; align-items:baseline; gap:16px; flex-wrap:wrap; margin-bottom:26px}
.hz-head b{font-size:15px; font-weight:700}
.hz-head span{font-size:13px; color:var(--sub)}
.hz-grid{display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:200px; gap:18px}
.eb{position:relative; border-radius:14px; overflow:hidden; display:block; text-decoration:none; background:var(--card); transition:transform .18s ease}
.eb:hover{transform:translateY(-2px)}
.eb .ebg{position:absolute; inset:0}
.eb .ebg img{width:100%; height:100%; object-fit:cover; display:block}
.eb .lab{position:absolute; left:0; right:0; bottom:0; background:rgba(255,255,255,.94); padding:10px 16px 11px}
.eb .lab .lc{font-size:10.5px; font-weight:600; letter-spacing:.14em; color:var(--amber-deep)}
.eb .lab .lt{display:block; font-size:16px; font-weight:700; color:var(--ink); line-height:1.5}
.eb .lab .lm{font-size:11px; color:var(--muted); font-variant-numeric:tabular-nums}
.eb.feat{grid-column:span 2; grid-row:span 2}
.eb.feat .scrim2{position:absolute; inset:0; background:linear-gradient(180deg, rgba(15,15,16,0) 34%, rgba(15,15,16,.72) 100%)}
.eb.feat .ftx{position:absolute; left:0; right:0; bottom:0; padding:26px 30px}
.eb.feat .chip{display:inline-block; background:#fff; color:var(--ink); font-size:11px; font-weight:600; letter-spacing:.1em; border-radius:999px; padding:4px 14px}
.eb.feat h1{color:#fff; font-size:31px; font-weight:700; line-height:1.5; margin:12px 0 6px; text-shadow:0 1px 18px rgba(0,0,0,.35)}
.eb.feat .fs{color:rgba(255,255,255,.85); font-size:13px}
.eb.solid1{background:linear-gradient(135deg,#F2EBD9,#E5D9B9)}
.eb.solid2{background:linear-gradient(135deg,#E2E8EE,#CDD8E4)}
.eb .solid-tx{position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; padding:20px 22px 58px}
.eb .solid-tx .st{font-size:21px; font-weight:700; line-height:1.55; color:var(--ink)}
.eb .solid-tx .sc{font-size:10.5px; font-weight:600; letter-spacing:.16em; color:var(--amber-deep); margin-bottom:6px}
@media (max-width:860px){
  .hz-grid{grid-template-columns:1fr 1fr; grid-auto-rows:170px}
  .eb.feat{grid-column:span 2}
  .eb.feat h1{font-size:22px}
}


.wordmark .logoimg{height:50px; width:auto; display:block}
.two-col{display:grid; grid-template-columns:1fr 320px; gap:44px; align-items:start; margin-top:24px}
.side{display:flex; flex-direction:column; gap:22px}
.side-card{background:var(--card); border-radius:var(--radius); padding:20px 22px}
.side-card h3{font-size:16px; font-weight:700; margin:0 0 12px}
.rank-mini{display:flex; gap:12px; align-items:center; padding:10px 0; border-bottom:1px solid var(--hairline); text-decoration:none}
.side-card .rank-mini:last-child{border-bottom:0}
.rank-mini .rn{font-size:17px; font-weight:700; color:var(--amber-deep); width:18px; flex-shrink:0; font-variant-numeric:tabular-nums}
.rank-mini .rimg{width:64px; height:44px; border-radius:8px; object-fit:cover; flex-shrink:0}
.rank-mini .rt{font-size:12.5px; font-weight:600; line-height:1.55; color:var(--ink)}
.rank-mini:hover .rt{color:var(--amber-deep)}
.side-cta{background:var(--shu); color:#fff; border-radius:var(--radius); padding:24px 22px; text-align:center}
.side-cta b{display:block; font-size:16px; font-weight:700; line-height:1.7; margin-bottom:4px}
.side-cta span{font-size:12px; color:rgba(255,255,255,.7); display:block; line-height:1.8}
.side-cta .btn{background:#fff; color:var(--shu); padding:12px 30px; font-size:14px; margin-top:14px}
.side-cta .btn:hover{background:#EDEDF0}
.video-card{position:relative; border-radius:var(--radius); overflow:hidden; background:linear-gradient(135deg,#4A2A22,#5C352A); padding:26px 22px; color:#fff}
.video-card .vplay{width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.92); display:flex; align-items:center; justify-content:center; margin-bottom:12px}
.video-card .vplay::after{content:""; border-left:13px solid var(--ink); border-top:8px solid transparent; border-bottom:8px solid transparent; margin-left:3px}
.video-card b{display:block; font-size:15px; font-weight:700; line-height:1.7}
.video-card span{font-size:11.5px; color:rgba(255,255,255,.65)}
.list-row .thumb{overflow:hidden}
.list-row .thumb img{width:100%; height:100%; object-fit:cover; display:block}
.cases .photo{position:relative; overflow:hidden}
.cases .photo img{width:100%; height:100%; object-fit:cover; display:block; position:absolute; inset:0}
@media (max-width:900px){ .two-col{grid-template-columns:1fr} .side{position:static} }


/* ===== v12 構成増築（実査 ref-23〜27: QUERYY / NEC wisdom / ferret / 侍 / CAREER HACK） ===== */
/* カテゴリ棚（QUERYY CATEGORIES / 侍 メインカテゴリ型） */
.cat-shelf{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.cat-col{background:var(--card); border-radius:var(--radius); padding:22px 26px 16px; display:flex; flex-direction:column; border-top:3px solid var(--shu)}
.cat-col .ch{display:flex; align-items:baseline; gap:10px; border-bottom:1px solid var(--hairline); padding-bottom:12px}
.cat-col .ch b{font-size:16.5px; font-weight:700}
.cat-col .ch .n{font-size:11px; color:var(--muted); font-variant-numeric:tabular-nums; margin-left:auto; letter-spacing:.06em}
.mini-row{display:block; padding:12px 0; border-bottom:1px solid var(--hairline); text-decoration:none}
.mini-row .t{display:block; font-size:13.5px; font-weight:600; line-height:1.65; color:var(--ink)}
.mini-row:hover .t{color:var(--amber-deep)}
.mini-row .m{font-size:11px; color:var(--muted); font-variant-numeric:tabular-nums}
.cat-col .more2{display:block; text-align:right; font-size:12.5px; color:var(--muted); text-decoration:none; padding:12px 0 4px; margin-top:auto}
.cat-col .more2:hover{color:var(--ink)}
@media (max-width:860px){ .cat-shelf{grid-template-columns:1fr} }

/* 連載ブロック（CAREER HACK 特集記事 / NEC SERIES 型） */
.series-block{display:grid; grid-template-columns:340px 1fr; background:var(--card); border-radius:var(--radius); overflow:hidden}
.series-block .intro{padding:36px 36px 30px; background:var(--shu-tint); display:flex; flex-direction:column}
.series-block .intro .sc{font-size:11.5px; font-weight:600; letter-spacing:.16em; color:var(--amber-deep)}
.series-block .intro h3{font-size:22px; font-weight:700; line-height:1.6; margin:10px 0 8px}
.series-block .intro p{font-size:13.5px; color:var(--sub); line-height:1.95; margin:0}
.series-block .intro .more3{margin-top:auto; padding-top:20px; font-size:13px; color:var(--muted); text-decoration:none}
.series-block .intro .more3:hover{color:var(--ink)}
.series-block .eps{padding:12px 36px}
.ep-row{display:flex; gap:18px; align-items:baseline; padding:17px 0; border-bottom:1px solid var(--hairline); text-decoration:none}
.series-block .eps .ep-row:last-child{border-bottom:0}
.ep-row .no{font-family:Menlo,monospace; font-size:11px; color:var(--amber-deep); letter-spacing:.08em; flex-shrink:0; width:46px}
.ep-row .t{font-size:15px; font-weight:600; line-height:1.65; flex:1}
.ep-row:hover .t{color:var(--amber-deep)}
.ep-row .m{font-size:11.5px; color:var(--muted); flex-shrink:0; font-variant-numeric:tabular-nums}
@media (max-width:860px){ .series-block{grid-template-columns:1fr} .series-block .intro{border-right:0; border-bottom:1px solid var(--hairline)} }

/* セミナー日付リスト（ferret 直近開催イベント型） */
.event-rows{background:var(--card); border-radius:var(--radius); padding:8px 36px}
.ev-row{display:flex; gap:24px; align-items:center; padding:18px 0; border-bottom:1px solid var(--hairline); text-decoration:none}
.event-rows .ev-row:last-child{border-bottom:0}
.ev-row .date{flex-shrink:0; width:86px; text-align:center; background:var(--shu-tint); border-radius:10px; padding:9px 0 7px}
.ev-row .date b{display:block; font-size:17px; font-weight:700; font-variant-numeric:tabular-nums; line-height:1.3; color:var(--shu-deep)}
.ev-row .date span{font-size:10px; color:var(--muted); letter-spacing:.08em}
.ev-row .t{font-size:15px; font-weight:700; line-height:1.6; flex:1}
.ev-row:hover .t{color:var(--amber-deep)}
.ev-row .place{font-size:12px; color:var(--muted); flex-shrink:0}
.ev-row .seat{flex-shrink:0; font-size:11px; font-weight:600; color:var(--amber-deep); letter-spacing:.06em}
.ev-note{font-size:12.5px; color:var(--muted); margin-top:12px}
@media (max-width:860px){ .ev-row .place{display:none} }

/* 読者バンド（ferret 会員特典 / NEC MEMBER 型） */
.reader-band{background:linear-gradient(135deg,var(--shu),var(--shu-deep)); color:#fff; border-radius:var(--radius); padding:44px 48px; margin-top:110px; display:flex; gap:34px; align-items:center; flex-wrap:wrap}
.reader-band .txt{flex:1; min-width:280px}
.reader-band .txt b{display:block; font-size:20px; font-weight:700; line-height:1.7; margin-bottom:4px}
.reader-band .txt span{font-size:13px; color:rgba(255,255,255,.7); line-height:1.9}
.reader-band .num{text-align:center; flex-shrink:0; padding:0 10px}
.reader-band .num .v{font-size:34px; font-weight:700; font-variant-numeric:tabular-nums; line-height:1.2}
.reader-band .num .v small{font-size:15px; font-weight:600}
.reader-band .num .k{font-size:11px; color:rgba(255,255,255,.6); letter-spacing:.1em; margin-top:2px}
.reader-band .btn{background:#fff; color:var(--shu); margin-top:0; flex-shrink:0}
.reader-band .btn:hover{background:#EDEDF0}

/* fat footer（5媒体共通のサイトマップ型） */
.foot-map{display:grid; grid-template-columns:repeat(4,1fr); gap:28px; padding:40px 0 34px; margin-bottom:26px; border-bottom:1px solid var(--hairline)}
.foot-map .col b{display:block; font-size:12px; font-weight:700; letter-spacing:.12em; color:var(--ink); margin-bottom:10px}
.foot-map .col a{display:block; font-size:12.5px; color:var(--sub); text-decoration:none; padding:4px 0; line-height:1.7}
.foot-map .col a:hover{color:var(--amber-deep)}
@media (max-width:860px){ .foot-map{grid-template-columns:1fr 1fr} }
/* 薄朱の全幅バンド（侍カリキュラム帯を淡色で・可読性優先） */
.tintband{background:var(--shu-tint); width:100vw; margin-left:calc(50% - 50vw); margin-top:110px; padding:6px 0 64px}
.tintband .tint-in{max-width:1040px; margin:0 auto; padding:0 32px}
.tintband .sec-head{margin-top:54px; border-bottom-color:rgba(199,58,34,.16)}

/* ===== v14 ferret完コピ構成（構成のみ。意匠は白×墨×金×朱） ===== */
.hcar{width:100vw; margin-left:calc(50% - 50vw); overflow:hidden; padding:34px 0 8px; background:var(--bg)}
.hcar-track{display:flex; gap:18px; justify-content:center; align-items:stretch}
.hslide{flex:0 0 560px; text-decoration:none}
.hbn{position:relative; border-radius:14px; overflow:hidden; aspect-ratio:16/8.4; display:block; background:var(--card)}
.hbn img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.hbn .scrim{position:absolute; inset:0; background:linear-gradient(180deg,rgba(15,15,16,0) 30%,rgba(15,15,16,.74) 100%)}
.hbn .cp{position:absolute; left:0; right:0; bottom:0; padding:20px 24px}
.hbn .chip2{display:inline-block; background:#fff; color:var(--ink); font-size:10.5px; font-weight:600; letter-spacing:.1em; border-radius:999px; padding:3px 12px}
.hbn h2{color:#fff; margin:10px 0 4px; font-size:22px; line-height:1.55; font-weight:700; text-shadow:0 1px 14px rgba(0,0,0,.35)}
.hbn .s{color:rgba(255,255,255,.85); font-size:12px}
.hbn.solid{background:linear-gradient(135deg,var(--shu),var(--shu-deep))}
.hbn.solid .cp{top:0; display:flex; flex-direction:column; justify-content:center; align-items:flex-start}
.hbn.solid h2{text-shadow:none}
.hbn.solid .chip2{color:var(--shu-deep)}
.hslide .hm{display:flex; gap:10px; margin-top:9px; font-size:11px; color:var(--muted); font-variant-numeric:tabular-nums}
.hslide .hm .hc{color:var(--amber-deep); font-weight:600; letter-spacing:.08em}
.hcar-nav{display:flex; gap:14px; align-items:center; justify-content:center; margin-top:22px; font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; position:relative; z-index:3}
.hcar-nav .ar{width:34px; height:34px; border-radius:50%; background:var(--card); border:1px solid var(--hairline); display:flex; align-items:center; justify-content:center; color:var(--ink); text-decoration:none; font-size:15px}
.hcar-nav .ar:hover{background:var(--shu); color:#fff; border-color:var(--shu)}
@media(max-width:860px){ .hslide{flex:0 0 86vw} }

.shindan-strip{max-width:820px; margin:36px auto 0; background:var(--shu); color:#fff; border-radius:12px; padding:18px 26px; display:flex; gap:18px; align-items:center; flex-wrap:wrap}
.shindan-strip b{font-size:15.5px; font-weight:700}
.shindan-strip span{font-size:12px; color:rgba(255,255,255,.78)}
.shindan-strip .btn{margin:0 0 0 auto; padding:10px 24px; font-size:13.5px; background:#fff; color:var(--shu)}
.shindan-strip .btn:hover{background:#F6E8E4}

.sub-label{display:flex; align-items:center; gap:12px; margin:44px 0 16px; font-size:15.5px; font-weight:700}
.sub-label::before{content:""; width:10px; height:10px; background:var(--shu); border-radius:2px}
.sub-label .n2{font-size:11px; color:var(--muted); font-weight:600; letter-spacing:.06em}
.card .date{font-size:11.5px; color:var(--muted); font-variant-numeric:tabular-nums}

.doc-card{display:flex; flex-direction:column; background:var(--card); border-radius:var(--radius); overflow:hidden; text-decoration:none; transition:transform .18s ease}
.doc-card:hover{transform:translateY(-2px)}
.doc-face{aspect-ratio:16/9; display:flex; flex-direction:column; justify-content:center; padding:22px 26px}
.doc-face .k2{font-size:10.5px; font-weight:600; letter-spacing:.16em; color:rgba(29,29,31,.55)}
.doc-face b{font-size:19px; font-weight:700; line-height:1.6; color:var(--ink); margin-top:6px}
.doc-body{padding:14px 20px 18px; display:flex; align-items:center; gap:12px}
.doc-body > span:first-child{font-size:12px; color:var(--muted); flex:1}
.doc-body .dl{font-size:12.5px; font-weight:700; color:var(--shu); white-space:nowrap}

.rank-wide{background:var(--card); border-radius:var(--radius); padding:10px 34px}
.rw-row{display:flex; gap:20px; align-items:center; padding:15px 0; border-bottom:1px solid var(--hairline); text-decoration:none}
.rank-wide .rw-row:last-child{border-bottom:0}
.rw-row .no{font-size:24px; font-weight:700; color:var(--amber-deep); width:34px; flex-shrink:0; font-variant-numeric:tabular-nums; text-align:center}
.rw-row .th{width:104px; height:64px; border-radius:8px; object-fit:cover; flex-shrink:0}
.rw-row .tx{flex:1; min-width:0}
.rw-row .t{display:block; font-size:15px; font-weight:700; line-height:1.6}
.rw-row:hover .t{color:var(--shu)}
.rw-row .c{font-size:11px; color:var(--amber-deep); font-weight:600; letter-spacing:.1em}
.rw-tab{display:flex; gap:8px; margin-left:auto}
.rw-tab a{padding:6px 16px; border-radius:999px; background:var(--card); color:var(--sub); text-decoration:none; font-weight:600; font-size:12px}
.rw-tab a.on{background:var(--shu); color:#fff}

.tool-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.tool-card{background:var(--card); border-radius:14px; padding:20px 22px; text-decoration:none; display:flex; gap:14px; align-items:center; transition:transform .18s ease}
.tool-card:hover{transform:translateY(-2px)}
.tool-card .ic{width:44px; height:44px; border-radius:10px; background:var(--shu-tint); color:var(--shu-deep); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:17px; flex-shrink:0}
.tool-card b{display:block; font-size:14.5px; font-weight:700; color:var(--ink)}
.tool-card > span:last-child span{font-size:11.5px; color:var(--muted)}
@media(max-width:860px){ .tool-grid{grid-template-columns:1fr} }

.center-btn{text-align:center; margin-top:26px}
.center-btn .btn{margin-top:0; background:var(--card); color:var(--ink); border:1.5px solid var(--hairline); padding:13px 40px; font-size:14px}
.center-btn .btn:hover{background:#EFEFF2}
.reader-band{margin-top:110px}

.site-foot.dark{background:#1D1D1F; border-top:0}
.site-foot.dark .foot-inner{color:#B9B9BE}
.site-foot.dark .mark{color:#fff}
.site-foot.dark .foot-map{border-bottom-color:#3A3A3E}
.site-foot.dark .foot-map .col b{color:#fff}
.site-foot.dark .foot-map .col a{color:#B9B9BE}
.site-foot.dark .foot-map .col a:hover{color:#fff}
.site-foot.dark .note{color:#8A8A8F}

/* ===== v15 黒白黄（ARToVILLA DNA・角丸廃止・EN見出し） ===== */
:root{--yellow:#FFDE00}
.bwx *{border-radius:0 !important}
.bwx{background:#fff}
.bwx .hcar{background:#fff; padding-top:26px}
.bwx .site-head{border-bottom:2px solid #111}

/* 見出し: EN大900＋JP小 */
.bwx .sec-head{display:block; border-bottom:2px solid #111; padding-bottom:16px; position:relative}
.bwx .sec-head::after{width:88px; height:6px; background:var(--yellow); bottom:-2px}
.bwx .sec-head .e2{display:block; font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:40px; font-weight:900; letter-spacing:.01em; line-height:1.05}
.bwx .sec-head .e2::before{content:""; display:inline-block; width:16px; height:16px; background:#111; margin-right:14px}
.bwx .sec-head .j2{display:block; font-size:12.5px; font-weight:700; color:#111; margin-top:8px; letter-spacing:.08em}
.bwx .sec-head .more{position:absolute; right:0; bottom:16px; font-weight:700; color:#111}
.bwx .sec-head .more:hover{background:var(--yellow)}
.bwx .sec-head .rw-tab{position:absolute; right:0; bottom:14px}

/* ボタン: 黒角なし、hoverで黄 */
.bwx .btn{background:#111; color:#fff; border:2px solid #111}
.bwx .btn:hover{background:var(--yellow); color:#111}
.bwx .gnav .shindan{background:#111; color:#fff}
.bwx .gnav .shindan:hover{background:var(--yellow); color:#111}

/* カード: 白地×黒枠1.5px、カテゴリは黄タグ */
.bwx .card{border:1.5px solid #111}
.bwx .card:hover{transform:none; box-shadow:6px 6px 0 var(--yellow)}
.bwx .cat{background:var(--yellow); color:#111; padding:3px 9px; font-weight:700; letter-spacing:.1em}
.bwx .sub-label{font-size:16px}
.bwx .sub-label::before{background:var(--yellow); border:1.5px solid #111; width:12px; height:12px}

/* ヒーロー: 黒帯白抜きの段組見出し（ARToVILLA様式） */
.bwx .hbn .scrim{display:none}
.bwx .hbn{border:1.5px solid #111}
.bwx .hbn .cp{padding:18px 20px}
.bwx .hbn h2, .bwx .hbn .ht{display:inline; background:#111; color:#fff; padding:5px 12px; line-height:2.05; font-size:20px; text-shadow:none; box-decoration-break:clone; -webkit-box-decoration-break:clone}
.bwx .hbn .s{display:inline-block; background:#fff; color:#111; padding:4px 10px; font-weight:600; margin-top:10px}
.bwx .hbn .chip2{background:var(--yellow); color:#111; font-weight:700}
.bwx .hbn.ylw{background:var(--yellow)}
.bwx .hbn.ylw .chip2{background:#111; color:var(--yellow)}
.bwx .hslide .hm .hc{color:#111; background:var(--yellow); padding:1px 7px; font-weight:700}
.bwx .hcar-nav .ar{border:1.5px solid #111; color:#111}
.bwx .hcar-nav .ar:hover{background:var(--yellow); color:#111; border-color:#111}

/* 診断細帯: 黄地×黒文字×黒ボタン */
.bwx .shindan-strip{background:var(--yellow); color:#111; border:2px solid #111}
.bwx .shindan-strip span{color:#111}
.bwx .shindan-strip .btn{background:#111; color:#fff}
.bwx .shindan-strip .btn:hover{background:#fff; color:#111}

/* 資料: 黄・黒・白枠の三面 */
.bwx .doc-card{border:1.5px solid #111}
.bwx .doc-card:hover{transform:none; box-shadow:6px 6px 0 var(--yellow)}
.bwx .doc-card:nth-child(1) .doc-face{background:var(--yellow)}
.bwx .doc-card:nth-child(2) .doc-face{background:#111}
.bwx .doc-card:nth-child(2) .doc-face b{color:#fff}
.bwx .doc-card:nth-child(2) .doc-face .k2{color:rgba(255,255,255,.6)}
.bwx .doc-card:nth-child(3) .doc-face{background:#fff; border-bottom:1.5px solid #111}
.bwx .doc-body .dl{color:#111; background:var(--yellow); padding:3px 8px; font-weight:700}

/* 登壇者バナー（ferretセミナーバナー様式×黒白黄） */
.bwx .spk-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:18px}
.bwx .spk-banner{position:relative; display:flex; min-height:230px; border:2px solid #111; text-decoration:none; overflow:hidden}
.bwx .sb-black{background:#111}
.bwx .sb-yellow{background:var(--yellow)}
.bwx .sb-tx{flex:1; display:flex; flex-direction:column; padding:26px 8px 24px 28px; position:relative; z-index:2}
.bwx .sb-k{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:11px; font-weight:900; letter-spacing:.18em}
.bwx .sb-black .sb-k{color:var(--yellow)}
.bwx .sb-yellow .sb-k{color:#111}
.bwx .sb-t{font-size:19px; font-weight:700; line-height:1.6; margin-top:12px}
.bwx .sb-black .sb-t{color:#fff}
.bwx .sb-yellow .sb-t{color:#111}
.bwx .sb-n{margin-top:auto; padding-top:16px; font-size:15px; font-weight:700}
.bwx .sb-black .sb-n{color:#fff}
.bwx .sb-yellow .sb-n{color:#111}
.bwx .sb-n span{display:block; font-size:10.5px; font-weight:600; letter-spacing:.06em; margin-top:2px; opacity:.65}
.bwx .sb-ph{position:relative; width:190px; flex-shrink:0; display:flex; align-items:flex-end; justify-content:center}
.bwx .sb-ph img{width:170px; display:block; filter:drop-shadow(0 0 0 transparent)}
.bwx .ph-wait svg{width:130px; opacity:.9}
.bwx .ph-note{position:absolute; top:12px; right:12px; background:#fff; color:#111; font-size:10px; font-weight:700; padding:3px 8px; letter-spacing:.08em}
@media(max-width:860px){ .bwx .spk-grid{grid-template-columns:1fr} }

/* セミナー行・日付チップ */
.bwx .event-rows{border:1.5px solid #111}
.bwx .ev-row .date{background:var(--yellow)}
.bwx .ev-row .date b{color:#111}
.bwx .ev-row:hover .t{color:#111; background:var(--yellow)}
.bwx .seat{background:#111; color:var(--yellow); padding:3px 8px; font-weight:700}
.bwx .center-btn .btn{background:#fff; color:#111; border:2px solid #111}
.bwx .center-btn .btn:hover{background:var(--yellow)}

/* ランキング */
.bwx .rank-wide{border:1.5px solid #111}
.bwx .rw-row .no{color:#111; font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; font-weight:900; font-size:28px}
.bwx .rw-row .c{background:var(--yellow); color:#111; padding:1px 7px; font-weight:700}
.bwx .rw-row:hover .t{background:var(--yellow)}
.bwx .rw-tab a{border:1.5px solid #111; color:#111; background:#fff}
.bwx .rw-tab a.on{background:#111; color:#fff}

/* チップ雲・道具・読者帯 */
.bwx .catbar a{border:1.5px solid #111; background:#fff; color:#111; font-weight:700}
.bwx .catbar a:hover{background:var(--yellow)}
.bwx .tool-card{border:1.5px solid #111}
.bwx .tool-card:hover{transform:none; box-shadow:6px 6px 0 var(--yellow)}
.bwx .tool-card .ic{background:var(--yellow); color:#111; font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; font-weight:900}
.bwx .reader-band{background:#111; border:2px solid #111}
.bwx .reader-band .num .v{color:var(--yellow)}
.bwx .reader-band .btn{background:#fff; color:#111}
.bwx .reader-band .btn:hover{background:var(--yellow)}

/* footer hover黄・rtime黒 */
.bwx .site-foot.dark .foot-map .col a:hover{color:var(--yellow)}
.bwx .rtime b{color:#111}
.bwx .mini-row:hover .t, .bwx .more:hover, .bwx .more2:hover{color:#111}

/* ===== v16 黒ヘッダー×TORISETSU×黄ティッカー ===== */
.bwx .site-head{background:#111; border-bottom:0}
.bwx .gnav a{color:#fff}
.bwx .gnav a:hover{color:var(--yellow)}
.bwx .gnav .shindan{background:var(--yellow); color:#111}
.bwx .gnav .shindan:hover{background:#fff; color:#111}
.bwx .tlogo{display:block; font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; font-weight:900; font-size:31px; letter-spacing:.05em; color:#fff; line-height:1}
.bwx .tlogo small{display:block; font-size:9px; letter-spacing:.3em; color:var(--yellow); font-weight:700; margin-top:5px}
.bwx .ticker{background:var(--yellow); border-bottom:0; overflow:hidden; white-space:nowrap}
.bwx .ticker-in{display:inline-block; animation:tickmove 30s linear infinite}
.bwx .ticker-in span{display:inline-block; padding:8px 0; font-size:12.5px; font-weight:700; color:#111; letter-spacing:.04em}
@keyframes tickmove{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){ .bwx .ticker-in{animation:none} }

/* ===== v17 記事ページ（.bwx） ===== */
.bwx .wrap-narrow{max-width:760px}
.bwx .a-bc{font-size:12px; font-weight:700; color:#111; padding:22px 0 0}
.bwx .a-bc a{color:#111; text-decoration:none; background:var(--yellow); padding:2px 8px}
.bwx .a-bc a:hover{background:#111; color:#fff}
.bwx .a-head{padding:30px 0 6px}
.bwx .a-title{font-size:31px; font-weight:900; line-height:1.55; margin:14px 0 14px}
.bwx .a-lead{font-size:16px; color:var(--sub); line-height:2}
.bwx .a-meta{font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; margin-top:12px}
.bwx .a-hero{border:1.5px solid #111; margin:18px 0 0}
.bwx .a-hero img{display:block; width:100%}
.bwx .a-kekka{border:2px solid #111; background:var(--yellow); padding:20px 26px; margin:34px 0 0}
.bwx .a-kekka .lab{display:inline-block; background:#111; color:#fff; font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; font-weight:900; font-size:11px; letter-spacing:.18em; padding:4px 10px}
.bwx .a-kekka p{margin:10px 0 0; font-size:17px; font-weight:700; line-height:1.95}
.bwx .a-body h2{font-size:21px; font-weight:900; margin:52px 0 16px; padding-left:16px; border-left:8px solid var(--yellow); line-height:1.6}
.bwx .a-body p{margin:16px 0; line-height:2.05; font-size:16px}
.bwx .a-body ul{margin:16px 0; padding-left:1.4em}
.bwx .a-body li{margin:10px 0; line-height:2}
.bwx .a-caution{border:1.5px solid #111; padding:20px 26px; margin:44px 0}
.bwx .a-caution b{display:inline-block; background:#111; color:var(--yellow); font-size:12px; letter-spacing:.12em; font-weight:700; padding:4px 10px; margin-bottom:8px}
.bwx .a-caution p{margin:6px 0 0; font-size:14.5px; line-height:2; color:var(--sub)}
.bwx .a-kouka{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:34px 0}
.bwx .a-tile{border:1.5px solid #111; padding:18px 18px 14px; text-align:center}
.bwx .a-tile .k{font-size:11.5px; color:var(--sub); font-weight:600; line-height:1.6; min-height:2.4em}
.bwx .a-tile .v{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:22px; font-weight:900; margin:8px 0 6px; background:linear-gradient(transparent 62%, var(--yellow) 62%); display:inline-block; padding:0 4px}
.bwx .a-tile .u{font-size:10.5px; color:var(--muted); line-height:1.6}
.bwx .a-author{display:flex; gap:20px; align-items:center; flex-wrap:wrap; border:2px solid #111; background:#111; color:#fff; padding:22px 26px; margin:44px 0}
.bwx .a-author .who{flex:1; min-width:240px; font-size:12.5px; line-height:1.9; color:rgba(255,255,255,.75)}
.bwx .a-author .who b{display:block; color:#fff; font-size:14px; margin-bottom:2px}
.bwx .a-author .btn{background:var(--yellow); color:#111; margin:0; border:0; padding:12px 26px; font-size:14px}
.bwx .a-author .btn:hover{background:#fff}
.bwx .a-next{margin:56px 0 0; border-top:2px solid #111; position:relative}
.bwx .a-next::before{content:""; position:absolute; top:-2px; left:0; width:64px; height:6px; background:var(--yellow)}
.bwx .a-next-h{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:20px; font-weight:900; letter-spacing:.02em; margin:18px 0 4px}
.bwx .a-next-row{display:flex; gap:16px; align-items:baseline; padding:15px 0; border-bottom:1px solid var(--hairline); text-decoration:none}
.bwx .a-next-row .t{flex:1; font-size:14.5px; font-weight:700; line-height:1.65; color:var(--ink)}
.bwx .a-next-row:hover .t{background:var(--yellow)}
.bwx .a-next-row .m{font-size:11px; color:var(--muted); flex-shrink:0}
@media (max-width:860px){ .bwx .a-kouka{grid-template-columns:1fr} }

/* ===== v18 縁取り廃止（枠線→面と余白で立てる・ARToVILLA直系） ===== */
.bwx{background:var(--bg)}
.bwx .hcar{background:var(--bg)}
.bwx .card, .bwx .doc-card, .bwx .tool-card, .bwx .rank-wide, .bwx .event-rows,
.bwx .hbn, .bwx .spk-banner, .bwx .shindan-strip, .bwx .a-hero, .bwx .a-kekka,
.bwx .a-caution, .bwx .a-tile, .bwx .a-author{border:0}
.bwx .card, .bwx .doc-card, .bwx .tool-card{background:var(--card); transition:transform .18s ease, box-shadow .18s ease}
.bwx .card:hover, .bwx .doc-card:hover, .bwx .tool-card:hover{transform:translateY(-3px); box-shadow:0 12px 28px rgba(17,17,17,.12)}
.bwx .event-rows, .bwx .rank-wide{background:var(--card)}
.bwx .doc-card:nth-child(3) .doc-face{border-bottom:1px solid var(--hairline)}
.bwx .catbar a{border:0; background:var(--card)}
.bwx .rw-tab a{border:0; background:var(--card)}
.bwx .hcar-nav .ar{border:1px solid var(--hairline); background:var(--card)}
.bwx .site-head{border-bottom:0}
/* 記事ページ: 本文を白シートに載せる */
.bwx main.wrap-narrow{background:var(--card); max-width:820px; padding:8px 56px 56px; margin-top:26px; margin-bottom:0}
.bwx .a-caution{background:var(--bg)}
.bwx .a-tile{background:var(--bg)}
@media (max-width:860px){ .bwx main.wrap-narrow{padding:8px 22px 40px} }

/* ===== v20 差し色（黄の相棒に 鉄紺・ベージュ・カーキ ／ ワークウェア配色） ===== */
:root{--navy2:#1C3A5E; --navy2-deep:#152C47; --beige:#EAE0CE; --khaki:#6F6D45}
.bwx .sub-label::before{border:0}
.bwx .sh-navy::after{background:var(--navy2)}
.bwx .sh-khaki::after{background:var(--khaki)}
.bwx .sh-beige::after{background:var(--beige)}
.bwx .sl-navy::before{background:var(--navy2)}
.bwx .sl-khaki::before{background:var(--khaki)}
/* 資料3面: 黄／鉄紺／ベージュ */
.bwx .doc-card:nth-child(2) .doc-face{background:var(--navy2)}
.bwx .doc-card:nth-child(3) .doc-face{background:var(--beige); border-bottom:0}
.bwx .doc-card:nth-child(3) .doc-face b{color:#111}
.bwx .doc-card:nth-child(3) .doc-face .k2{color:rgba(17,17,17,.5)}
/* 柏樹バナー: 黄→ベージュ（kラベルはカーキ） */
.bwx .sb-yellow{background:var(--beige)}
.bwx .sb-yellow .sb-k{color:var(--khaki)}
/* 日付チップ: ベージュ */
.bwx .ev-row .date{background:var(--beige)}
/* 読者バンド: 黒→鉄紺（数字は黄のまま） */
.bwx .reader-band{background:linear-gradient(135deg,var(--navy2),var(--navy2-deep))}
/* 道具アイコン: 黄・紺・カーキのローテ */
.bwx .tool-card:nth-child(3n+2) .ic{background:var(--navy2); color:#fff}
.bwx .tool-card:nth-child(3n) .ic{background:var(--khaki); color:#fff}
/* チップ雲 hover: ベージュ */
.bwx .catbar a:hover{background:var(--beige)}
/* 記事ページ: h2=鉄紺の背骨、編集部箱=鉄紺、注意ラベル=カーキ */
.bwx .a-body h2{border-left-color:var(--navy2)}
.bwx .a-author{background:var(--navy2); border:0}
.bwx .a-caution b{background:var(--khaki); color:#fff}

/* ===== v21 ファーストビューの黄面を1つに（隊長「最初のイメージが黄色すぎる」） ===== */
/* ティッカー: 黄→ベージュ */
.bwx .ticker{background:var(--beige)}
/* ヒーローのセミナースライド: 黄→鉄紺（チップだけ黄・見出しは白帯に反転） */
.bwx .hbn.ylw{background:linear-gradient(135deg,var(--navy2),var(--navy2-deep))}
.bwx .hbn.ylw .chip2{background:var(--yellow); color:#111}
.bwx .hbn.ylw h2, .bwx .hbn.ylw .ht{background:#fff; color:#111}
.bwx .hbn.ylw .s{background:transparent; color:rgba(255,255,255,.85); padding:4px 0}

/* ===== v22 LINE帯はLINEグリーンを彷彿させる（隊長指摘） ===== */
:root{--line-green:#06C755; --line-green-deep:#05A847}
.bwx .reader-band .num .v{color:var(--line-green)}
.bwx .reader-band .btn{background:var(--line-green); color:#111; font-weight:700}
.bwx .reader-band .btn:hover{background:var(--line-green-deep); color:#111}

/* ===== v22b ティッカー=電光掲示板（黒地×黄文字・ベージュ案はv21に保全） ===== */
.bwx .ticker{background:#0E0E10; border-top:1px solid rgba(255,255,255,.14)}
.bwx .ticker-in span{color:var(--yellow)}

/* ===== v23 診断CTAもLINE緑へ（隊長「これが強いんよ」→黄の面を撲滅、LINE動線=緑で統一） ===== */
.bwx .gnav .shindan{background:var(--line-green); color:#111}
.bwx .gnav .shindan:hover{background:var(--line-green-deep); color:#111}
.bwx .shindan-strip{background:var(--card); color:#111}
.bwx .shindan-strip span{color:var(--muted)}
.bwx .shindan-strip .btn{background:var(--line-green); color:#111; font-weight:700; border:0}
.bwx .shindan-strip .btn:hover{background:var(--line-green-deep); color:#111}
/* 記事ページの編集部ボックスの診断ボタンも同じ動線色に */
.bwx .a-author .btn{background:var(--line-green); color:#111}
.bwx .a-author .btn:hover{background:var(--line-green-deep); color:#111}

/* ===== v24 ティッカー=背景色に溶かし細字で流す（隊長「あえて背景色に、細い字に」） ===== */
.bwx .ticker{background:var(--bg); border-top:0; border-bottom:0}
.bwx .ticker-in span{color:#111; font-weight:400; font-size:11.5px; letter-spacing:.14em; padding:12px 0}

/* ===== v25 ナビEN化（英太字＋日本語小・隊長「ここ英語記述、下に日本語翻訳を小さく」） ===== */
.gnav a .nv{display:block; font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; font-weight:900; font-size:13.5px; letter-spacing:.07em; line-height:1.2}
.gnav a .nj{display:block; font-size:9px; letter-spacing:.16em; margin-top:3px; font-weight:600; opacity:.6}
.bwx .gnav a{text-align:center}
.bwx .gnav a .nv{display:block; font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; font-weight:900; font-size:13.5px; letter-spacing:.07em; color:#fff; line-height:1.2}
.bwx .gnav a .nj{display:block; font-size:9px; color:rgba(255,255,255,.55); letter-spacing:.16em; margin-top:3px; font-weight:600}
.bwx .gnav a:hover .nv{color:var(--yellow)}
.bwx .gnav a:hover .nj{color:rgba(255,255,255,.8)}

/* ===== v26 色ルール整理（色は意味にだけ付ける）＋朱残党一掃 ===== */
/* 黄=編集: 柏樹バナー黄戻し・RANKING/CATEGORY線は黄へ（意味なきカーキ/ベージュ廃止） */
.bwx .sb-yellow{background:var(--yellow)}
.bwx .sb-yellow .sb-k{color:#111}
.bwx .sh-khaki::after{background:var(--yellow)}
.bwx .sh-beige::after{background:var(--yellow)}
/* 紺=セミナー: 日付チップ紺地×黄数字・SEMINAR線も紺 */
.bwx .ev-row .date{background:var(--navy2)}
.bwx .ev-row .date b{color:var(--yellow)}
.bwx .ev-row .date span{color:rgba(255,255,255,.75)}
#p-top .sec-head.sh-seminar::after{background:var(--navy2)}
/* 道具アイコン: ローテ廃止→黄×黒統一、LINE公式のみ緑（意味） */
.bwx .tool-card .ic{background:var(--yellow); color:#111}
.bwx .tool-card:nth-child(3n+2) .ic{background:var(--yellow); color:#111}
.bwx .tool-card:nth-child(3n) .ic{background:var(--yellow); color:#111}
.bwx .tool-card .ic.ic-line{background:var(--line-green); color:#fff}
/* hover文字は黒×黄マーカーに統一（朱の残党退治） */
.bwx .rw-row:hover .t, .bwx .ev-row:hover .t, .bwx .a-next-row:hover .t{color:#111}
.bwx .rank-mini:hover .rt, .bwx .list-row:hover .t, .bwx .mini-row:hover .t, .bwx .ep-row:hover .t{color:#111}

/* ===== v27 モーション ===== */
/* ヒーロー: 中央拡大カルーセル */
#p-top .hcar{padding:88px 0 20px; overflow:hidden}
#p-top .hcar-track{align-items:center; will-change:transform}
#p-top .hslide{transition:transform .65s cubic-bezier(.22,.61,.36,1), opacity .65s ease; transform:scale(.88); transform-origin:center bottom; opacity:.68}
#p-top .hslide.is-center{transform:scale(1.22); transform-origin:center bottom; opacity:1; z-index:2}
#p-top .hcar-nav .ar{cursor:pointer; user-select:none}
/* スクロールリビール */
.bwx .rv{opacity:0; transform:translateY(26px); transition:opacity .65s ease, transform .65s cubic-bezier(.22,.61,.36,1)}
.bwx .rv.on{opacity:1; transform:none}
/* 緑CTAの微パルス */
@keyframes greenpulse{0%{box-shadow:0 0 0 0 rgba(6,199,85,.42)}70%{box-shadow:0 0 0 12px rgba(6,199,85,0)}100%{box-shadow:0 0 0 0 rgba(6,199,85,0)}}
.bwx .shindan-strip .btn, .bwx .gnav .shindan, .bwx .reader-band .btn{animation:greenpulse 2.8s ease-out infinite}
@media (prefers-reduced-motion: reduce){
  #p-top .hslide{transition:none; transform:none; opacity:1}
  .bwx .rv{opacity:1; transform:none; transition:none}
  .bwx .shindan-strip .btn, .bwx .gnav .shindan, .bwx .reader-band .btn{animation:none}
}

/* ===== v28 漢字物理背景 ===== */
#kanji-bg{position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none}
#p-top .site-head, #p-top .ticker, #p-top main, #p-top .site-foot{position:relative; z-index:1}
@media (prefers-reduced-motion: reduce){ #kanji-bg{display:none} }

/* SEO: h1ロゴ */
h1.tlogo{margin:0; font-size:31px}
