@charset "utf-8";
/* パソコン教室えらびガイド（2026-11 作り直し）
   型の出どころ：検索上位の パソコン教室ナビ・コエテコ・オトコロ（2026-11-07 に画面で確認）
   - 明るい青を地色の主役に、申し込み・公式への導線だけオレンジ
   - 冒頭に「探す」導線、表と図を多く
   書体：BIZ UDPゴシック（読みやすさを重視した UD 書体。読者の中心が 45〜64 歳のため） */

:root{
  --blue:#1561c2;
  --blue-d:#0b3f86;
  --sky:#e9f3fc;
  --sky-2:#f5f9fe;
  --line:#d3e1f0;
  --ink:#1f2328;
  --mute:#59626d;
  --orange:#e9570a;
  --orange-d:#c74606;
  --mark:#ffef9e;
  --self:#fff6dc;
  --ok:#137a4a;
  --readw:760px;
  --maxw:1120px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:#fff;color:var(--ink);
  font-family:"BIZ UDPGothic","Hiragino Kaku Gothic ProN","Noto Sans JP",Meiryo,sans-serif;
  font-size:17px;line-height:1.9;letter-spacing:.02em;
  font-feature-settings:"palt" 0;
}
img{max-width:100%;height:auto}
a{color:var(--blue);text-underline-offset:.22em}
a:hover{color:var(--blue-d)}
:focus-visible{outline:3px solid #f5a623;outline-offset:2px;border-radius:2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- ヘッダー ---------- */
.g-head{background:#fff;border-bottom:1px solid var(--line)}
.g-head__in{max-width:var(--maxw);margin:0 auto;padding:12px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.g-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.g-brand__mark{width:38px;height:38px;flex:none}
.g-brand__name{display:block;font-weight:700;font-size:19px;line-height:1.3;color:var(--blue-d)}
.g-brand__tag{display:block;font-size:12px;color:var(--mute);line-height:1.4}
.g-head__op{font-size:12px;color:var(--mute);text-align:right;line-height:1.5}
.g-head__op a{color:var(--mute)}
.g-nav{background:var(--blue)}
.g-nav ul{max-width:var(--maxw);margin:0 auto;padding:0 12px;list-style:none;display:flex;overflow-x:auto;scrollbar-width:none}
.g-nav ul::-webkit-scrollbar{display:none}
.g-nav a{display:block;padding:11px 14px;color:#fff;text-decoration:none;font-weight:700;font-size:15px;white-space:nowrap}
.g-nav a:hover,.g-nav a[aria-current]{background:var(--blue-d);color:#fff}
@media (max-width:640px){
  .g-head__op{display:none}
  .g-brand__name{font-size:17px}
  .g-nav a{padding:10px 12px;font-size:14px}
}

/* ---------- パンくず ---------- */
.g-crumb{max-width:var(--readw);margin:0 auto;padding:14px 20px 0;font-size:12.5px;color:var(--mute);line-height:1.6}
.g-crumb a{color:var(--mute)}
.g-crumb span{margin:0 .4em}

/* ---------- 記事 ---------- */
.g-article{max-width:var(--readw);margin:0 auto;padding:6px 20px 40px}
.g-cat{display:inline-block;background:var(--blue);color:#fff;font-size:12.5px;font-weight:700;padding:2px 10px;border-radius:3px;text-decoration:none;margin:14px 0 10px}
.g-cat:hover{color:#fff;background:var(--blue-d)}
.g-article h1{font-size:clamp(23px,4.4vw,30px);line-height:1.5;font-weight:700;margin:0 0 14px;letter-spacing:.01em}
.g-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;font-size:13px;color:var(--mute);margin:0 0 18px}
.g-meta img{width:34px;height:34px;border-radius:50%;object-fit:cover}
.g-meta__who{display:flex;align-items:center;gap:8px;color:var(--ink)}
.g-pr{display:block;width:100%;font-size:12px;color:var(--mute);border:1px solid var(--line);background:var(--sky-2);padding:6px 10px;border-radius:4px;line-height:1.7}

/* 要点（AIの概要・検索の抜粋に使われやすい「先に答え」） */
.g-point{border:2px solid var(--blue);border-radius:8px;margin:0 0 26px;overflow:hidden}
.g-point__t{background:var(--blue);color:#fff;font-weight:700;font-size:15px;padding:7px 16px;margin:0}
.g-point__b{padding:14px 18px 6px;background:#fff}
.g-point__b p{margin:0 0 10px;font-size:16.5px;line-height:1.85}
.g-point__b ul{margin:0 0 10px;padding-left:1.2em}
.g-point__b li{margin:4px 0;line-height:1.8}

.g-article h2{
  font-size:clamp(20px,3.6vw,24px);line-height:1.5;font-weight:700;
  margin:56px 0 18px;padding:12px 16px;background:var(--sky);
  border-left:6px solid var(--blue);border-radius:0 6px 6px 0;
}
.g-article h3{font-size:19px;line-height:1.6;margin:34px 0 12px;padding:0 0 6px;border-bottom:2px solid var(--line)}
.g-article p{margin:0 0 1.25em}
.g-article ul,.g-article ol{padding-left:1.4em;margin:0 0 1.4em}
.g-article li{margin:6px 0}
.g-article p strong,.g-article li strong{background:linear-gradient(transparent 60%,var(--mark) 60%);font-weight:700}
.g-lead{font-size:18px}
.g-sub{display:block;font-size:13px;color:var(--mute);line-height:1.6;margin-top:3px}

/* 目次 */
.g-toc{background:var(--sky-2);border:1px solid var(--line);border-radius:8px;padding:14px 18px 8px;margin:0 0 28px}
.g-toc__t{font-weight:700;margin:0 0 6px;color:var(--blue-d)}
.g-toc ol{margin:0 0 8px;padding-left:1.5em}
.g-toc li{margin:5px 0;line-height:1.6;font-size:15.5px}
.g-toc a{color:var(--ink);text-decoration:none}
.g-toc a:hover{color:var(--blue);text-decoration:underline}

/* 写真 */
.g-eyecatch{margin:0 0 22px;border-radius:8px;overflow:hidden;background:var(--sky)}
.g-eyecatch img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.g-eyecatch__cr{font-size:11.5px;color:var(--mute);padding:4px 8px;margin:0}
.g-ph{margin:6px 0 28px}
.g-ph img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:8px;background:var(--sky)}
.g-ph figcaption{font-size:13px;color:var(--mute);margin:7px 0 0;line-height:1.7}

/* 囲み */
.g-box{border:1px solid var(--line);border-radius:8px;padding:16px 18px 6px;margin:0 0 26px;background:#fff}
.g-box__t{font-weight:700;color:var(--blue-d);margin:0 0 8px}
.g-quote{margin:0 0 1.4em;padding:12px 16px;border-left:4px solid var(--line);background:var(--sky-2);color:#33393f;font-size:16px}
.g-quote cite{display:block;margin-top:6px;font-size:12.5px;font-style:normal;color:var(--mute)}
.g-src{font-size:13px;color:var(--mute);margin:-.6em 0 2em;line-height:1.8}
.g-src a{color:var(--mute)}
.g-note{font-size:13.5px;color:var(--mute);line-height:1.8;margin:8px 0 26px}
.g-note span{display:block}
.g-alert{margin:20px 0 24px;padding:14px 16px;background:#fff8ec;border:1px solid #f3d7ae;border-left:5px solid var(--orange);border-radius:4px}
.g-alert__t{margin:0 0 4px;font-size:13px;font-weight:700;color:var(--orange-d)}
.g-alert p{margin:0;font-size:15px}

/* ---------- 表 ---------- */
.g-tw{overflow-x:auto;margin:0 0 6px;-webkit-overflow-scrolling:touch}
.g-tcap{font-weight:700;font-size:15px;margin:0 0 8px;color:var(--blue-d)}
table.g-t{width:100%;border-collapse:collapse;font-size:15.5px;line-height:1.6;background:#fff;border:1px solid var(--line)}
table.g-t thead th{background:var(--blue);color:#fff;font-weight:700;font-size:14px;padding:9px 10px;text-align:left;border:1px solid #2c74cf;white-space:nowrap}
table.g-t th,table.g-t td{padding:11px 10px;border:1px solid var(--line);vertical-align:top;text-align:left}
table.g-t tbody th{background:var(--sky-2);font-weight:700}
table.g-t .num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
table.g-t td.is-min{font-weight:700;background:#fff9cf}
table.g-t tr.is-self th,table.g-t tr.is-self td{background:var(--self)}
table.g-t tr.is-self td.is-min{background:#ffeea0}
table.g-t tr.is-self th::after{content:"当サイト運営";display:inline-block;margin-left:6px;font-size:11px;font-weight:700;color:#8a5a00;border:1px solid #e3c06a;background:#fff;border-radius:3px;padding:0 5px;vertical-align:2px;white-space:nowrap}
table.g-t tr.is-focus th,table.g-t tr.is-focus td{font-weight:700}
@media (max-width:640px){
  table.g-t{font-size:14.5px}
  table.g-t th,table.g-t td{padding:9px 7px}
}
.g-tw--raw{border-left:4px solid var(--line);background:var(--sky-2);padding:6px 12px 8px;border-radius:0 6px 6px 0}
.g-tw--raw::before{content:attr(data-label);display:block;font-size:12.5px;color:var(--mute);padding:6px 0}
.g-tw--raw table.g-t{border:0;background:transparent}
.g-tw--raw table.g-t th,.g-tw--raw table.g-t td{border:0;border-bottom:1px dotted var(--line);background:transparent}
.g-tw--raw table.g-t thead th{background:transparent;color:var(--mute)}

/* ---------- 図（SVG） ---------- */
.g-fig{margin:28px 0;padding:18px 16px 14px;background:var(--sky-2);border:1px solid var(--line);border-radius:8px}
.g-fig__t{margin:0 0 4px;font-size:15px;font-weight:700;color:var(--blue-d)}
.g-fig__lead{margin:0 0 14px;font-size:15px;line-height:1.8}
.g-fig svg{display:block;width:100%;height:auto}
.g-fig__n{margin:12px 0 0;font-size:12.5px;line-height:1.8;color:var(--mute)}
.g-fig__n::before{content:"※ "}
.g-fig .f-ax{stroke:#b9c9db;stroke-width:1}
.g-fig .f-gr{stroke:#e1eaf4;stroke-width:1}
.g-fig .f-lb{fill:var(--mute);font-size:14px;font-family:inherit}
.g-fig .f-lb-s{fill:var(--mute);font-size:12.5px;font-family:inherit}
.g-fig .f-val{fill:var(--ink);font-size:14px;font-weight:700;font-family:inherit}
.g-fig .f-bar{fill:#9fb6cf}
.g-fig .f-bar-self{fill:var(--orange)}
.g-fig .f-bar-focus{fill:var(--blue)}
.g-fig .f-line{fill:none;stroke:#9fb6cf;stroke-width:2}
.g-fig .f-line-self{fill:none;stroke:var(--orange);stroke-width:3}
.g-fig .f-line-focus{fill:none;stroke:var(--blue);stroke-width:2.5;stroke-dasharray:5 3}
.g-fig .f-dot{fill:#fff;stroke-width:2}
.g-fig .f-cross{stroke:#c0392b;stroke-width:1;stroke-dasharray:3 3}
.g-fig .f-cross-t{fill:#c0392b;font-size:12.5px;font-weight:700;font-family:inherit}
.g-fig__lg{display:flex;flex-wrap:wrap;gap:14px;margin:10px 0 0}
.g-fig__lg span{display:inline-flex;align-items:center;font-size:12px;color:var(--mute)}
.g-fig__lg i{width:14px;height:4px;margin-right:6px;border-radius:2px;background:#9fb6cf}
.g-fig__lg i.is-self{background:var(--orange)}
.g-fig__lg i.is-focus{background:var(--blue)}
/* スマホ：文字を拡大すると左の見出しが重なる（旧デザインから続いていた不具合）。
   図は最小幅を持たせて横にスクロールさせ、文字は縮めない */
@media (max-width:640px){
  .g-fig{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .g-fig:has(.f-bar) svg,.g-fig:has(.f-bar-self) svg{min-width:600px}
}

/* ---------- 料金ものさし（安い順の棒。このサイトの看板） ---------- */
.g-rank{margin:6px 0 10px;border:2px solid var(--blue);border-radius:8px;overflow:hidden}
.g-rank__h{background:var(--blue);color:#fff;padding:8px 14px;font-weight:700;font-size:15px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px}
.g-rank__h small{font-weight:400;font-size:12.5px;opacity:.95}
.g-rank ol{list-style:none;margin:0;padding:6px 14px 10px}
.g-rank li{display:grid;grid-template-columns:1.6em 1fr auto;gap:4px 10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.g-rank li:last-child{border-bottom:0}
.g-rank__no{font-weight:700;color:var(--blue-d);font-size:18px;text-align:center}
.g-rank__name{font-weight:700;line-height:1.5}
.g-rank__name small{display:block;font-weight:400;font-size:12.5px;color:var(--mute)}
.g-rank__yen{font-weight:700;font-size:20px;white-space:nowrap;font-variant-numeric:tabular-nums}
.g-rank__bar{grid-column:2/4;height:10px;background:var(--sky);border-radius:5px;overflow:hidden}
.g-rank__bar i{display:block;height:100%;background:#7fa3cc;border-radius:5px}
.g-rank li.is-self{background:var(--self);margin:0 -14px;padding:10px 14px}
.g-rank li.is-self .g-rank__bar i{background:var(--orange)}
.g-rank li.is-self .g-rank__name::after{content:"当サイト運営";margin-left:6px;font-size:11px;color:#8a5a00;border:1px solid #e3c06a;background:#fff;border-radius:3px;padding:0 5px;vertical-align:2px;font-weight:700}
.g-rank li.is-na .g-rank__yen{font-size:14px;color:var(--mute);font-weight:400}
.g-rank__yen{text-align:right}
.g-rank__per{font-size:13px;margin-right:2px;font-weight:700}
.g-rank__yen small{display:block;font-size:12px;font-weight:400;color:var(--mute);white-space:nowrap}

/* 目的別の早見表 */
.g-pick{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:0 0 26px}
.g-pick a{display:block;border:1px solid var(--line);border-radius:8px;padding:10px 12px;text-decoration:none;color:var(--ink);background:#fff}
.g-pick a:hover{border-color:var(--blue);background:var(--sky-2)}
.g-pick b{display:block;color:var(--blue-d);font-size:14px}
.g-pick span{display:block;font-weight:700;line-height:1.5;margin-top:2px}
.g-pick em{display:block;font-style:normal;font-size:12.5px;color:var(--mute);line-height:1.5;margin-top:2px}
@media (max-width:480px){.g-pick{grid-template-columns:1fr}}

/* 教室カード */
.g-sc{border:1px solid var(--line);border-radius:10px;margin:0 0 22px;overflow:hidden;background:#fff}
.g-sc.is-self{border:2px solid #e3c06a}
.g-sc__h{background:var(--sky);padding:12px 16px}
.g-sc.is-self .g-sc__h{background:var(--self)}
.g-sc__h h3{margin:0;padding:0;border:0;font-size:19px}
.g-sc__op{display:inline-block;margin-left:6px;font-size:11px;color:#8a5a00;border:1px solid #e3c06a;background:#fff;border-radius:3px;padding:0 5px;vertical-align:3px}
.g-sc__tags{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 0;padding:0;list-style:none}
.g-sc__tags li{margin:0;font-size:12px;background:#fff;border:1px solid var(--line);color:var(--blue-d);border-radius:99px;padding:1px 9px}
.g-sc dl{margin:0;padding:6px 16px;display:grid;grid-template-columns:7.5em 1fr;font-size:15px;line-height:1.7}
.g-sc dt{color:var(--mute);padding:7px 0;border-bottom:1px dotted var(--line)}
.g-sc dd{margin:0;padding:7px 0;border-bottom:1px dotted var(--line)}
.g-sc__v{padding:10px 16px 14px}
.g-sc__v p{margin:0 0 8px;font-size:15.5px;line-height:1.85}
.g-sc__v b{color:var(--blue-d)}
.g-sc__f{padding:0 16px 14px;font-size:13px;color:var(--mute)}
@media (max-width:480px){.g-sc dl{grid-template-columns:6em 1fr;font-size:14.5px}}

/* よくある質問 */
.g-faq{margin:0 0 26px}
.g-faq details{border:1px solid var(--line);border-radius:8px;margin:0 0 10px;background:#fff}
.g-faq summary{cursor:pointer;font-weight:700;padding:12px 40px 12px 16px;position:relative;list-style:none;line-height:1.6}
.g-faq summary::-webkit-details-marker{display:none}
.g-faq summary::before{content:"Q";color:var(--blue);margin-right:8px}
.g-faq summary::after{content:"＋";position:absolute;right:14px;top:12px;color:var(--blue)}
.g-faq details[open] summary::after{content:"－"}
.g-faq details>div{padding:0 16px 12px 16px;border-top:1px dotted var(--line)}
.g-faq details>div p{margin:10px 0 0;font-size:16px}

/* ---------- 運営者からのお知らせ・教室の案内（ピアの宣伝はここにまとめる） ---------- */
.g-camp{border:1px solid #f3d7ae;border-left:5px solid var(--orange);background:#fff8ec;padding:14px 18px;margin:0 0 28px;border-radius:0 6px 6px 0}
.g-camp__t{margin:0 0 6px;font-size:13px;font-weight:700;color:var(--orange-d)}
.g-camp p{margin:0;font-size:15.5px;line-height:1.85}
.g-camp__hi{font-weight:700;color:#b23a00}
.g-camp .g-camp__c{display:block;margin-top:8px;font-size:13px;color:var(--mute)}
.g-cta{margin:46px 0 28px;border:2px solid #e3c06a;border-radius:10px;background:#fffbef;padding:20px 20px 18px}
.g-cta::before{content:"運営者の教室のご案内";display:block;font-size:12px;color:#8a5a00;margin:0 0 6px}
.g-cta h2{margin:0 0 10px;padding:0;background:none;border:0;font-size:21px;color:var(--ink)}
.g-cta h3{margin:16px 0 8px;font-size:17px;border:0;padding:0;color:var(--orange-d)}
.g-cta__ph{display:block;width:100%;height:auto;margin:10px 0 14px;border-radius:6px}
.g-cta__camp{background:#fff;border:1px dashed #f0b27a;border-radius:6px;padding:4px 14px 2px;margin:14px 0}
.g-cta ul{margin:0 0 12px}
.g-cta--min{background:#fff;border:1px solid var(--line)}
.g-cta--min::before{content:none}
.g-btn{display:block;text-align:center;background:var(--orange);color:#fff!important;font-weight:700;font-size:17px;text-decoration:none;border-radius:999px;padding:14px 18px;box-shadow:0 3px 0 var(--orange-d);margin:8px 0 4px}
.g-btn:hover{background:var(--orange-d)}
.g-btn--sub{background:#fff;color:var(--blue)!important;border:2px solid var(--blue);box-shadow:none}
.g-btn--sub:hover{background:var(--sky)}
.g-btn--sm{display:inline-block;font-size:14px;padding:8px 16px}
.g-tel{font-weight:700;margin:10px 0 0;text-align:center}
.g-tel a{color:var(--ink)}
.g-cta__sub{font-size:12.5px;color:var(--mute);margin:4px 0 0;text-align:center}
.g-disclosure{border:1px solid var(--line);border-radius:8px;padding:12px 16px;margin:0 0 24px;background:var(--sky-2);font-size:14px}
.g-disclosure__t{font-weight:700;margin:0 0 4px;font-size:13px;color:var(--mute)}
.g-disclosure p{margin:0}

/* 著者 */
.g-author{display:flex;gap:14px;align-items:flex-start;border-top:1px solid var(--line);padding:20px 0 0;margin:28px 0 24px}
.g-author img{width:64px;height:64px;border-radius:50%;object-fit:cover;flex:none}
.g-author p{margin:0 0 6px;font-size:14.5px;line-height:1.8}
.g-author__n{font-weight:700;font-size:16px!important;margin:0!important}
.g-author__r{color:var(--mute);font-size:12.5px!important}

/* 出典・関連 */
.g-rel{border:1px solid var(--line);border-radius:8px;padding:14px 18px 6px;margin:0 0 24px;font-size:14.5px}
.g-rel h2{margin:0 0 8px;padding:0;background:none;border:0;font-size:16px}
.g-rel ul{margin:0 0 12px}

/* 関連記事（カード） */
.g-more{max-width:var(--readw);margin:0 auto;padding:0 20px 40px}
.g-more h2{font-size:19px;margin:0 0 12px;padding:0 0 6px;border-bottom:3px solid var(--blue)}
.g-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin:0;padding:0;list-style:none}
.g-card{display:flex;flex-direction:column;height:100%;text-decoration:none;color:var(--ink);border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#fff}
.g-card:hover{border-color:var(--blue)}
.g-card img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--sky)}
.g-card__b{display:block;padding:10px 12px 12px}
.g-card__t{display:block;font-weight:700;line-height:1.55;font-size:15.5px;margin:0 0 6px}
.g-card__m{display:block;font-size:12px;color:var(--mute);margin:0}
.g-card__c{display:inline-block;background:var(--sky);color:var(--blue-d);font-weight:700;border-radius:3px;padding:0 6px;margin-right:6px}

/* ---------- トップ ---------- */
.g-hero{background:linear-gradient(180deg,var(--sky) 0,#fff 100%);border-bottom:1px solid var(--line)}
.g-hero__in{max-width:var(--maxw);margin:0 auto;padding:30px 20px 30px;display:grid;grid-template-columns:1.05fr 1fr;gap:28px;align-items:center}
.g-hero h1{font-size:clamp(25px,4.6vw,38px);line-height:1.4;margin:0 0 10px;color:var(--blue-d)}
.g-hero__lead{margin:0 0 6px;font-size:16.5px}
.g-hero__note{font-size:12.5px;color:var(--mute);margin:8px 0 0}
.g-find{background:#fff;border:3px solid var(--blue);border-radius:12px;padding:16px 18px 18px;box-shadow:0 6px 0 rgba(21,97,194,.12)}
.g-find__t{font-weight:700;font-size:18px;margin:0 0 10px;color:var(--blue-d)}
.g-find label{display:block;font-size:13px;color:var(--mute);margin:0 0 4px}
.g-find select{width:100%;font:inherit;font-size:17px;padding:10px 12px;border:2px solid var(--line);border-radius:8px;background:#fff;margin:0 0 10px}
.g-find__btn{width:100%;border:0;cursor:pointer;font:inherit}
.g-find__chips{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0}
.g-find__chips a{font-size:13.5px;border:1px solid var(--line);border-radius:99px;padding:3px 11px;text-decoration:none;background:var(--sky-2)}
@media (max-width:820px){.g-hero__in{grid-template-columns:1fr;gap:16px;padding:22px 16px 24px}}

.g-home{max-width:var(--maxw);margin:0 auto;padding:10px 20px 40px}
.g-shelf{margin:34px 0 0}
.g-shelf__h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;border-bottom:3px solid var(--blue);margin:0 0 14px;padding:0 0 6px}
.g-shelf__h h2{margin:0;font-size:22px}
.g-shelf__h p{margin:0;font-size:13px;color:var(--mute)}
.g-tools{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.g-tool{display:grid;grid-template-columns:56px 1fr;gap:12px;align-items:center;text-decoration:none;color:var(--ink);border:2px solid var(--line);border-radius:10px;padding:14px;background:#fff}
.g-tool:hover{border-color:var(--orange)}
.g-tool svg{width:56px;height:56px}
.g-tool>span{display:block}
.g-tool b{display:block;font-size:17px;line-height:1.4;color:var(--ink)}
.g-tool>span>span{display:block;font-size:13.5px;color:var(--mute);line-height:1.6;margin-top:2px}
.g-areas{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.g-areas a{display:block;border:1px solid var(--line);border-radius:8px;padding:8px 14px;text-decoration:none;font-weight:700;background:#fff}
.g-areas a small{display:block;font-weight:400;color:var(--mute);font-size:12px}
.g-areas a:hover{border-color:var(--blue);background:var(--sky-2)}
.g-about{margin:40px 0 0;border:1px solid var(--line);border-radius:10px;padding:16px 20px;background:var(--sky-2);font-size:14.5px}
.g-about h2{font-size:17px;margin:0 0 6px}
.g-about p{margin:0 0 8px}

/* ---------- ツール ---------- */
.g-toolbox{border:2px solid var(--blue);border-radius:10px;padding:16px 16px 18px;margin:0 0 26px;background:#fff}
.g-q{border-bottom:1px dotted var(--line);padding:12px 0}
.g-q:last-of-type{border-bottom:0}
.g-q__t{font-weight:700;margin:0 0 8px;line-height:1.6}
.g-q__o{display:flex;flex-wrap:wrap;gap:8px}
.g-q__o label{display:inline-flex;align-items:center;gap:6px;border:2px solid var(--line);border-radius:8px;padding:7px 12px;cursor:pointer;font-size:15.5px;background:#fff}
.g-q__o input{accent-color:var(--blue);width:18px;height:18px}
.g-q__o label:has(input:checked){border-color:var(--blue);background:var(--sky)}
.g-field{margin:0 0 12px}
.g-field label{display:block;font-weight:700;margin:0 0 4px}
.g-field select{width:100%;font:inherit;padding:9px 10px;border:2px solid var(--line);border-radius:8px;background:#fff}
.g-result{border:2px solid var(--orange);border-radius:10px;padding:16px 18px;margin:18px 0;background:#fffaf4}
.g-result[hidden]{display:none}
.g-result__t{font-size:20px;font-weight:700;margin:0 0 6px;color:var(--orange-d)}
.g-meter{display:flex;gap:4px;margin:8px 0 12px}
.g-meter i{flex:1;height:10px;border-radius:5px;background:var(--line)}
.g-meter i.on{background:var(--blue)}

/* ---------- フッター ---------- */
.g-foot{background:var(--blue-d);color:#dbe7f6;margin-top:30px}
.g-foot__in{max-width:var(--maxw);margin:0 auto;padding:28px 20px 30px;font-size:13.5px}
.g-foot__cols{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:18px;margin:0 0 20px}
.g-foot b{display:block;color:#fff;margin:0 0 6px}
.g-foot ul{list-style:none;margin:0;padding:0}
.g-foot li{margin:4px 0;line-height:1.6}
.g-foot a{color:#dbe7f6}
.g-foot__addr{border-top:1px solid rgba(255,255,255,.2);padding-top:14px;margin:0;line-height:1.9;font-size:12.5px}

/* 旧デザインの名残（使わないが、移した本文に残っていても崩れないように） */
.g-side,.g-layout,.g-main{display:block}

@media (max-width:480px){
  .g-rank li{grid-template-columns:1.4em 1fr auto;gap:2px 8px}
  .g-rank__yen{font-size:17px}
  .g-rank li.is-na .g-rank__yen{font-size:12.5px;max-width:7em;text-align:right;line-height:1.4;white-space:normal}
  .g-rank__yen small{white-space:normal;line-height:1.4;font-size:11px}
}

/* 教室カードの絞り込み（パソコン教室ナビの「学びたい内容から探す」に相当） */
.g-filter{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 18px;padding:12px 14px;background:var(--sky-2);border:1px solid var(--line);border-radius:8px}
.g-filter__t{width:100%;margin:0 0 2px;font-weight:700;font-size:14px;color:var(--blue-d)}
.g-filter button{font:inherit;font-size:14px;border:1px solid var(--line);background:#fff;color:var(--blue-d);border-radius:99px;padding:4px 12px;cursor:pointer}
.g-filter button.is-on{background:var(--blue);border-color:var(--blue);color:#fff}
.g-sc[hidden]{display:none}
.g-point__b ul{margin-top:2px}
.g-nb{display:inline-block}

/* ===== タイピング練習 ===== */
.pt-lead{font-size:16px}
.pt-badges{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 16px}
.pt-badges span{font-size:12.5px;font-weight:700;color:var(--blue-d);background:var(--sky);border-radius:999px;padding:3px 10px}
.pt{border:2px solid var(--blue);border-radius:12px;background:#f6faff;padding:16px;margin:0 0 24px;position:relative}
.pt.is-miss{animation:ptmiss .18s}
@keyframes ptmiss{0%{box-shadow:0 0 0 0 rgba(220,40,40,.0)}50%{box-shadow:0 0 0 4px rgba(220,40,40,.45)}100%{box-shadow:0 0 0 0 rgba(220,40,40,0)}}
.pt-fs{border:0;margin:0 0 12px;padding:0}
.pt-fs legend{font-weight:700;font-size:14px;color:var(--blue-d);margin-bottom:6px}
.pt-chips{display:flex;flex-wrap:wrap;gap:6px}
.pt-chip input{position:absolute;opacity:0;pointer-events:none}
.pt-chip span{display:inline-block;border:1.5px solid #b9cfe9;background:#fff;border-radius:8px;padding:6px 11px;font-size:14px;cursor:pointer;line-height:1.3}
.pt-chip input:checked+span{background:var(--blue);border-color:var(--blue);color:#fff;font-weight:700}
.pt-chip input:focus-visible+span{outline:3px solid #ffbf47}
.pt-opt{display:inline-flex;gap:6px;align-items:center;font-size:14px;margin:4px 0 12px}
.pt-btn{display:inline-block;border:1.5px solid var(--blue);background:#fff;color:var(--blue-d);border-radius:10px;padding:10px 16px;font-weight:700;font-size:15px;cursor:pointer;text-decoration:none;font-family:inherit}
.pt-btn--main{background:var(--orange);border-color:var(--orange);color:#fff}
.pt-btn--start{display:block;width:100%;font-size:19px;padding:14px}
.pt-btn--start:disabled{opacity:.6;cursor:wait}
.pt-btn--sm{padding:4px 10px;font-size:13px;margin-left:auto}
.pt-btn--x{background:#111;border-color:#111;color:#fff}
.pt-note{font-size:13px;color:var(--mute);margin:8px 0 0}
.pt-bar{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;font-size:14px;color:var(--mute);margin-bottom:8px}
.pt-bar b{color:var(--ink,#1a1a1a);font-size:17px;font-variant-numeric:tabular-nums;margin:0 2px}
.pt-ime{background:#fff3cd;border:1px solid #f0c040;border-radius:8px;padding:8px 12px;font-weight:700;font-size:14px;margin:0 0 8px}
.pt-screen{background:#fff;border-radius:10px;padding:18px 14px 14px;text-align:center;box-shadow:0 1px 0 #dbe7f5}
.pt-kana{font-size:15px;color:#6b7785;margin:0 0 4px;letter-spacing:.04em;word-break:break-all}
.pt-kana .pt-done{color:#c3ccd6}
.pt-text{font-size:28px;font-weight:700;margin:0 0 8px;line-height:1.4;word-break:break-all}
.pt-roma{font-family:ui-monospace,SFMono-Regular,Consolas,"Courier New",monospace;font-size:21px;letter-spacing:.06em;margin:0;word-break:break-all;line-height:1.5}
.pt-roma .pt-done{color:#b8c2cc}
.pt-roma .pt-cur{color:#fff;background:var(--orange);border-radius:3px;padding:0 1px}
.pt--big .pt-text{font-size:40px}.pt--big .pt-roma{font-size:28px}
.pt-finger{text-align:center;font-weight:700;color:var(--blue-d);margin:10px 0 6px;font-size:15px;min-height:1.5em}
.pt-kbwrap{max-width:640px;margin:0 auto}
.pt-kb{display:flex;flex-direction:column;gap:4px;user-select:none}
.pt-kb__r{display:flex;gap:4px}
.pt-kb__r1{padding-left:3.5%}.pt-kb__r2{padding-left:5.5%}
.pt-kb__r4{justify-content:center}
.pt-k{flex:1 1 0;min-width:0;text-align:center;font-size:13px;font-family:ui-monospace,Consolas,monospace;background:#fff;border:1px solid #cfd9e5;border-bottom-width:3px;border-radius:6px;padding:7px 0;color:#455}
.pt-k--w{flex:1.8 1 0;font-family:inherit;font-size:11px}
.pt-k--space{flex:0 0 46%;font-family:inherit;font-size:12px}
.pt-k--home{text-decoration:underline;text-underline-offset:3px}
.pt-k.f0,.pt-k.f9{background:#fdf2f6}.pt-k.f1,.pt-k.f8{background:#f3f2fd}.pt-k.f2,.pt-k.f7{background:#eef7f1}.pt-k.f3,.pt-k.f6{background:#fff8e8}
.pt-k.is-next{background:var(--blue)!important;color:#fff;border-color:var(--blue-d);font-weight:700;transform:translateY(1px)}
.pt-k.is-shift{background:#7fa3cc!important;color:#fff}
.pt-hands{display:block;width:100%;max-width:520px;margin:8px auto 0;height:auto}
.pt-palm,.pt-fing{fill:#e8edf3;stroke:#cdd6e0;stroke-width:1.5}
.pt-fing.is-on{fill:#ffcf3f;stroke:#e0a800}
.pt-mobile{position:fixed;top:0;left:0;width:1px;height:1px;opacity:0;border:0;padding:0}
.pt-result{background:#fff;border-radius:10px;padding:16px}
.pt-res__t{margin:0 0 10px;font-size:20px;border:0;padding:0;background:none}
.pt-res__nums{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.pt-res__nums div{background:var(--sky);border-radius:10px;padding:10px;text-align:center}
.pt-res__nums span{display:block;font-size:12.5px;color:var(--mute)}
.pt-res__nums b{font-size:30px;color:var(--blue-d);font-variant-numeric:tabular-nums}
.pt-res__nums small{font-size:13px;margin-left:2px}
.pt-res__big b{font-size:34px;color:var(--blue-d)}.pt-res__big small{display:block;color:var(--mute)}
.pt-res__rank{font-size:18px;margin:4px 0}
.pt-res__rank b{color:var(--orange)}
.pt-best{display:inline-block;margin-left:8px;font-size:12px;background:var(--orange);color:#fff;border-radius:999px;padding:2px 9px;vertical-align:3px}
.pt-res__h{font-weight:700;color:var(--blue-d);margin:14px 0 4px}
.pt-res__kentei{border-top:1px dashed #cdd6e0;margin-top:10px}
.pt-wk{display:inline-block;border:1px solid #f0b4b4;background:#fff5f5;border-radius:8px;padding:4px 10px;margin:0 6px 6px 0;font-family:ui-monospace,Consolas,monospace;font-weight:700}
.pt-wk small{font-family:inherit;font-weight:400;color:var(--mute);margin-left:4px}
.pt-res__act{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.pt-hist ol{margin:0;padding-left:1.4em;font-size:14px;color:var(--mute)}
.pt-more{border:1px solid var(--line);border-radius:10px;padding:10px 14px;margin:0 0 20px}
.pt-more__t{font-weight:700;margin:0 0 4px}
.pt-more ul{margin:0;padding-left:1.2em;columns:2;column-gap:20px}
.pt-more li{margin:2px 0;break-inside:avoid}
@media (max-width:640px){
  .pt{padding:12px}
  .pt-text{font-size:22px}.pt-roma{font-size:17px}
  .pt--big .pt-text{font-size:30px}.pt--big .pt-roma{font-size:22px}
  .pt-k{font-size:10px;padding:5px 0}
  .pt-res__nums b{font-size:24px}
  .pt-more ul{columns:1}
}
.pt-groups{display:flex;flex-direction:column;gap:6px}
.pt-group{display:flex;gap:8px;align-items:flex-start}
.pt-group__h{flex:0 0 7.2em;font-size:12.5px;font-weight:700;color:var(--blue-d);padding-top:8px}
@media (max-width:640px){.pt-group{flex-direction:column;gap:2px}.pt-group__h{flex:none;padding-top:0}}

/* ===== Excel練習 ===== */
.xp{border:2px solid #1d6f42;border-radius:10px;background:#fff;padding:12px;margin:12px 0 22px;outline:none}
.xp-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.xp-tab{border:1.5px solid #9cc9ae;background:#fff;border-radius:8px;padding:5px 12px;font-weight:700;cursor:pointer;font-family:inherit;color:#1d6f42}
.xp-tab.is-on{background:#1d6f42;color:#fff;border-color:#1d6f42}
.xp-task{background:#f2f8f4;border-radius:8px;padding:8px 12px;margin-bottom:8px;font-size:15px}
.xp-bar{display:flex;align-items:stretch;border:1px solid #c6c6c6;border-radius:4px;overflow:hidden;font-family:ui-monospace,Consolas,monospace}
.xp-name{flex:0 0 64px;padding:6px 8px;border-right:1px solid #c6c6c6;background:#fafafa;font-size:14px}
.xp-fx{flex:0 0 44px;border:0;border-right:1px solid #c6c6c6;background:#fff;cursor:pointer;font-size:15px;color:#555}
.xp-fx i{font-family:Georgia,serif}
.xp-fx:hover{background:#e8f2ec}
.xp-input{flex:1;border:0;padding:6px 8px;font-size:15px;font-family:inherit;min-width:0}
.xp-input:focus{outline:2px solid #1d6f42;outline-offset:-2px}
.xp-gridwrap{overflow-x:auto;margin-top:6px;-webkit-overflow-scrolling:touch}
.xp-grid{border-collapse:collapse;font-size:14px;user-select:none;touch-action:none;min-width:100%}
.xp-grid th{background:#f3f3f3;color:#555;font-weight:400;border:1px solid #d4d4d4;padding:3px 6px;font-size:12px;text-align:center;min-width:28px}
.xp-grid td{border:1px solid #e1e1e1;padding:4px 8px;min-width:76px;height:26px;white-space:nowrap;position:relative;cursor:cell}
.xp-grid td.xp-num{text-align:right;font-variant-numeric:tabular-nums}
.xp-grid td.xp-head{background:#eaf3ee;font-weight:700}
.xp-grid td.xp-target{background:#fffbe6}
.xp-grid td.is-sel{outline:2px solid #1d6f42;outline-offset:-2px;z-index:2}
.xp-grid td.is-ref{background:#dbe9ff!important;outline:1px dashed #2f6fd6;outline-offset:-1px}
.xp-grid td.is-fill{background:#e8f5ec!important;outline:1px dashed #1d6f42;outline-offset:-1px}
.xp-grid td.is-ok{background:#e6f6ea!important}
.xp-grid td.is-ng{background:#fde8e8!important}
.xp-handle{position:absolute;right:-4px;bottom:-4px;width:8px;height:8px;background:#1d6f42;border:1px solid #fff;cursor:crosshair;z-index:3;touch-action:none}
@media (pointer:coarse){.xp-handle{width:16px;height:16px;right:-8px;bottom:-8px}}
.xp-acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.xp-btn{border:1.5px solid #1d6f42;background:#fff;color:#1d6f42;border-radius:8px;padding:7px 14px;font-weight:700;cursor:pointer;font-family:inherit;font-size:14px}
.xp-btn--main{background:#1d6f42;color:#fff}
.xp-fb{margin-top:8px;font-size:15px;min-height:1.4em}
.xp-fb.is-ok{color:#0f6b33}.xp-fb.is-ng{color:#b42318}.xp-fb.is-hint{color:#333;background:#f6f6f6;border-radius:6px;padding:6px 10px}
.xp-fb code,.xp-dlg code,.xp-syntax code{font-family:ui-monospace,Consolas,monospace;background:#f3f3f3;padding:1px 5px;border-radius:4px}
.xp-help{font-size:12.5px;color:var(--mute);margin:8px 0 0;line-height:1.7}
.xp-dlg{border:1px solid #9a9a9a;border-radius:6px;box-shadow:0 6px 24px rgba(0,0,0,.18);background:#fff;margin:8px 0;max-width:560px}
.xp-dlg__h{display:flex;align-items:center;gap:8px;background:#f3f3f3;padding:6px 10px;font-weight:700;font-size:14px;border-bottom:1px solid #ddd}
.xp-dlg__fn{font-family:ui-monospace,Consolas,monospace;font-size:14px}
.xp-dlg__x{margin-left:auto;border:0;background:none;font-size:20px;cursor:pointer;line-height:1}
.xp-dlg__body{padding:8px 12px}
.xp-arg{display:grid;grid-template-columns:7.5em 1fr;gap:2px 8px;align-items:center;margin-bottom:8px}
.xp-arg__n{font-size:13.5px;font-weight:700;text-align:right}
.xp-arg__i{border:1px solid #9a9a9a;border-radius:3px;padding:4px 6px;font-family:ui-monospace,Consolas,monospace;font-size:14px;min-width:0}
.xp-arg__i:focus{outline:2px solid #2f6fd6}
.xp-arg__v{grid-column:2;font-size:12.5px;color:#333;font-family:ui-monospace,Consolas,monospace;min-height:1em}
.xp-arg__d{grid-column:2;font-size:12px;color:var(--mute)}
.xp-dlg__res{padding:4px 12px;font-size:14px;border-top:1px solid #eee}
.xp-dlg__res code{display:block;margin-top:2px;white-space:pre-wrap;word-break:break-all}
.xp-dlg__btns{display:flex;gap:6px;justify-content:flex-end;padding:8px 12px}
.xp-syntax{border-left:4px solid #1d6f42;background:#f2f8f4;padding:10px 14px;border-radius:0 8px 8px 0;margin:10px 0 16px}
.xp-syntax code{font-size:16px;background:#fff}
.xp-dl{display:inline-block;margin:6px 0 14px;background:#1d6f42;color:#fff!important;border-radius:8px;padding:10px 16px;font-weight:700;text-decoration:none}
@media (max-width:640px){.xp-arg{grid-template-columns:1fr}.xp-arg__n{text-align:left}.xp-arg__v,.xp-arg__d{grid-column:1}}

/* ===== タイピング 扉ページ ===== */
.ptd{margin:6px 0 26px}
.ptd-quick{display:flex;flex-direction:column;gap:2px;background:var(--orange);color:#fff!important;text-decoration:none;border-radius:12px;padding:14px 18px;margin-bottom:10px;box-shadow:0 3px 0 #b8430a}
.ptd-quick b{font-size:20px}.ptd-quick span{font-size:13.5px;opacity:.95}
.ptd-best{background:#fff8e1;border:1px solid #f0d27a;border-radius:8px;padding:8px 12px;font-size:14px;margin:0 0 10px}
.ptd-steps{list-style:none;margin:0 0 14px!important;padding:0!important;display:flex;flex-direction:column;gap:10px}
.ptd-step{display:grid;grid-template-columns:76px 64px 1fr 28px;align-items:center;min-height:84px;border-radius:12px;background:#fff;border:1px solid #dfe6ee;text-decoration:none;color:inherit;overflow:hidden;box-shadow:0 2px 0 #e3e9f0;transition:transform .08s}
.ptd-step:hover{transform:translateY(-2px)}
.ptd-step__no{align-self:stretch;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#fff;font-weight:700;font-size:30px;line-height:1;font-family:Georgia,"Times New Roman",serif}
.ptd-step__no small{font-size:12px;letter-spacing:.08em;margin-bottom:3px}
.ptd-step__tag{width:50px;height:50px;border-radius:50%;background:#f4f6f9;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;margin-left:7px}
.ptd-step__body{display:flex;flex-direction:column;gap:3px;padding:10px 6px 10px 4px}
.ptd-step__body b{font-size:19px}
.ptd-step__body span{font-size:13.5px;color:var(--mute);line-height:1.5}
.ptd-step__go{font-size:30px;color:#b6c2cf}
.ptd-s1 .ptd-step__no{background:#f08a00}.ptd-s1 .ptd-step__tag{color:#d57a00}
.ptd-s2 .ptd-step__no{background:#3f9e3a}.ptd-s2 .ptd-step__tag{color:#3f9e3a}
.ptd-s3 .ptd-step__no{background:#1c8fd6}.ptd-s3 .ptd-step__tag{color:#1c8fd6}
.ptd-s4 .ptd-step__no{background:#6a4bc4}.ptd-s4 .ptd-step__tag{color:#6a4bc4}
.ptd-s5 .ptd-step__no{background:#d6407a}.ptd-s5 .ptd-step__tag{color:#d6407a;font-family:ui-monospace,Consolas,monospace}
.ptd-cards{list-style:none;margin:0!important;padding:0!important;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px}
.ptd-card{display:flex;flex-direction:column;gap:3px;height:100%;border:1.5px solid #cfdcec;border-radius:10px;padding:10px 12px;text-decoration:none;color:inherit;background:#fff}
.ptd-card b{color:var(--blue-d);font-size:15.5px}.ptd-card span{font-size:13px;color:var(--mute);line-height:1.5}
.ptd-card:hover{border-color:var(--blue)}
.ptd-k1{border-color:#f3b27f;background:#fff7f0}
.ptd-bm{font-size:13px;color:var(--mute);margin:10px 0 0}
@media (max-width:640px){
  .ptd-step{grid-template-columns:58px 46px 1fr 18px;min-height:76px}
  .ptd-step__no{font-size:24px}.ptd-step__tag{width:38px;height:38px;font-size:12px;margin-left:4px}
  .ptd-step__body b{font-size:16.5px}.ptd-step__body span{font-size:12.5px}
}

/* トップ：すぐ始める（2026-11 学習ガイド化） */
.g-start{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0 4px;padding:0;list-style:none}
.g-start__a{display:block;height:100%;background:#fff;border:2px solid var(--blue);border-radius:10px;padding:12px 12px 10px;text-decoration:none;color:var(--ink);box-shadow:0 4px 0 rgba(21,97,194,.14)}
.g-start__a b{display:block;font-size:17px;color:var(--blue-d)}
.g-start__a span{display:block;font-size:12.5px;color:var(--mute);margin-top:2px}
.g-start__a:hover{background:var(--sky-2)}
.g-start--type{border-color:var(--orange)}.g-start--type b{color:var(--orange-d)}
@media (max-width:520px){.g-start{grid-template-columns:1fr}.g-start__a{display:flex;align-items:baseline;gap:10px}}
.g-skill{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:760px){.g-skill{grid-template-columns:1fr}}
.g-skill__box{border:1px solid var(--line);border-radius:10px;background:#fff;padding:14px 16px}
.g-skill__box h3{margin:0 0 10px;font-size:19px}
.g-skill__box h3 a{text-decoration:none;color:var(--blue-d)}
.g-skill__steps{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.g-skill__steps a{display:flex;gap:10px;align-items:center;padding:8px 10px;border-radius:8px;background:var(--sky-2);text-decoration:none;font-weight:700;color:var(--ink)}
.g-skill__steps a span{font-size:12px;color:#fff;background:var(--blue);border-radius:4px;padding:1px 6px;font-weight:700}
.g-skill__steps a:hover{background:var(--sky)}
.g-skill__fn{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.g-skill__fn a{display:block;padding:8px 10px;border-radius:8px;background:var(--sky-2);text-decoration:none;color:var(--ink);height:100%}
.g-skill__fn a b{display:block;font-family:Consolas,monospace;color:var(--blue-d)}
.g-skill__fn a span{display:block;font-size:12.5px;color:var(--mute)}
.g-skill__fn a:hover{background:var(--sky)}
.g-skill__more{margin:10px 0 0;font-size:14px}
.g-links{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px;margin:14px 0 0;padding:0;list-style:none}
.g-links a{display:block;border:1px solid var(--line);border-radius:8px;padding:10px 14px;text-decoration:none;color:var(--ink);background:#fff}
.g-links a b{display:block;color:var(--blue-d)}
.g-links a span{font-size:13px;color:var(--mute)}
.g-links a:hover{border-color:var(--blue);background:var(--sky-2)}

/* 練習中の全画面（2026-11-07 田所さん：ほかのリンクはいらない。ベネッセの練習画面を参考に） */
.pt-top{display:none}
html.pt-on,html.pt-on body{overflow:hidden}
html.pt-on .pt{position:fixed;inset:0;z-index:1000;margin:0;border:0;border-radius:0;padding:0;background:#fff;overflow:auto;display:flex;flex-direction:column}
html.pt-on .pt-top{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#6f93bd;color:#fff;padding:8px 16px;min-height:52px;flex:0 0 auto}
.pt-top__t{margin:0;font-size:17px;display:flex;gap:12px;align-items:baseline;min-width:0}
.pt-top__t span{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pt-top__r{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.pt-top__lbl{font-weight:700;font-size:14px}
.pt-prog{display:inline-block;width:160px;height:12px;border-radius:99px;background:#fff;overflow:hidden}
.pt-prog i{display:block;height:100%;width:100%;background:#2dbd4e;border-radius:99px;transition:width .2s linear}
.pt-top__time{font-size:24px;font-variant-numeric:tabular-nums;min-width:4.5em;text-align:right}
.pt-x{border:0;background:var(--orange);color:#fff;font:inherit;font-weight:700;font-size:16px;border-radius:99px;padding:8px 18px;cursor:pointer}
html.pt-on .pt-play,html.pt-on .pt-result{flex:1 0 auto;width:100%;max-width:960px;margin:0 auto;padding:24px 16px 32px;box-sizing:border-box}
html.pt-on .pt-result{max-width:760px}
.pt-cnt{display:flex;gap:8px;margin:0 0 10px}
.pt-cnt span{display:inline-flex;align-items:center;gap:10px;background:#e3f2fb;color:#2477b3;border-radius:6px;padding:5px 12px;font-weight:700;font-size:14px}
.pt-cnt b{color:var(--orange);font-size:18px;font-variant-numeric:tabular-nums;min-width:1.5em;text-align:right}
.pt-ready{text-align:center;padding:5vh 0 3vh}
.pt-ready__t{font-size:clamp(22px,3.4vw,34px);color:#f07800;font-weight:700;margin:0 0 6px}
.pt-ready__s{color:var(--mute);margin:0}
.pt-ready__go{display:none;margin:14px auto 0}
@media (hover:none){.pt-ready__go{display:inline-block}}
html.pt-on .pt-screen{background:none;box-shadow:none;padding:4vh 0 2vh;min-height:150px}
html.pt-on .pt-text{font-size:clamp(28px,4.2vw,44px)}
html.pt-on .pt-roma{font-size:clamp(20px,2.6vw,28px)}
html.pt-on .pt-kana{font-size:17px}
html.pt-on .pt-kbwrap{max-width:900px}
html.pt-on .pt-k{font-size:16px;padding:10px 0}
html.pt-on .pt-k--w,html.pt-on .pt-k--space{font-size:12px}
html.pt-on .pt-hands{max-width:720px}
@media (max-width:640px){
  html.pt-on .pt-top{flex-wrap:wrap;padding:6px 10px}
  .pt-top__t b{display:none}
  .pt-prog{width:80px}.pt-top__time{font-size:18px}.pt-x{font-size:14px;padding:6px 12px}
  html.pt-on .pt-k{font-size:11px;padding:6px 0}
  html.pt-on .pt-play{padding:14px 10px 20px}
}
.pt [hidden]{display:none!important}
html.pt-on .pt-top p{margin:0}
html.pt-on .pt-top{min-height:56px}
html.pt-on .pt-play p{margin-top:0}
html.pt-on .pt-ready{padding:4vh 0 2vh}
html.pt-on .pt-ready__t{margin:0 0 8px}
html.pt-on .pt-ready__s{margin:0}
html.pt-on .pt-screen{padding:3vh 0 1vh;min-height:130px}
html.pt-on .pt-kana{margin:0 0 6px}
html.pt-on .pt-text{margin:0 0 14px}
html.pt-on .pt-roma{margin:0}
html.pt-on .pt-finger{margin:8px 0 10px}
html.pt-on .pt-k{padding:8px 0}
html.pt-on .pt-hands{max-width:640px}
html.pt-on .pt-hist{margin-top:18px}
@media (max-width:640px){html.pt-on .pt-top{min-height:0}html.pt-on .pt-top__r{width:100%;justify-content:flex-end}html.pt-on .pt-k{padding:6px 0}}

/* 手の図（2026-11-07 人の手らしく：指の長さの違い・爪・手のひら・手首） */
.pt-palm,.pt-fing{fill:#f7e6d8;stroke:#d8b9a2;stroke-width:1.6;stroke-linejoin:round}
.pt-nail{fill:#fff6ef;stroke:#e6cdbb;stroke-width:1;pointer-events:none}
.pt-crease{fill:none;stroke:#e3c7b2;stroke-width:1.4;stroke-linecap:round}
.pt-fing.is-on{fill:#3f8ee6;stroke:#1561c2}
.pt-hands{max-width:480px}
html.pt-on .pt-hands{max-width:560px}

/* 練習画面の動き（2026-11-07 ベネッセの練習画面を操作して確かめたうえで） */
.pt-hands{display:block;max-width:none!important;margin:4px auto 0;overflow:visible}
html.pt-on .pt-hands{max-width:none!important}
.pt-count{text-align:center;font-size:clamp(64px,9vw,104px);font-weight:700;color:#f07800;margin:0;padding:2vh 0 1vh;line-height:1.2;font-variant-numeric:tabular-nums}
.pt-count.pop{animation:ptpop 1s ease-out both}
@keyframes ptpop{0%{transform:scale(1.7);opacity:0}22%{transform:scale(1);opacity:1}80%{opacity:1}100%{opacity:.15}}
.pt-cd .pt-kbwrap{opacity:.45;filter:grayscale(1);transition:opacity .2s}
.pt-text .pt-done,.pt-kana .pt-done,.pt-roma .pt-done{background:#ffe14d;color:inherit;border-radius:2px}
.pt-k{transition:transform .06s,background-color .12s,border-color .12s}
.pt-k.is-down{transform:translateY(2px);border-bottom-width:1px;margin-top:2px;background:#dce8f6!important}
.pt-k.is-err{border-color:#e03131!important;color:#e03131!important;background:#fff0f0!important;box-shadow:0 0 0 2px rgba(224,49,49,.25)}
.pt-cnt span.is-bump{animation:ptbump .35s}
@keyframes ptbump{0%{background:#ffd6d6}100%{background:#e3f2fb}}
.pt.is-miss{animation:none}
.pt-confirm{position:fixed;inset:0;z-index:1100;background:rgba(20,30,45,.45);display:flex;align-items:center;justify-content:center;padding:16px}
.pt-confirm__box{background:#fff;border-radius:12px;padding:20px 22px;max-width:380px;width:100%;text-align:center;box-shadow:0 10px 30px rgba(0,0,0,.2)}
.pt-confirm__t{font-weight:700;color:#2477b3;margin:0 0 8px!important;font-size:18px}
.pt-confirm__b{display:flex;gap:10px;justify-content:center;margin-top:14px;flex-wrap:wrap}
/* ボタンの手ごたえ */
.pt-btn,.pt-x{transition:background-color .15s,border-color .15s,transform .06s,box-shadow .15s,opacity .15s}
.pt-btn--main{box-shadow:0 3px 0 var(--orange-d)}
.pt-btn--main:hover,.pt-x:hover{background:#ff8a1f;border-color:#ff8a1f}
.pt-btn:not(.pt-btn--main):not(.pt-btn--x):hover{background:var(--sky-2)}
.pt-btn--x:hover{background:#333}
.pt-btn:active,.pt-x:active{transform:translateY(2px);box-shadow:none}
.pt-btn:disabled,.pt-x:disabled{opacity:.5;cursor:not-allowed;transform:none}
.pt-btn--start:disabled{cursor:wait}
.pt-x{box-shadow:0 2px 0 var(--orange-d)}
.pt-chip span{transition:border-color .12s,background-color .12s}
.pt-chip span:hover{border-color:var(--blue)}
.pt-btn:focus-visible,.pt-x:focus-visible{outline:3px solid #ffbf47;outline-offset:2px}

/* 開始前・カウントダウン・問題で、キーボードの位置が動かないように同じ高さにする */
html.pt-on .pt-ready,html.pt-on .pt-count,html.pt-on .pt-screen{min-height:190px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:8px 0}
html.pt-on .pt-screen>p{width:100%}
@media (max-width:640px){html.pt-on .pt-ready,html.pt-on .pt-count,html.pt-on .pt-screen{min-height:150px}}
html.pt-on .pt-count{margin:0!important}
html.pt-on .pt-count{min-height:196px}
/* スマホ：記事カードは「小さい画像＋題名」の横並びリストにして、縦に長くしない（2026-11-07 スマホ前提） */
@media (max-width:600px){
  .g-cards{grid-template-columns:1fr;gap:8px}
  .g-card{flex-direction:row;align-items:center;height:auto}
  .g-card img{width:112px;height:63px;flex:0 0 112px;object-fit:cover}
  .g-card__b{padding:6px 10px}
  .g-card__t{font-size:14.5px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .g-card__m{font-size:11.5px}
  .g-hero__lead{font-size:15px}
  .g-shelf{margin-top:26px}
  .g-shelf__h{flex-direction:column;align-items:flex-start;gap:2px}
  .g-skill__fn{grid-template-columns:1fr 1fr}
  .g-tools{grid-template-columns:1fr}
}

.g-shelf__note{font-size:13px;color:var(--mute);margin:-6px 0 12px}
.g-about-page dl{display:grid;grid-template-columns:9em 1fr;gap:8px 14px;margin:0 0 18px}.g-about-page dt{font-weight:700;color:var(--blue-d)}.g-about-page dd{margin:0}
@media (max-width:600px){.g-about-page dl{grid-template-columns:1fr;gap:2px}.g-about-page dd{margin-bottom:10px}}
/* ---------- 生成AIパスポート 問題集（スマホ優先） ---------- */
.ap-h1sub{display:block;font-size:.55em;color:var(--orange-d);margin-top:4px}
.ap{border:2px solid var(--blue);border-radius:12px;background:#f6faff;padding:14px;margin:4px 0 26px}
.ap-stat{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 12px}
.ap-stat div{background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px 12px}
.ap-stat span{display:block;font-size:12.5px;color:var(--mute)}.ap-stat b{font-size:24px;color:var(--blue-d);font-variant-numeric:tabular-nums}.ap-stat small{margin-left:4px;color:var(--mute)}
.ap-modes{display:grid;gap:8px}
.ap-mode{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;text-align:left;font:inherit;border:2px solid var(--blue);background:#fff;border-radius:12px;padding:12px 14px;cursor:pointer;color:var(--ink);transition:background-color .15s,transform .06s}
.ap-mode b{font-size:17px;color:var(--blue-d)}.ap-mode span{font-size:13px;color:var(--mute)}
.ap-mode--main{background:var(--orange);border-color:var(--orange);box-shadow:0 3px 0 var(--orange-d)}.ap-mode--main b,.ap-mode--main span{color:#fff}
.ap-mode:hover{background:var(--sky-2)}.ap-mode--main:hover{background:#ff8a1f}
.ap-mode:active,.ap-ch:active,.ap-btn:active,.ap-c:active{transform:translateY(2px)}
.ap-mode:disabled,.ap-ch:disabled{opacity:.5;cursor:not-allowed;transform:none}
.ap-h{font-size:16px;margin:18px 0 8px;color:var(--blue-d);border:0;padding:0;background:none}
.ap-chs{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ap-ch{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;width:100%;text-align:left;font:inherit;background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 12px;cursor:pointer;color:var(--ink)}
.ap-ch:hover{border-color:var(--blue)}
.ap-ch__no{grid-row:span 2;align-self:center;font-size:12px;font-weight:700;color:#fff;background:var(--blue);border-radius:6px;padding:4px 6px}
.ap-ch__name{font-weight:700}.ap-ch__meta{font-size:12.5px;color:var(--mute)}
.ap-ch .ap-bar{grid-column:2}
.ap-bar{display:block;height:6px;background:#e3ebf5;border-radius:99px;overflow:hidden;margin-top:4px}.ap-bar i{display:block;height:100%;background:#2dbd4e;border-radius:99px}
.ap-reset{font-size:12.5px;color:var(--mute);margin:12px 0 0}
.ap-link{border:0;background:none;color:var(--blue);text-decoration:underline;font:inherit;cursor:pointer;padding:0}
.ap-top{display:flex;align-items:center;gap:12px;margin:0 0 6px}
.ap-count{font-weight:700;font-size:17px}.ap-count small{color:var(--mute);font-weight:400}
.ap-timer{font-weight:700;color:var(--orange-d);font-variant-numeric:tabular-nums}
.ap-top .ap-link{margin-left:auto;font-size:14px}
.ap-prog{height:6px;background:#e3ebf5;border-radius:99px;overflow:hidden;margin:0 0 12px}.ap-prog i{display:block;height:100%;background:var(--blue)}
.ap-sec{font-size:12.5px;color:var(--blue-d);font-weight:700;margin:0 0 4px!important}
.ap-q{font-size:17.5px;font-weight:700;line-height:1.7;margin:0 0 10px!important}
.ap-multi{font-size:13.5px;background:#fff8e1;border:1px solid #f0d27a;border-radius:8px;padding:6px 10px;margin:0 0 10px!important}
.ap-cs{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ap-cs li{margin:0}
.ap-c{display:flex;gap:10px;align-items:flex-start;width:100%;text-align:left;font:inherit;font-size:15.5px;line-height:1.6;background:#fff;border:1.5px solid #c9d8ea;border-radius:10px;padding:12px;cursor:pointer;color:var(--ink);min-height:52px;transition:background-color .12s,border-color .12s,transform .06s}
.ap-c:hover{border-color:var(--blue)}
.ap-c__k{flex:0 0 26px;height:26px;border-radius:50%;background:var(--sky);color:var(--blue-d);font-weight:700;display:flex;align-items:center;justify-content:center;font-size:14px}
.ap-c.is-sel{border-color:var(--blue);background:#e9f3fc}.ap-c.is-sel .ap-c__k{background:var(--blue);color:#fff}
.ap-c.is-ok{border-color:#2a9d55;background:#ecf9f0}.ap-c.is-ok .ap-c__k{background:#2a9d55;color:#fff}
.ap-c.is-ng{border-color:#e03131;background:#fff0f0}.ap-c.is-ng .ap-c__k{background:#e03131;color:#fff}
.ap-c:disabled{cursor:default;transform:none}
.ap-judge{margin:12px 0 8px;padding:10px 12px;border-radius:10px;font-size:15px}
.ap-judge b{font-size:19px;margin-right:6px}
.ap-judge.is-ok{background:#ecf9f0;color:#1e7a42}.ap-judge.is-ng{background:#fff0f0;color:#c02626}
.ap-exp{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.ap-exp__t{font-weight:700;color:var(--blue-d);margin:0 0 4px!important}.ap-exp p{margin:0}
.ap-foot{position:sticky;bottom:0;padding:10px 0 4px;background:linear-gradient(rgba(246,250,255,0),#f6faff 30%);margin-top:6px}
.ap-foot:empty{display:none}
.ap-btn{display:block;width:100%;font:inherit;font-weight:700;font-size:16px;border:1.5px solid var(--blue);background:#fff;color:var(--blue-d);border-radius:12px;padding:13px;cursor:pointer;transition:background-color .15s,transform .06s}
.ap-btn--main{background:var(--orange);border-color:var(--orange);color:#fff;box-shadow:0 3px 0 var(--orange-d)}
.ap-btn--main:hover{background:#ff8a1f}.ap-btn:disabled{opacity:.5;cursor:not-allowed}
.ap-res__big{text-align:center;font-size:18px;margin:4px 0 6px!important}.ap-res__big b{font-size:44px;color:var(--blue-d)}.ap-res__big span{display:block;font-size:15px;color:var(--mute)}
.ap-res__note{text-align:center}
.ap-by{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.ap-by li{display:grid;grid-template-columns:1fr auto;gap:2px 8px;background:#fff;border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:14px}
.ap-by .ap-bar{grid-column:1/-1}
.ap-wrong details{background:#fff;border:1px solid var(--line);border-radius:8px;padding:8px 10px;margin:0 0 6px}
.ap-wrong summary{font-weight:700;cursor:pointer;font-size:14.5px}
.ap-wrong__a{color:#1e7a42;font-weight:700;margin:6px 0 4px!important}
.ap-res__act{display:grid;gap:8px;margin-top:16px}
.g-note{font-size:12.5px;color:var(--mute)}
@media (min-width:760px){.ap{padding:20px}.ap-modes{grid-template-columns:repeat(3,1fr)}.ap-chs{grid-template-columns:1fr 1fr}.ap-foot{position:static;background:none}.ap-btn{max-width:360px;margin:0 auto}}
.ap .ap-cs,.ap .ap-chs,.ap .ap-by{padding-left:0!important;margin-left:0!important}.ap .ap-cs li,.ap .ap-chs li,.ap .ap-by li{margin-left:0;padding-left:0}
/* 生成AIパスポート まとめ */
.ah-sum{border:2px solid var(--blue);border-radius:12px;background:#f6faff;padding:14px 16px;margin:10px 0 20px}
.ah-sum__t{font-weight:700;color:var(--blue-d);margin:0 0 6px!important}
.ah-sum ul{margin:0 0 12px;padding-left:1.2em}.ah-sum li{margin:4px 0}
.ah-cta{display:block;background:var(--orange);color:#fff!important;text-decoration:none;border-radius:12px;padding:12px 16px;box-shadow:0 3px 0 var(--orange-d);transition:background-color .15s}
.ah-cta b{display:block;font-size:16.5px}.ah-cta span{display:block;font-size:13px;opacity:.95}
.ah-cta:hover{background:#ff8a1f}
.ah-cta--wide{margin:16px 0 24px}
mark{background:#ffe14d;padding:0 2px}
/* ---------- Excel関数ページ（2026-11 作り直し：図解・サンプルつき） ---------- */
.c-blue{color:#2f6fd0}.c-red{color:#d13438}.c-purple{color:#8a3ffc}.c-green{color:#1e8e3e}.c-orange{color:#e9570a}
.xa-ans{border:2px solid #217346;border-radius:12px;background:#f3faf5;padding:14px 16px;margin:10px 0 14px}
.xa-ans__t{font-weight:700;color:#217346;margin:0 0 6px!important}
.xa-code{background:#fff;border:1px solid #cfe3d6;border-radius:8px;padding:10px 12px;margin:0 0 10px;overflow-x:auto}
.xa-code code{font-family:Consolas,Menlo,monospace;font-size:17px;white-space:nowrap;background:none;padding:0}
.xa-ans p:last-child{margin-bottom:0}
.xf{margin:14px 0 18px;padding:0}
.xf-svg{display:block;width:100%;max-width:560px;height:auto;border:1px solid #d6d6d6;border-radius:6px;font-family:"BIZ UDPGothic","Yu Gothic",sans-serif;background:#fff}
.xf figcaption{font-size:14.5px;color:#333;margin-top:8px;line-height:1.7}
.xf-pair{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:760px){.xf-pair{grid-template-columns:1fr}}
.xf-tag{display:inline-block;font-weight:700;font-size:13.5px;border-radius:6px;padding:2px 10px;margin:0 0 6px!important;color:#fff}
.xf-tag--ng{background:#d13438}.xf-tag--ok{background:#1e8e3e}
.xa-dl a{display:inline-block;background:#217346;color:#fff!important;text-decoration:none;font-weight:700;border-radius:8px;padding:9px 14px;font-size:14.5px}
.xa-dl a::before{content:"⬇ "}
.xa-dl a:hover{background:#185c37}
.xa-dl--big a{font-size:16px;padding:12px 18px}
.xa-args code,.xa-err code,.xa-fix code{font-family:Consolas,Menlo,monospace}
.xa-steps{padding-left:1.4em}
.xa-steps li{margin:0 0 10px}
.xa-steps b{display:block}
.xa-steps span{display:block;font-size:14.5px;color:#444}
kbd{display:inline-block;border:1px solid #bbb;border-bottom-width:2px;border-radius:4px;padding:0 5px;font-size:.9em;background:#fafafa;font-family:inherit}
.xa-errs{display:grid;gap:12px;margin:10px 0 16px}
.xa-err{border:1px solid #e5c7c7;border-left:4px solid #d13438;border-radius:8px;padding:12px 14px;background:#fff}
.xa-err__t{font-weight:700;font-size:16.5px;margin:0 0 8px!important;display:flex;gap:8px;align-items:center}
.xa-err__t span{display:inline-flex;width:24px;height:24px;border-radius:50%;background:#d13438;color:#fff;font-size:13px;align-items:center;justify-content:center;flex:0 0 24px}
.xa-cells{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:center;margin:0 0 8px}
.xa-cells>div:not(.xa-ne){border:1px solid #cfcfcf;background:#fff;padding:6px 10px;border-radius:4px;box-shadow:inset 0 0 0 1px #f2f2f2}
.xa-cells small{display:block;font-size:11.5px;color:#777}
.xa-cells code{font-size:15px;background:none;padding:0}
.xa-cells code small{display:inline;margin-left:4px}
.xa-ne{font-size:22px;color:#d13438;font-weight:700}
.xa-err p{margin:0 0 6px}
.xa-fix{background:#f3faf5;border-radius:6px;padding:8px 10px;margin:6px 0 0!important}
.xa-fix>b:first-child{display:inline-block;background:#1e8e3e;color:#fff;font-size:12px;border-radius:4px;padding:1px 7px;margin-right:6px}
.xa p code,.xa li code{word-break:break-all;overflow-wrap:anywhere}
/* 資格ページ（ITパスポートなど） */
.sk-fig{margin:14px 0 22px;padding:0}
.sk-fig svg{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:10px}
.sk-fig figcaption{font-size:13.5px;color:var(--mute);line-height:1.7;margin-top:6px}
.sk-box{border:2px solid var(--orange);border-radius:12px;background:#fff7f1;padding:12px 16px;margin:14px 0 22px}
.sk-box__t{font-weight:700;color:var(--orange-d);margin:0 0 4px!important}
.sk-box ul{margin:0;padding-left:1.2em}.sk-box li{margin:4px 0}
.sk-links{margin:12px 0 26px}
.sk-src{font-size:12.5px;line-height:1.8;word-break:break-all}
.sk mark{background:var(--mark);padding:0 2px}
/* ITパスポート 過去問 */
.ip-q{font-weight:700}
.ip-q p,.ip-q ul,.ip-q ol,.ip-q .ip-tw,.ip-q pre{font-weight:400}
.ip-abc{list-style:none;margin:8px 0;padding:0;font-weight:400;font-size:15.5px}
.ip-abc li{display:flex;gap:8px;margin:4px 0}.ip-abc b{flex:0 0 auto;color:var(--blue-d)}
.ip-box{font-weight:400;font-size:15.5px;background:#fff;border:1px solid var(--line);border-radius:8px;padding:8px 12px;margin:8px 0!important}
.ip-cap{font-weight:700;font-size:14px;margin:10px 0 4px!important}
.ip-tw{overflow-x:auto;margin:6px 0 10px}
table.ip-t{border-collapse:collapse;font-size:14.5px;font-weight:400;background:#fff;min-width:60%}
table.ip-t th,table.ip-t td{border:1px solid #9fb3c8;padding:5px 9px;text-align:left;white-space:nowrap}
table.ip-t th{background:#eef4fb}
.ip-dash{text-decoration-style:dashed}
.ip-unit{font-size:13px;font-weight:400;margin:0!important}
pre.ip-code{font-family:"BIZ UDGothic",Consolas,"Courier New",monospace;font-size:13.5px;line-height:1.7;background:#f7f9fc;border:1px solid var(--line);border-radius:8px;padding:10px 12px;overflow-x:auto;white-space:pre;margin:6px 0 10px}
.ip-prog{font-weight:400;font-size:15px;list-style:none;padding:0;margin:4px 0 10px}
.ip-src{font-weight:400;color:var(--mute)}
.ip-cite{font-size:12.5px;color:var(--mute);margin:8px 0 0!important}
.ap-exp ol,.ap-exp ul{margin:6px 0 0;padding-left:1.3em}.ap-exp p+p{margin-top:6px}
/* Web会議・Googleツール：画面の図とスマホ／パソコン切り替え */
.ui-fig{margin:12px 0 22px}
.ui-fig svg{display:block;width:100%;height:auto}
.ui-fig--sp svg{max-width:300px;margin:0 auto}
.ui-fig figcaption{font-size:13.5px;color:var(--mute);line-height:1.7;margin-top:8px}
.dv{margin:10px 0 24px}
.dv>input{position:absolute;opacity:0;pointer-events:none}
.dv>label{display:inline-block;padding:9px 22px;margin:0 6px 0 0;border:2px solid var(--blue);border-radius:99px;font-weight:700;color:var(--blue-d);background:#fff;cursor:pointer;font-size:15px}
.dv>input:checked+label{background:var(--blue);color:#fff}
.dv>input:focus-visible+label{outline:3px solid var(--orange);outline-offset:2px}
.dv__sp,.dv__pc{display:none;border-top:2px solid var(--blue);margin-top:10px;padding-top:4px}
.dv>input:nth-of-type(1):checked~.dv__sp{display:block}
.dv>input:nth-of-type(2):checked~.dv__pc{display:block}
.ui-fig:not(.ui-fig--sp){overflow-x:auto;-webkit-overflow-scrolling:touch}
.ui-fig:not(.ui-fig--sp) svg{min-width:540px}
@media (max-width:600px){.ui-fig:not(.ui-fig--sp)::after{content:"← 横にずらして見られます →";display:block;font-size:12px;color:var(--mute);text-align:center;margin-top:4px}}
.ui-fig svg.ui2{max-width:440px;margin:0 auto;border:1px solid #e3e8ef;border-radius:12px;background:#fff}
/* ショートカットキー */
kbd{display:inline-block;min-width:1.9em;padding:1px 7px;margin:0 1px;border:1px solid #b9c3cf;border-bottom-width:3px;border-radius:6px;background:#fff;font:700 14.5px/1.6 "BIZ UDPGothic",Meiryo,sans-serif;color:#1f2328;text-align:center;white-space:nowrap}
.kc{list-style:none;margin:12px 0 24px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.kc li{background:#f6faff;border:1px solid var(--line);border-radius:10px;padding:10px 10px 8px;display:flex;flex-direction:column;gap:4px}
.kc__k{font-size:14px;line-height:2}
.kc b{font-size:15.5px}
.kc small{font-size:12px;color:var(--mute)}
.kf{position:sticky;top:0;z-index:5;background:#fff;padding:10px 0 6px;margin:6px 0 4px}
.kf label{display:block;font-weight:700;font-size:15px;margin-bottom:4px}
.kf input{width:100%;font:inherit;font-size:16px;padding:10px 12px;border:2px solid var(--blue);border-radius:10px}
.kf__n{font-size:13.5px;color:var(--mute);margin:4px 0 0!important;min-height:1em}
.kt__t th{white-space:nowrap;width:1%}
@media (max-width:600px){.kt__t th{white-space:normal}}
/* MOS：計算・出題範囲チェック・練習課題 */
.mc-calc{border:2px solid var(--orange);border-radius:12px;background:#fff7f1;padding:14px 16px;margin:16px 0 24px}
.mc-calc__t{font-weight:700;color:var(--orange-d);margin:0 0 8px!important}
.mc-calc label{display:block;font-size:14px;color:var(--mute);margin:8px 0 0}
.mc-calc select{display:block;width:100%;font-size:16px;padding:10px;margin-top:4px;border:1px solid #c9c9c9;border-radius:8px;background:#fff;color:inherit}
.mc-calc__r{margin-top:14px;background:#fff;border-radius:10px;padding:12px 14px;line-height:1.8}
.mc-calc__r b{font-size:26px;color:var(--orange-d)}
.mc-calc__r small{display:block;color:var(--mute);font-size:13px}
.mc-bar{position:sticky;top:0;z-index:5;background:#fff;border-bottom:1px solid var(--line);padding:10px 0 8px;margin-bottom:6px}
.mc-bar__n{margin:0 0 6px!important;font-size:15px}.mc-bar__n b{font-size:22px;color:var(--orange-d)}
.mc-bar__g{height:8px;border-radius:4px;background:#eee;overflow:hidden}.mc-bar__g i{display:block;height:100%;width:0;background:var(--orange);transition:width .2s}
.mc-only{display:inline-flex;align-items:center;gap:6px;font-size:14px;margin-top:8px}
.mc-sec h3{margin-top:22px}
.mc-mid{font-weight:700;font-size:14.5px;color:var(--mute);margin:14px 0 4px!important}
.mc-list{list-style:none;padding:0;margin:0}
.mc-list li{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin:6px 0;background:#fff}
.mc-list label{display:flex;gap:10px;align-items:flex-start;cursor:pointer;font-size:15.5px;line-height:1.6}
.mc-list input{width:22px;height:22px;flex:0 0 22px;margin-top:1px;accent-color:var(--orange)}
.mc-list small{display:block;margin:4px 0 0 32px;color:var(--mute);font-size:13.5px;line-height:1.6}
.mc-list li.is-done{background:#f4f8f4;border-color:#cfe3cf}.mc-list li.is-done .mc-tx{color:#4a6b4a}
.mc.is-only li.is-done{display:none}
.mc-reset button{font-size:13px;background:none;border:1px solid var(--line);border-radius:8px;padding:6px 10px;color:var(--mute)}
.mc-src td,.mc-src th{text-align:center;white-space:nowrap}
.mc-task{list-style:none;padding:0;margin:12px 0}
.mc-task>li{border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin:10px 0}
.mc-task__q{margin:0!important;line-height:1.7}.mc-task__q span{display:inline-block;background:#1c2a5a;color:#fff;font-size:12px;font-weight:700;border-radius:4px;padding:1px 7px;margin-right:8px}
.mc-task details{margin-top:8px}.mc-task summary{cursor:pointer;color:var(--orange-d);font-weight:700;font-size:14px}
.mc-task ol{margin:8px 0 0;padding-left:1.3em}.mc-task ol li{margin:3px 0}
.mc-task__a{font-size:13px;color:var(--mute);margin:6px 0 0!important}
/* 事務職への転職：志望動機・年収のツール */
.jt{border:2px solid var(--orange);border-radius:12px;background:#fff7f1;padding:14px 16px;margin:16px 0 24px}
.jt__t{font-weight:700;color:var(--orange-d);margin:0 0 8px!important}
.jt label{display:block;font-size:14px;color:var(--mute);margin:8px 0 0}
.jt select{display:block;width:100%;font-size:16px;padding:10px;margin-top:4px;border:1px solid #c9c9c9;border-radius:8px;background:#fff;color:inherit}
.jt fieldset{border:0;padding:0;margin:12px 0 0}.jt legend{font-size:14px;color:var(--mute);padding:0;margin-bottom:4px}
.jt label.jt__c{display:flex;align-items:center;gap:8px;color:inherit;font-size:15px;background:#fff;border:1px solid var(--line);border-radius:8px;padding:8px 10px;margin:6px 0 0}
.jt__c input{width:20px;height:20px;accent-color:var(--orange);flex:0 0 20px}
.jt__out{margin-top:14px}.jt__h{font-weight:700;margin:0 0 6px!important;font-size:14.5px}
.jt textarea{width:100%;box-sizing:border-box;font-size:15.5px;line-height:1.8;padding:10px;border:1px solid #c9c9c9;border-radius:8px;background:#fff;color:inherit;font-family:inherit}
.jt button{margin-top:8px;background:var(--orange);color:#fff;border:0;border-radius:8px;padding:10px 16px;font-size:15px;font-weight:700}
.jt__n{font-size:13px;color:var(--mute);margin:6px 0 0!important}
.jt__note{font-size:13px;color:var(--mute);margin:10px 0 0!important;line-height:1.7}
.jt__r{margin-top:14px}.jt__tbl{width:100%;background:#fff}.jt__tbl td b{font-size:18px;color:var(--orange-d)}
.jt__tbl td{white-space:nowrap}
/* ビジネスメール：組み立てツール・送る前のチェック */
.mt input[type=text]{display:block;width:100%;box-sizing:border-box;font-size:16px;padding:10px;margin-top:4px;border:1px solid #c9c9c9;border-radius:8px;background:#fff;color:inherit;font-family:inherit}
.mt select:disabled{background:#f1f1f1;color:#777}
.mt__f{margin-top:4px}
.mt #mt-subj{font-weight:700}
.mt__res{margin-top:10px;background:#fff;border-radius:10px;padding:2px 14px}
.mt__res:empty{display:none}
.mt__bad{color:#c5221f;font-weight:700;margin:10px 0 4px!important}.mt__good{color:#137333;font-weight:700;margin:10px 0!important}
.mt__ok{font-size:13.5px;color:#137333;margin:6px 0 10px!important}
.mt__res ul{margin:0 0 6px;padding-left:1.2em}.mt__res li{margin:5px 0;line-height:1.7}
/* 仕事で使うAI：4つのAIの比較カード */
.aic{display:grid;gap:12px;margin:14px 0 8px}
@media(min-width:720px){.aic{grid-template-columns:1fr 1fr}}
.aic__c{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:#fff}
.aic__n{font-size:19px;font-weight:700;margin:0 0 6px!important}.aic__n small{font-size:13px;color:var(--mute);font-weight:400;margin-left:8px}
.aic dl{margin:0}.aic dt{font-size:12.5px;color:var(--mute);margin-top:8px}.aic dd{margin:2px 0 0;font-size:15px;line-height:1.7}

/* 全国の地域ページ */
.ar .g-sc dl{margin:.4em 0 .2em}
.ar-ch{border:1px solid #d6e2f3;border-radius:10px;padding:12px 14px;margin:12px 0;background:#fff}
.ar-ch.is-self{background:#fff8ef;border-color:#f3c9a5}
.ar-ch h3{margin:0 0 6px;font-size:1.05rem}
.ar-ch h3 small{display:inline-block;margin-left:8px;font-size:.78rem;font-weight:400;color:#0b3f86;background:#e8f0fe;border-radius:4px;padding:1px 6px}
.ar-ch dl{display:grid;grid-template-columns:7.5em 1fr;gap:4px 8px;margin:0;font-size:.93rem}
.ar-ch dt{color:#555;font-weight:700}
.ar-ch dd{margin:0}
.ar-near th small{display:block;font-weight:400;color:#555;font-size:.82rem}
.ar-cities{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(9.5em,1fr));gap:8px}
.ar-cities a{display:flex;justify-content:space-between;align-items:center;border:1px solid #d6e2f3;border-radius:8px;padding:9px 11px;text-decoration:none;color:#0b3f86;font-weight:700;background:#fff}
.ar-cities small{color:#666;font-weight:400}
.g-article ul.ar-cities{margin:8px 0 16px;padding:0;grid-template-columns:repeat(auto-fill,minmax(8.5em,1fr))}
.g-article ul.ar-cities li{margin:0;padding:0}
.g-article ul.ar-cities li::before{display:none}