/* 色と形はAIフリーランスラボの記事ページに合わせる（2026-10-18 に公開ページのCSSから読んだ値）
   --b 本文リンク / --n 見出し・ヘッダー / --m アクセント / --y 検索ボタン / --i 文字 / 背景 #F2F6FB */
:root{--b:#1E5AA8;--n:#1C3C62;--m:#0FA79B;--y:#FBBF24;--i:#0E1B2E;--muted:#4f6279;--line:#d9e3ef;--card:#fff;--accent:#1E5AA8;--shadow:0 4px 14px #0e1b2e1a}
*{box-sizing:border-box}
body{margin:0;font-family:"Hiragino Sans","Yu Gothic","Meiryo",sans-serif;color:var(--i);background:#F2F6FB;line-height:1.75}
a{color:var(--b)}
.hd{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 24px;background:var(--n);color:#fff}
.hd a{color:#fff;text-decoration:none}
.hd nav a{margin-left:24px;font-weight:700;font-size:.95rem}
.logo{font-weight:900;font-size:1.25rem;letter-spacing:.02em}
main{max-width:1080px;margin:0 auto;padding:32px 16px 56px}
.pr{display:inline-block;margin:0 0 16px;padding:3px 14px;font-size:.8rem;font-weight:700;color:var(--muted);background:#fff;border:1px solid var(--line);border-radius:99px}

/* 見出しの帯。ラボのヘッダー（サイト名 49.6px/900・キャッチ 28.8px/700）に近い大きさ */
.hero{--ph:url(img/hero.jpg);position:relative;overflow:hidden;background:linear-gradient(120deg,var(--b) 0%,var(--m) 100%);color:#fff;border-radius:32px;padding:56px 44px;min-height:340px;display:flex;flex-direction:column;justify-content:center;margin:0 0 32px;box-shadow:0 10px 30px #1e5aa833}
.hero h1,.hero .lead{position:relative;z-index:2;max-width:50%}
/* トップの見出しは「目的と予算で／オンラインスクールを比べる」の2行に収める */
.h1top span{white-space:nowrap}
.h1top{font-size:clamp(1.3rem,3.4vw,2.5rem)}
/* 飾りの丸と、角を丸く切った写真 */
.hero::before{content:"";position:absolute;right:-70px;top:-70px;width:280px;height:280px;border-radius:50%;background:#ffffff26}
.hero::after{content:"";position:absolute;z-index:1;right:56px;top:50%;transform:translateY(-50%);width:38%;max-width:400px;aspect-ratio:3/2;border-radius:140px 140px 140px 30px;background:var(--ph) center/cover;border:8px solid #fff;box-shadow:0 14px 30px #0e1b2e40}
h1{font-size:clamp(1.6rem,4.2vw,2.8rem);font-weight:900;line-height:1.3;margin:0;text-shadow:0 2px 6px #0005}
.hero .lead{font-size:clamp(1rem,2.4vw,1.8rem);font-weight:700;line-height:1.5;color:#fff;margin:18px 0 0;text-shadow:0 2px 6px #0005}
.lead{color:var(--muted)}

.genres{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:0 0 28px}
.gt{position:relative;display:block;height:150px;border-radius:22px;overflow:hidden;box-shadow:var(--shadow);text-decoration:none;background:#fff;transition:transform .15s}
.gt i{position:absolute;inset:0 0 42px;background:center/cover}
.gt:hover{transform:translateY(-3px)}
.gt span{position:absolute;left:0;right:0;bottom:0;height:42px;line-height:42px;text-align:center;color:#fff;font-weight:900;background:var(--gc,var(--m))}
.points{background:#fff;border-radius:20px;box-shadow:var(--shadow);padding:22px 28px 22px 52px;margin:0 0 28px}
.points li{margin:6px 0}

.filters{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));margin:0 0 20px;padding:24px;background:#fff;border-radius:28px;box-shadow:0 6px 22px #0e1b2e1a}
.filters fieldset{margin:0;padding:12px 16px 14px;border:1px solid var(--line);border-radius:14px}
.filters legend{padding:0 10px;font-weight:900;color:#fff;background:var(--n);border-radius:99px;font-size:.85rem}
.filters label{display:inline-block;margin:4px 14px 4px 0;font-size:.95rem}
.filters input[type=checkbox]{margin-right:6px;accent-color:var(--m);width:16px;height:16px;vertical-align:-2px}
.filters select{width:100%;margin:4px 0;padding:9px 10px;font-size:.95rem;color:var(--i);background:#fff;border:1px solid #b9c8da;border-radius:10px}
.count{margin:0 0 16px;font-size:1.1rem;font-weight:900;color:var(--n)}
.count small{display:block;margin-top:2px;font-size:.82rem;font-weight:400;color:var(--muted)}

.cards{list-style:none;padding:0;margin:0 0 36px;display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.card[hidden]{display:none}
.card{display:flex}
.card a{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:26px 22px 22px;background:#fff;color:var(--i);text-decoration:none}
.card strong{font-size:1.15rem;line-height:1.4;color:var(--n)}
.card .g{font-size:.78rem;font-weight:700;color:#fff;background:var(--m);border-radius:99px;padding:1px 12px}
.card .course{font-size:.88rem;line-height:1.5;color:var(--muted)}
.card .price{font-size:1.9rem;font-weight:900;line-height:1.2;color:var(--b);margin-top:6px}
.card .months{font-size:.9rem;font-weight:700;color:var(--muted)}
.card .purpose{margin-top:auto;padding-top:8px;font-size:.82rem;color:var(--muted)}
.tag{display:inline-block;font-size:.78rem;font-weight:700;border:1px solid var(--m);color:#0b7f75;border-radius:99px;padding:1px 12px}
.net{font-size:.85rem;line-height:1.55;color:var(--i)}

/* 写真（Pexels・出典は school/photo_credits.json）。トップの帯は hero.jpg、ジャンルとスクールのページはそのジャンルの写真 */
.hero[data-g="douga"]{--ph:url(img/douga.jpg)}.gt[data-g="douga"] i,.card[data-genre="douga"] a::before{background-image:url(img/douga.jpg)}
.hero[data-g="web-design"]{--ph:url(img/web-design.jpg)}.gt[data-g="web-design"] i,.card[data-genre="web-design"] a::before{background-image:url(img/web-design.jpg)}
.hero[data-g="programming"]{--ph:url(img/programming.jpg)}.gt[data-g="programming"] i,.card[data-genre="programming"] a::before{background-image:url(img/programming.jpg)}
.hero[data-g="ai-data"]{--ph:url(img/ai-data.jpg)}.gt[data-g="ai-data"] i,.card[data-genre="ai-data"] a::before{background-image:url(img/ai-data.jpg)}
.hero[data-g="marketing"]{--ph:url(img/marketing.jpg)}.gt[data-g="marketing"] i,.card[data-genre="marketing"] a::before{background-image:url(img/marketing.jpg)}
.hero[data-g="gogaku"]{--ph:url(img/gogaku.jpg)}.gt[data-g="gogaku"] i,.card[data-genre="gogaku"] a::before{background-image:url(img/gogaku.jpg)}
.hero[data-g="shikaku"]{--ph:url(img/shikaku.jpg)}.gt[data-g="shikaku"] i,.card[data-genre="shikaku"] a::before{background-image:url(img/shikaku.jpg)}
.hero[data-g="sonota"]{--ph:url(img/sonota.jpg)}.gt[data-g="sonota"] i,.card[data-genre="sonota"] a::before{background-image:url(img/sonota.jpg)}
/* ジャンルの色（タイルの帯・カードの札と下の影） */
.gt[data-g="douga"],.card[data-genre="douga"]{--gc:#FF6B6B}
.gt[data-g="web-design"],.card[data-genre="web-design"]{--gc:#FF9F43}
.gt[data-g="programming"],.card[data-genre="programming"]{--gc:#5B6CFF}
.gt[data-g="ai-data"],.card[data-genre="ai-data"]{--gc:#00B3D6}
.gt[data-g="marketing"],.card[data-genre="marketing"]{--gc:#FF5FA2}
.gt[data-g="gogaku"],.card[data-genre="gogaku"]{--gc:#22C55E}
.gt[data-g="shikaku"],.card[data-genre="shikaku"]{--gc:#A855F7}
.gt[data-g="sonota"],.card[data-genre="sonota"]{--gc:#F5A524}
.card .g{background:var(--gc,var(--m))}
.card a{padding-top:0;overflow:hidden;border-radius:24px;box-shadow:0 6px 0 var(--gc,var(--m)),var(--shadow);transition:transform .15s,box-shadow .15s}
.card a:hover{transform:translateY(-3px);box-shadow:0 9px 0 var(--gc,var(--m)),0 10px 26px #0e1b2e26}
.card a::before{content:"";align-self:stretch;height:130px;margin:0 -22px 12px;background:center/cover #dfe7f1}
.logo{display:flex;align-items:center;gap:10px}
.logo img{width:40px;height:40px;border-radius:50%;background:#fff;padding:2px}

/* スクールのロゴ（data/logos.json に載せた社だけ） */
.card .slogo{display:block;height:30px;width:auto;max-width:150px;object-fit:contain;margin:2px 0 2px}
.hero .hlogo{position:relative;z-index:2;align-self:flex-start;height:56px;width:auto;max-width:240px;object-fit:contain;background:#fff;border-radius:14px;padding:8px 14px;margin:0 0 18px;box-shadow:0 4px 12px #0e1b2e26}

/* 学校ページ */
section.course{background:#fff;border-radius:20px;box-shadow:var(--shadow);padding:28px 32px;margin:0 0 24px}
section.course h2{margin:0 0 18px;padding:14px 20px;background:var(--n);color:#fff;border-radius:14px;font-size:1.25rem}
section.course h3{margin:26px 0 8px;padding-left:14px;border-left:8px solid var(--m);font-size:1.05rem}
table.price{border-collapse:collapse;width:100%}
table.price th,table.price td{border:1px solid var(--line);padding:10px 14px;text-align:left}
table.price th{background:#eef3f9;width:42%;font-weight:700}
table.price strong{font-size:1.3rem;color:var(--b)}
.btn{display:inline-block;margin:8px 0 0;padding:16px 36px;background:var(--y);color:var(--i);font-weight:900;border-radius:99px;text-decoration:none;box-shadow:var(--shadow)}
.btn:hover{filter:brightness(.96)}
.src{font-size:.82rem;color:var(--muted)}

/* 運営者の枠 */
.operator{margin:40px 0 0;padding:28px 32px;background:#fff;border-radius:20px;box-shadow:var(--shadow);border-left:8px solid var(--m)}
.operator h2{margin:0 0 12px;font-size:1.25rem;color:var(--n)}
.operator p{margin:0 0 10px}

.ft{background:var(--i);color:#fff;border-radius:30px 30px 0 0;padding:28px 24px;font-size:.88rem}
.ft p{max-width:1048px;margin:6px auto}
.ft a{color:#8FC3F5}

@media(max-width:600px){
  .hd{padding:12px 14px;gap:8px}.logo{font-size:1.05rem;white-space:nowrap}.hd nav{white-space:nowrap}.hd nav a{margin-left:10px;font-size:.85rem}
  main{padding:20px 12px 40px}
  .hero{padding:30px 20px 26px;min-height:0;border-radius:24px}
  .hero h1,.hero .lead{max-width:none}
  .h1top{font-size:6vw}
  .hero::after{position:relative;top:auto;right:auto;transform:none;align-self:center;margin:22px 0 0;width:86%;max-width:320px;border-width:6px}
  .hero::before{width:200px;height:200px;right:-60px;top:-60px}
  .genres{grid-template-columns:repeat(2,1fr);gap:10px}.gt{height:120px}.gt i{bottom:36px}.gt span{height:36px;line-height:36px;font-size:.88rem;white-space:nowrap}
  .card a::before{height:110px;margin:0 -18px 10px}
  .logo img{width:32px;height:32px}
  .filters{padding:16px;gap:12px}
  .cards{grid-template-columns:1fr;gap:16px}
  .card a{padding:18px}
  section.course{padding:20px 16px}
  table.price th{width:46%}
  .operator{padding:22px 20px}
  .points{padding:18px 18px 18px 40px}
}