/*
Theme Name: VM Theme（動画マスターズ）
Description: 軽量・SEO配慮の自作テーマ。SANGO非依存。
Version: 0.5.7
Author: TribalWorks
Text Domain: vm-theme
*/
:root{--bg:#f6f7fb;--card:#fff;--ink:#1c2233;--sub:#5b6478;--line:#e3e6ef;--brand:#1f3a8a;--brand2:#2f56d6;--accent:#ff6b2c;--ok:#12805c;--r:14px;--w:1200px}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.85 "Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",Meiryo,system-ui,sans-serif;-webkit-text-size-adjust:100%}
a{color:var(--brand2);text-underline-offset:3px}img{max-width:100%;height:auto}
.wrap{max-width:var(--w);margin:0 auto;padding:0 16px}
header.site{background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.hd{display:flex;align-items:center;gap:16px;min-height:60px}
.logo{white-space:nowrap;font-weight:800;font-size:18px;color:var(--ink);text-decoration:none;letter-spacing:.02em}.logo b{color:var(--accent)}
nav.gnav{margin-left:auto;display:flex;gap:4px;overflow-x:auto}
nav.gnav a{padding:8px 12px;border-radius:999px;color:var(--ink);text-decoration:none;font-size:14px;white-space:nowrap}
nav.gnav a:hover,nav.gnav a[aria-current]{background:var(--bg);color:var(--brand2)}
.hero{background:linear-gradient(135deg,#1f3a8a,#3b5bdb 60%,#6b8cff);color:#fff;padding:44px 0 56px}
.hero h1{font-size:clamp(24px,4.6vw,38px);line-height:1.35;margin:0 0 12px}
.hero p{margin:0 0 22px;opacity:.92;max-width:620px}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chips a{background:#fff;color:#1f3a8a;padding:10px 16px;border-radius:999px;text-decoration:none;font-weight:700;font-size:14px;box-shadow:0 2px 6px rgba(0,0,0,.15)}
section.blk{padding:36px 0}
h2.sec{font-size:22px;margin:0 0 6px;padding-left:12px;border-left:5px solid var(--accent);line-height:1.4}
p.lead{color:var(--sub);margin:0 0 18px;font-size:14px}
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.card h3{margin:0 0 6px;font-size:17px}.card .tag{display:inline-block;font-size:12px;background:var(--bg);border-radius:6px;padding:1px 8px;color:var(--sub);margin:0 4px 6px 0}
.card p{margin:0 0 12px;font-size:14px;color:var(--sub);line-height:1.7}
.btn{display:inline-block;background:var(--accent);color:#fff!important;text-decoration:none;font-weight:800;padding:12px 20px;border-radius:10px;text-align:center}
.btn.ghost{background:transparent;color:var(--brand2)!important;border:2px solid var(--brand2)}
.row{display:flex;gap:8px;flex-wrap:wrap}
.tablewrap{overflow-x:auto;background:var(--card);border:1px solid var(--line);border-radius:var(--r)}
table{border-collapse:collapse;width:100%;min-width:640px;font-size:14px}
th,td{padding:12px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
thead th{background:var(--bg);font-size:13px;color:var(--sub)}tbody th{position:sticky;left:0;background:var(--card)}
.note{font-size:12px;color:var(--sub);margin:8px 2px}
.pr{color:var(--sub);font-size:11px;line-height:1.6;margin:0 0 14px}
.cols{display:grid;gap:28px;grid-template-columns:1fr}
@media(min-width:900px){.cols{grid-template-columns:minmax(0,1fr) 300px}}
article.post{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px 20px}
@media(min-width:700px){article.post{padding:34px 40px}}
.crumbs{font-size:12.5px;color:var(--sub);margin:18px 0 8px}.crumbs a{color:var(--sub)}
article h1{font-size:clamp(22px,4vw,30px);line-height:1.45;margin:6px 0 10px}
.meta{font-size:13px;color:var(--sub);display:flex;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.summary{background:var(--bg);border-left:5px solid var(--ok);border-radius:10px;padding:14px 16px;margin:16px 0}
.summary b{color:var(--ok)}
.toc{border:1px solid var(--line);border-radius:10px;padding:14px 18px;margin:20px 0;background:var(--bg)}
.toc ol{margin:6px 0 0;padding-left:20px}.toc a{text-decoration:none}
article h2{font-size:22px;margin:40px 0 12px;padding:10px 14px;background:var(--bg);border-left:5px solid var(--brand2);border-radius:6px;line-height:1.45}
article h3{font-size:18px;margin:28px 0 8px;border-bottom:2px solid var(--line);padding-bottom:4px}
.proscons{display:grid;gap:12px;grid-template-columns:1fr}@media(min-width:640px){.proscons{grid-template-columns:1fr 1fr}}
.pro,.con{border-radius:10px;padding:12px 16px;border:1px solid var(--line)}.pro{border-top:4px solid var(--ok)}.con{border-top:4px solid #c2410c}
.pro h4,.con h4{margin:0 0 4px}.pro ul,.con ul{margin:0;padding-left:18px}
.cta{background:linear-gradient(135deg,#fff7ed,#ffedd5);border:2px solid var(--accent);border-radius:var(--r);padding:20px;text-align:center;margin:28px 0}
.cta small{display:block;color:var(--sub);margin-top:8px}
details{border:1px solid var(--line);border-radius:10px;padding:12px 16px;margin:8px 0;background:var(--card)}summary{font-weight:700;cursor:pointer}
aside .box{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin-bottom:16px;position:sticky;top:76px}
aside h3{margin:0 0 8px;font-size:16px}aside ul{list-style:none;margin:0;padding:0}aside li{border-top:1px solid var(--line);padding:8px 0;font-size:14px}aside li:first-child{border:0}
.author{display:flex;gap:12px;background:var(--bg);border-radius:10px;padding:14px;margin-top:30px;font-size:14px}
footer.site{margin-top:40px;background:var(--card);border-top:1px solid var(--line);padding:28px 0;font-size:13px;color:var(--sub)}
footer.site a{color:var(--sub);margin-right:14px}
.sticky-cta{position:fixed;left:0;right:0;bottom:0;background:var(--card);border-top:1px solid var(--line);padding:8px 12px;display:flex;gap:10px;z-index:30}
.sticky-cta .btn{flex:1;padding:11px}@media(min-width:900px){.sticky-cta{display:none}}

/* ---- WordPress本文・部品 ---- */
.screen-reader-text{position:absolute;left:-9999px}
.entry p{margin:0 0 1.1em}.entry ul,.entry ol{padding-left:1.4em;margin:0 0 1.2em}.entry li{margin:.25em 0}
.entry img{border-radius:10px;height:auto}.entry figure{margin:1.2em 0}.entry figcaption{font-size:13px;color:var(--sub)}
.entry table{min-width:0;display:block;overflow-x:auto;margin:1.2em 0}.entry table td,.entry table th{white-space:normal;min-width:110px}
.entry .wp-block-separator{border:0;border-top:1px solid var(--line);margin:1.6em 0}
.entry blockquote{border-left:4px solid var(--line);margin:1.2em 0;padding:.2em 1em;color:var(--sub)}
.entry .wp-block-buttons{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:22px 0}
.entry .wp-block-button__link,.wp-element-button{display:inline-block;background:var(--accent);color:#fff!important;text-decoration:none;font-weight:800;padding:13px 28px;border-radius:10px;text-align:center}
.entry .sgb-content-block{margin:0}
.toc ol{list-style:decimal}.toc ol.sub{list-style:disc;margin:2px 0 6px;font-size:14px}.toc li{margin:3px 0}
.pr+h1{margin-top:4px}
.arch{font-size:26px;margin:24px 0 8px}
.sform{display:flex;gap:8px;margin:12px 0 22px}.sform input{flex:1;padding:11px 14px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink);font:inherit}
.sform button{padding:0 18px;border:0;border-radius:10px;background:var(--brand2);color:#fff;font-weight:700;cursor:pointer}
.pager{display:flex;gap:8px;justify-content:center;margin:28px 0;flex-wrap:wrap}.pager .page-numbers{padding:8px 14px;border:1px solid var(--line);border-radius:8px;text-decoration:none;background:var(--card)}.pager .current{background:var(--brand2);color:#fff}
.card h3 a{color:var(--ink);text-decoration:none}.card .more{font-size:14px;font-weight:700}
article h2.rel{margin-top:44px}
.single-page{margin-top:24px}
@media(max-width:899px){body{padding-bottom:70px}}

/* ---- はみ出し防止 ---- */
.cols>*,article.post,.entry,.hd>*{min-width:0}
.entry{overflow-wrap:anywhere}
.entry .wp-block-table,.entry figure.wp-block-table{overflow-x:auto;max-width:100%}
.entry iframe,.entry video{max-width:100%}
.entry pre{overflow-x:auto;max-width:100%}
nav.gnav{min-width:0;flex:0 1 auto}

/* ---- スマホのヘッダー: ロゴ段とメニュー段に分ける ---- */
.logo{flex-shrink:0}
@media(max-width:699px){
header.site{position:static}
.hd{flex-wrap:wrap;gap:0;padding-top:10px}
nav.gnav{margin-left:0;width:100%;flex:1 1 100%;padding-bottom:8px}
}

/* ---- サムネイル・ヒーロー画像 ---- */
.card:has(.thumb){padding:0;overflow:hidden}
.card .thumb{display:block;margin:0}
.card .thumb img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:0}
.card:has(.thumb)>:not(.thumb){margin-left:16px;margin-right:16px}
.card:has(.thumb) .tag{margin-top:14px}
.card:has(.thumb) .more{display:inline-block;margin-bottom:16px}
.hero-img{margin:0 0 18px}.hero-img img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:12px}

/* ---- v0.3 メインビジュアル（写真のモザイク）・おすすめカード ---- */
.hero-photo{position:relative;overflow:hidden;background:#0b1431;padding:0}
.hero-photo .hero-bg{position:absolute;inset:0;display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:1fr;gap:0}
.hero-photo .hero-bg span{display:block;overflow:hidden;position:relative}
.hero-photo .hero-bg img{width:200%;max-width:none;height:100%;object-fit:cover;object-position:right center;display:block;margin-left:-100%;filter:brightness(1.35) saturate(1.25) contrast(1.05)}
.hero-photo .hero-fade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,16,44,.95) 0%,rgba(8,16,44,.78) 38%,rgba(8,16,44,.18) 72%,rgba(8,16,44,.05) 100%)}
.hero-photo .hero-in{position:relative;padding-top:64px;padding-bottom:72px;max-width:var(--w)}
.hero-photo h1{font-size:clamp(30px,6.2vw,54px);line-height:1.25;margin:6px 0 14px;text-shadow:0 2px 12px rgba(0,0,0,.4)}
.hero-photo p{max-width:640px;margin:0 0 20px;color:#e8ecff}
.eyebrow{display:inline-block;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);padding:4px 12px;border-radius:999px;font-size:13px;margin:0 0 10px;color:#fff}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 22px}
.btn.big{padding:15px 28px;font-size:17px;box-shadow:0 6px 18px rgba(255,107,44,.45)}
.btn.ghost.light{border-color:#fff;color:#fff!important}
.btn.sm{padding:8px 12px;font-size:13px;white-space:nowrap}
.hero-photo .sform{max-width:520px;margin:0}
.hero-photo .sform input{background:rgba(255,255,255,.96);color:#1c2233;border-color:transparent}
@media(max-width:700px){.hero-photo .hero-bg{grid-template-columns:repeat(2,1fr)}.hero-photo .hero-fade{background:linear-gradient(180deg,rgba(8,16,44,.9),rgba(8,16,44,.8))}.hero-photo .hero-in{padding-top:40px;padding-bottom:44px}}
.grid.feat{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.card.svc h3{margin-top:12px}
.meta2{font-size:13.5px;color:var(--sub);margin:0 0 6px;line-height:1.6}.meta2 b{color:var(--ink)}
.card.svc .row{margin:10px 0 4px}.card.svc .row .btn{padding:10px 14px;font-size:14px}
.card.svc .ad{font-size:11px;color:var(--sub);margin:4px 0 12px;text-align:right}
.card.svc>:not(.thumb){margin-left:16px;margin-right:16px}
.grid.genre{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.gcard{display:block;text-decoration:none;color:var(--ink)}.gcard b{display:block;font-size:17px;margin-bottom:4px}.gcard span{font-size:13px;color:var(--sub);line-height:1.6;display:block}
.gcard:hover{border-color:var(--brand2)}
td.actions{white-space:nowrap}td.actions .btn{margin-right:6px}

/* ---- 広告表示（ASP規約: ファーストビューに広告とわかる表示） ---- */
.adbar{background:#0b1431;color:#cbd5ff;font-size:12px;text-align:center;padding:5px 12px;line-height:1.5}
.adbar a{color:#fff;margin-left:8px}

.adnote{font-size:11px;color:var(--sub);white-space:nowrap}

.entry figure.fig{margin:20px 0}.entry figure.fig img{width:100%;height:auto;border-radius:10px;display:block}.entry figure.fig figcaption{font-size:12px;color:var(--sub);text-align:center;margin-top:6px}

/* ---- v0.5 見やすさ重視（ライト固定・幅と文字を大きく） ---- */
:root{color-scheme:light;--bg:#f4f6fb;--line:#dde2ee;--sub:#515b70}
body{font-size:17px;line-height:1.95}
.wrap{padding:0 24px}
header.site{box-shadow:0 1px 8px rgba(20,30,70,.06)}
.hd{min-height:68px}.logo{font-size:20px}
nav.gnav a{font-size:15px;padding:9px 14px}
section.blk{padding:56px 0}
h2.sec{font-size:28px;margin:0 0 10px;padding-left:14px;border-left-width:6px}
p.lead{font-size:16px;margin:0 0 26px;line-height:1.8}
.grid{gap:22px}.grid.feat{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.card{padding:22px;box-shadow:0 2px 10px rgba(20,30,70,.05)}
.card h3{font-size:20px}.card p{font-size:15.5px;line-height:1.8;color:var(--sub)}
.meta2{font-size:15px;line-height:1.75}
.btn{font-size:16px;padding:14px 24px}.card.svc .row .btn{font-size:15px;padding:12px 18px}
table{font-size:16px}th,td{padding:15px 16px}thead th{font-size:14px}
.note,.card.svc .ad{font-size:13px}
.hero-photo .hero-in{padding-top:84px;padding-bottom:92px}
.hero-photo h1{font-size:clamp(32px,5.6vw,56px);line-height:1.3}
.hero-photo p{font-size:18px;line-height:1.85}
.cols{gap:36px}@media(min-width:960px){.cols{grid-template-columns:minmax(0,1fr) 320px}}
article.post{padding:26px 22px;box-shadow:0 2px 12px rgba(20,30,70,.05)}
@media(min-width:700px){article.post{padding:44px 52px}}
article h1{font-size:clamp(26px,3.6vw,36px);line-height:1.5;margin:8px 0 14px}
.meta{font-size:14px}
.entry{font-size:17.5px;line-height:2}
.entry p{margin:0 0 1.4em}
.entry li{margin:.4em 0}
article h2{font-size:25px;margin:56px 0 18px;padding:14px 18px;background:#eef2ff;border-left:6px solid var(--brand2);line-height:1.5}
article h3{font-size:20px;margin:36px 0 12px;padding-bottom:6px;border-bottom:3px solid #dfe5f7}
.summary{padding:18px 20px;font-size:17px}
.toc{padding:18px 24px;font-size:16px}.toc li{margin:5px 0}
.entry table{font-size:16px}
.entry figcaption{font-size:14px}
.cta{padding:28px}.cta b{font-size:18px}
aside li{font-size:15px;padding:10px 0}
.crumbs{font-size:14px}
footer.site{font-size:14px;padding:36px 0}
@media(max-width:699px){body{font-size:16.5px}.entry{font-size:17px}.wrap{padding:0 18px}section.blk{padding:40px 0}h2.sec{font-size:24px}.hero-photo .hero-in{padding-top:48px;padding-bottom:52px}}

/* v0.5.1 ヒーロー: 写真内の文字が目立たないよう、ぼかして暗くする */
.hero-photo .hero-bg img{filter:blur(2px) brightness(.62) saturate(1.1) contrast(1.02);transform:scale(1.04)}
.hero-photo .hero-fade{background:linear-gradient(90deg,rgba(8,16,44,.96) 0%,rgba(8,16,44,.85) 45%,rgba(8,16,44,.45) 80%,rgba(8,16,44,.3) 100%)}