@charset "utf-8";

/* パソコン教室えらびガイド
   教室LP（/kokubunji/）とは意図的に別のビジュアル言語を使う。
   記事本体は無彩色・罫線ベース。ブランドカラーは記事末の運営者ブロックにのみ使用する。
   HTMLは変更せず、このファイルだけで見た目を切り替えている。 */

:root{
  /* 記事本体（無彩色） */
  --bg:#fff;
  --bg-sub:#fafaf8;
  --tx:#2a2a28;
  --tx-strong:#1a1a1a;
  --tx-mute:#767674;
  --tx-faint:#6b6b69;
  --rule:#e8e8e6;
  --rule-thin:#ececea;
  --rule-strong:#1a1a1a;
  --link:#1f5c8a;

  /* 運営者ブロック限定（ピアのブランドカラー） */
  --pier-navy:#26384e;
  --pier-line:#EAE0D5;

  --readw:720px;
  --maxw:1080px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--bg);
  color:var(--tx);
  font-family:"Noto Sans JP",system-ui,-apple-system,sans-serif;
  font-size:17px;
  line-height:1.9;
  font-feature-settings:"palt";
  -webkit-text-size-adjust:100%;
}

img{max-width:100%;height:auto;display:block}
a{color:var(--link);text-underline-offset:.2em}
a:hover{color:var(--tx-strong)}

/* ---------- ヘッダー ---------- */

.g-head{background:var(--bg);border-bottom:1px solid var(--rule);position:sticky;top:0;z-index:50}
.g-head__in{
  max-width:var(--maxw);margin:0 auto;padding:13px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.g-head__brand{
  display:flex;align-items:center;gap:10px;
  font-weight:700;font-size:16px;color:var(--tx-strong);
  text-decoration:none;line-height:1.3;letter-spacing:.02em;
}
.g-nav{display:flex;gap:22px;font-size:12.5px;flex-wrap:wrap}
.g-nav a{color:var(--tx-mute);text-decoration:none}
.g-nav a:hover{color:var(--tx-strong)}

/* ---------- レイアウト ---------- */

.g-wrap{max-width:var(--readw);margin:0 auto;padding:0 24px}
.g-wide{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.g-crumb{
  max-width:var(--readw);margin:0 auto;padding:18px 24px 0;
  font-size:12px;color:var(--tx-faint);
}
.g-crumb a{color:var(--tx-faint)}
.g-crumb span{margin:0 6px}

/* ---------- 記事 ---------- */

.g-article{padding:10px 0 0}

.g-cat{
  display:block;background:none;padding:0;border-radius:0;
  font-size:11.5px;color:var(--tx-mute);letter-spacing:.1em;margin:0 0 10px;font-weight:400;
}

.g-article h1{
  font-family:inherit;
  font-size:clamp(24px,4vw,31px);line-height:1.55;font-weight:700;
  color:var(--tx-strong);margin:0 0 16px;letter-spacing:.01em;
}

.g-meta{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:13px;color:var(--tx-mute);
  margin:0 0 24px;padding-bottom:22px;border-bottom:1px solid var(--rule);
}
.g-meta img{width:32px;height:32px;border-radius:50%;object-fit:cover}
.g-meta__updated{background:none;padding:0;border-radius:0;font-size:12.5px;color:var(--tx-mute)}
.g-meta__updated::before{content:"／ ";color:var(--rule)}

/* 運営者開示 */
.g-disclosure{
  background:none;border:0;border-left:2px solid #c9c9c5;
  padding:2px 0 2px 16px;margin:0 0 30px;border-radius:0;
}
.g-disclosure__t{
  font-weight:500;color:var(--tx-mute);font-size:12px;letter-spacing:.06em;margin:0 0 6px;
}
.g-disclosure p{margin:0;font-size:15px;line-height:1.9;color:#4a4a48}
.g-disclosure strong{font-weight:700;color:var(--tx-strong)}

/* 表内の補足（教室名の下に小さく出す） */
.g-sub{
  display:block;font-size:13px;font-weight:400;
  color:var(--tx-mute);margin-top:3px;line-height:1.5;
}

/* リード文 */
.g-lead{
  font-size:18px;line-height:2;color:var(--tx-strong);
  margin:0 0 22px;
}

/* 要点ボックス */
.g-box{
  border:1px solid var(--rule);border-radius:4px;
  padding:20px 24px;margin:0 0 30px;background:none;
}
.g-box__t{
  font-weight:500;color:var(--tx-mute);margin:0 0 12px;
  font-size:12.5px;letter-spacing:.1em;
}
.g-box ul{margin:0;padding-left:1.3em}
.g-box li{margin:8px 0;line-height:1.85;font-size:16.5px}
.g-box strong{font-weight:700;color:var(--tx-strong)}

/* 目次 */
.g-toc{
  border:1px solid var(--rule);background:none;border-radius:4px;
  padding:20px 24px;margin:0 0 44px;
}
.g-toc__t{
  font-weight:500;color:var(--tx-mute);margin:0 0 10px;
  font-size:12.5px;letter-spacing:.1em;
}
.g-toc ol{margin:0;padding-left:1.4em}
.g-toc li{margin:5px 0;line-height:1.7;font-size:15.5px}
.g-toc a{text-decoration:none;color:var(--tx)}
.g-toc a:hover{text-decoration:underline}

/* 見出し */
.g-article h2{
  font-family:inherit;
  font-size:clamp(21px,3vw,24px);line-height:1.55;font-weight:700;color:var(--tx-strong);
  margin:64px 0 20px;padding:22px 0 0;border:0;border-top:1px solid var(--rule);letter-spacing:.01em;
}
.g-article h3{
  font-family:inherit;
  font-size:17px;line-height:1.7;font-weight:700;color:var(--tx-strong);margin:38px 0 10px;
}
.g-article p{margin:0 0 1.55em;font-size:17.5px}
.g-article strong{font-weight:700;color:var(--tx-strong)}
.g-article ul{margin:0 0 1.7em;padding-left:1.3em}
.g-article li{margin:.55em 0;font-size:17.5px}

/* 引用 */
.g-quote{
  margin:0 0 1.8em;padding:2px 0 2px 16px;background:none;
  border:0;border-left:2px solid #d5d5d1;border-radius:0;
  font-size:16px;color:#4a4a48;line-height:1.9;
}
.g-quote cite{display:block;margin-top:8px;font-size:13px;font-style:normal;color:var(--tx-faint)}

/* 出典・注記 */
.g-src{font-size:13px;color:var(--tx-faint);margin:-.6em 0 2.2em;line-height:1.8}
.g-src a{color:var(--tx-faint)}
.g-note{font-size:14px;color:var(--tx-faint);line-height:1.85;margin:12px 0 2.2em}
.g-note span{display:block}

/* ---------- 表（罫線ベース） ---------- */

.g-tw{margin:0 0 14px;overflow-x:auto}
table.g-t{
  width:100%;border-collapse:collapse;background:none;
  border:0;border-radius:0;font-size:16px;
}
table.g-t thead th{
  background:var(--bg-sub);color:var(--tx-mute);font-weight:600;font-size:13px;
  letter-spacing:.04em;padding:9px 10px;border-bottom:2px solid var(--rule-strong);text-align:left;
}
table.g-t th,table.g-t td{
  padding:13px 10px;text-align:left;border-bottom:1px solid var(--rule-thin);
  color:var(--tx-strong);vertical-align:top;
}
table.g-t th + th,table.g-t th + td,table.g-t td + td{padding-left:14px}
table.g-t tbody th{font-weight:400}
table.g-t td.num,table.g-t th.num{text-align:right;white-space:nowrap}

/* 自社行：色は使わず、ラベルで示す */
table.g-t tr.is-self th::after{
  content:"当サイト運営";
  display:inline-block;margin-left:8px;padding:1px 7px;
  font-size:12px;font-weight:400;letter-spacing:.02em;
  color:var(--tx-mute);border:1px solid var(--rule);border-radius:3px;
  vertical-align:2px;white-space:nowrap;
}
table.g-t tr.is-self th,table.g-t tr.is-self td{background:none;color:var(--tx-strong);font-weight:400}

/* 記事の主題となる教室：太字のみ */
table.g-t tr.is-focus th,table.g-t tr.is-focus td{background:none;font-weight:700;color:var(--tx-strong)}

.g-tcap{font-size:14.5px;font-weight:500;color:var(--tx-mute);margin:0 0 10px;letter-spacing:.02em}

/* ---------- 運営者ブロック（ここだけブランドカラー） ---------- */

.g-cta{
  background:var(--bg-sub);border:1px solid var(--rule);border-radius:4px;
  padding:22px 24px 26px;margin:64px 0 0;
}
/* 短縮版の自社案内 */
.g-cta--min{
  background:none;border:0;border-top:1px solid var(--rule);
  border-radius:0;padding:20px 0 0;margin:56px 0 0;
}
.g-cta--min::before{content:none}
.g-cta--min p{margin:0;font-size:15.5px;line-height:1.9;color:#4a4a48}
.g-cta--min strong{font-weight:700;color:var(--tx-strong)}

.g-cta::before{
  content:"運営者からのご案内";
  display:block;font-size:11.5px;color:var(--tx-faint);letter-spacing:.1em;
  margin:0 0 16px;padding-bottom:14px;border-bottom:1px solid var(--rule);
}
.g-cta h2{
  margin:0 0 14px;font-size:20px;color:var(--pier-navy);
}
.g-cta h3{color:var(--pier-navy);margin-top:0}
.g-cta p{font-size:15.5px}
.g-cta table.g-t{font-size:14.5px}
.g-cta__camp{
  background:#fff;border:1px solid var(--pier-line);border-radius:4px;
  padding:18px 20px;margin:26px 0;
}

.g-btn{
  display:inline-block;background:var(--pier-navy);color:#fff;text-decoration:none;
  font-weight:700;font-size:16px;padding:14px 34px;border-radius:6px;
  box-shadow:none;margin:10px 0 4px;letter-spacing:.02em;
}
.g-btn:hover{background:#1b2838;color:#fff}
.g-tel{font-size:15px;color:var(--tx-strong);font-weight:700;margin:14px 0 0}
.g-tel a{color:var(--tx-strong);text-decoration:none}
.g-cta__sub{font-size:12.5px;color:var(--tx-faint);margin:6px 0 0}

/* ---------- 著者 ---------- */

.g-author{
  display:flex;gap:16px;align-items:flex-start;
  background:none;border:0;border-top:1px solid var(--rule);border-radius:0;
  padding:24px 0 0;margin:56px 0 0;
}
.g-author img{width:56px;height:56px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.g-author__n{font-weight:700;color:var(--tx-strong);margin:0 0 2px;font-size:15px}
.g-author__r{font-size:12px;color:var(--tx-mute);margin:0 0 8px}
.g-author p{font-size:14px;line-height:1.9;margin:0;color:#4a4a48}

/* ---------- 出典・関連 ---------- */

.g-rel{
  margin:48px 0 64px;padding:22px 24px;background:none;
  border:1px solid var(--rule);border-radius:4px;
}
.g-rel h2{margin:0 0 10px;border:0;padding:0;font-size:15px;color:var(--tx-strong)}
.g-rel p{font-size:14px;color:#4a4a48}
.g-rel ul{margin:0;padding-left:1.3em}
.g-rel li{font-size:14px;margin:.35em 0}

/* ---------- 一覧 ---------- */

.g-hero{border-bottom:1px solid var(--rule);background:var(--bg)}
.g-hero__in{max-width:var(--maxw);margin:0 auto;padding:44px 24px 34px}
.g-hero h1{
  font-family:inherit;font-size:clamp(24px,4vw,31px);
  font-weight:700;color:var(--tx-strong);margin:0 0 14px;line-height:1.55;
}
.g-hero p{max-width:660px;margin:0;color:#4a4a48;font-size:16px;line-height:1.9}
.g-hero__note{
  font-size:12.5px!important;color:var(--tx-mute)!important;
  margin:16px 0 0!important;padding-left:12px;border-left:2px solid var(--accent,#34657F);
}

.g-layout{
  max-width:var(--maxw);margin:0 auto;padding:0 24px 64px;
  display:grid;grid-template-columns:minmax(0,1fr) 244px;gap:44px;align-items:start;
}
.g-main{min-width:0}

.g-sec{padding:40px 0 0}
.g-sec h2{
  font-family:inherit;font-size:17px;font-weight:700;color:var(--tx-strong);
  margin:0 0 20px;padding:2px 0 2px 12px;border:0;border-left:4px solid #34657F;
  letter-spacing:.02em;line-height:1.4;
}

.g-item{
  display:flex;gap:18px;align-items:flex-start;
  padding:0 0 22px;margin:0 0 22px;border-bottom:1px solid var(--rule-thin);
  text-decoration:none;color:var(--tx);
}
.g-item:last-child{border-bottom:0;margin-bottom:0}
.g-item__img{
  flex:0 0 168px;width:168px;height:126px;object-fit:cover;
  border-radius:3px;background:var(--rule-thin);
}
.g-item__body{min-width:0}
.g-item__t{
  font-weight:700;color:var(--tx-strong);font-size:16px;line-height:1.65;margin:0 0 8px;
}
.g-item:not(.g-soon):hover .g-item__t{color:#34657F;text-decoration:underline}
.g-item__d{font-size:14px;color:#4a4a48;line-height:1.85;margin:0 0 10px}
.g-item__m{font-size:11.5px;color:var(--tx-faint);margin:0}
.g-tag{
  display:inline-block;border:1px solid var(--rule);border-radius:3px;
  padding:1px 7px;margin-right:9px;font-size:10.5px;color:var(--tx-mute);
}
.g-soon{opacity:.5;pointer-events:none}

/* ---------- サイドバー ---------- */

.g-side{position:sticky;top:74px;font-size:12.5px}
.g-side__b{padding:0 0 20px;margin:0 0 20px;border-bottom:1px solid var(--rule)}
.g-side__b:last-child{border-bottom:0;margin-bottom:0}
.g-side__t{
  font-size:10.5px;color:var(--tx-faint);letter-spacing:.1em;margin:0 0 12px;font-weight:400;
}
.g-side__author{display:flex;gap:10px;align-items:center;margin:0 0 10px}
.g-side__author img{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.g-side__an{font-size:13px;font-weight:700;color:var(--tx-strong);margin:0}
.g-side__ar{font-size:11px;color:var(--tx-mute);margin:2px 0 0}
.g-side__p{font-size:12px;color:#4a4a48;line-height:1.9;margin:0 0 12px}
.g-side__cat{list-style:none;margin:0;padding:0}
.g-side__cat li{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--rule-thin)}
.g-side__cat li:last-child{border-bottom:0}
.g-side__cat a{color:#34657F;text-decoration:none;font-size:12.5px}
.g-side__cat a:hover{text-decoration:underline}
.g-side__cat span{color:#c9c9c5;font-size:11.5px}
.g-side__cta{background:var(--bg-sub);border:1px solid var(--rule);border-radius:4px;padding:18px 16px;margin-bottom:0}
.g-side__tel{font-size:11.5px;color:var(--tx-mute);line-height:1.9;margin:12px 0 0}
.g-side__tel a{color:var(--tx-strong);text-decoration:none;font-weight:700}
.g-btn--sm{
  display:block;text-align:center;font-size:13px;padding:11px 12px;
  border-radius:5px;margin:4px 0 0;
}

/* ---------- フッター ---------- */

.g-foot{
  background:var(--bg-sub);color:var(--tx-mute);margin-top:0;
  padding:32px 0 28px;font-size:13px;border-top:1px solid var(--rule);
}
.g-foot__in{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.g-foot a{color:var(--tx-strong);text-decoration:none}
.g-foot a:hover{text-decoration:underline}
.g-foot__links{display:flex;gap:20px;flex-wrap:wrap;margin:0 0 16px;font-size:13px}
.g-foot__addr{font-size:12px;line-height:1.95;color:var(--tx-faint)}

/* ---------- モバイル ---------- */

@media (max-width:768px){
  body{font-size:16px;line-height:1.85}
  .g-head__in{padding:12px 18px}
  .g-nav{gap:16px;font-size:13px;width:100%}
  .g-wrap,.g-wide,.g-crumb,.g-head__in,.g-foot__in{padding-left:18px;padding-right:18px}
  .g-article h2{margin-top:48px}
  .g-article p,.g-article li{font-size:17px}
  .g-hero{padding:36px 0 4px}

  /* 表を行ごとのブロックに（横スクロールを避ける） */
  .g-tw{overflow-x:visible}
  table.g-t{font-size:16px}
  table.g-t thead{display:none}
  table.g-t tbody,table.g-t tr,table.g-t th,table.g-t td{display:block;width:100%}
  table.g-t tr{
    border-bottom:1px solid var(--rule);padding:14px 0;margin:0;
    background:none;border-radius:0;
  }
  table.g-t tr:first-child{border-top:2px solid var(--rule-strong)}
  table.g-t th,table.g-t td{border-bottom:0;padding:3px 0;text-align:left}
  table.g-t th + th,table.g-t th + td,table.g-t td + td{padding-left:0}
  table.g-t td[data-l]::before,table.g-t th[data-l]::before{
    content:attr(data-l);display:block;font-size:13px;color:var(--tx-mute);
    font-weight:400;margin-bottom:1px;letter-spacing:.02em;
  }
  table.g-t tbody th{font-weight:700;font-size:16px}
  table.g-t td.num,table.g-t th.num{text-align:left}
  table.g-t tr.is-self th::after{margin-left:8px}
  table.g-t tr.is-focus th{font-weight:700}
  table.g-t tr.is-focus td{font-weight:700}

  .g-cta{padding:20px 18px 24px}
  .g-btn{display:block;text-align:center;padding:15px 20px}
  .g-author{flex-direction:column;gap:12px}

  /* 一覧：1カラム、サムネは小さめに */
  .g-hero__in{padding:32px 18px 26px}
  .g-layout{grid-template-columns:1fr;gap:0;padding:0 18px 48px}
  .g-side{position:static;margin:44px 0 0;padding:24px 0 0;border-top:1px solid var(--rule)}
  .g-item{gap:13px}
  .g-item__img{flex:0 0 106px;width:106px;height:80px}
  .g-item__t{font-size:16px;line-height:1.6}
  .g-item__d{font-size:14px;line-height:1.8}
}

/* ============ 図解（本文内SVG） ============ */
.g-fig{
  margin:34px 0 30px;
  padding:22px 20px 18px;
  background:var(--bg-sub);
  border:1px solid var(--rule-thin);
  border-radius:4px;
}
.g-fig__t{
  margin:0 0 4px;
  font-size:14.5px;font-weight:700;color:var(--tx-strong);
  letter-spacing:.02em;
}
.g-fig__lead{margin:0 0 16px;font-size:15px;line-height:1.85;color:var(--tx)}
.g-fig svg{display:block;width:100%;height:auto}
.g-fig__n{margin:14px 0 0;font-size:13px;line-height:1.8;color:var(--tx-faint)}
.g-fig__n::before{content:"※ "}

/* SVG内で使う色（記事本文と同じ抑えたトーン） */
.g-fig .f-ax{stroke:var(--rule);stroke-width:1}
.g-fig .f-gr{stroke:var(--rule-thin);stroke-width:1}
.g-fig .f-lb{fill:var(--tx-mute);font-size:14px;font-family:"Noto Sans JP",sans-serif}
.g-fig .f-lb-s{fill:var(--tx-faint);font-size:12.5px;font-family:"Noto Sans JP",sans-serif}
.g-fig .f-val{fill:var(--tx-strong);font-size:14px;font-weight:700;font-family:"Noto Sans JP",sans-serif}
.g-fig .f-bar{fill:#c9c9c5}
.g-fig .f-bar-self{fill:var(--pier-navy)}
.g-fig .f-bar-focus{fill:#34657F}
.g-fig .f-line{fill:none;stroke:#8a8a88;stroke-width:2}
.g-fig .f-line-self{fill:none;stroke:var(--pier-navy);stroke-width:2.5}
.g-fig .f-line-focus{fill:none;stroke:#34657F;stroke-width:2.5;stroke-dasharray:5 3}
.g-fig .f-dot{fill:#fff;stroke-width:2}
.g-fig .f-cross{stroke:#b03a2e;stroke-width:1;stroke-dasharray:3 3}
.g-fig .f-cross-t{fill:#b03a2e;font-size:12.5px;font-weight:700;font-family:"Noto Sans JP",sans-serif}

/* 凡例 */
.g-fig__lg{display:flex;flex-wrap:wrap;gap:14px;margin:12px 0 0}
.g-fig__lg span{display:inline-flex;align-items:center;font-size:11.5px;color:var(--tx-mute)}
.g-fig__lg i{width:14px;height:3px;margin-right:6px;border-radius:2px;background:#8a8a88}
.g-fig__lg i.is-self{background:var(--pier-navy)}
.g-fig__lg i.is-focus{background:#34657F}

/* お知らせボックス */
.g-alert{
  margin:22px 0 26px;padding:16px 18px;
  background:#fbf8f2;border:1px solid #e6dcc8;border-left:4px solid #b8873b;border-radius:3px;
}
.g-alert__t{
  margin:0 0 6px;
  font-size:12px;font-weight:700;color:#8a6524;letter-spacing:.06em;
}
.g-alert p{margin:0;font-size:14px;line-height:1.9;color:var(--tx)}
.g-alert a{color:var(--link)}

@media (max-width:768px){
  .g-fig{margin:26px -4px 24px;padding:18px 14px 14px;border-radius:3px}
  .g-fig .f-lb{font-size:26px}
  .g-fig .f-lb-s{font-size:23px}
  .g-fig .f-val{font-size:26px}
  .g-fig .f-cross-t{font-size:23px}
  .g-alert{padding:14px 14px}
  .g-alert p{font-size:13.5px}
}

.g-cta__ph{display:block;width:100%;height:auto;margin:16px 0 18px;border-radius:3px;border:1px solid var(--rule-thin)}

/* 記事冒頭のアイキャッチ */
.g-eyecatch{
  margin:0 0 26px;
  border-radius:4px;
  overflow:hidden;
  background:var(--rule-thin);
}
.g-eyecatch img{
  display:block;width:100%;height:auto;
  aspect-ratio:4/3;object-fit:cover;
}
@media (max-width:768px){
  .g-eyecatch{
    margin:0 -18px 22px;      /* 本文の左右余白18pxを打ち消して端まで広げる */
    border-radius:0;
  }
  .g-eyecatch img{aspect-ratio:16/10}
}

/* ---------- 原文をそのまま見せる表（求人票・公式サイトの記述など） ---------- */
/* 集計表と区別する。数字を数えた表ではなく、出典の文言そのものを載せている場所 */
.g-tw--raw{
  margin:0 0 16px;
  border-left:3px solid var(--rule-strong);
  background:var(--bg-sub);
  padding:6px 16px 8px;
  border-radius:0 3px 3px 0;
}
.g-tw--raw::before{
  content:attr(data-label);
  display:block;
  font-size:12.5px;letter-spacing:.1em;color:var(--tx-mute);
  padding:10px 0 8px;
}
.g-tw--raw table.g-t{font-size:15.5px}
.g-tw--raw table.g-t thead th{
  background:none;border-bottom:1px solid var(--rule);
  padding:0 10px 8px;
}
.g-tw--raw table.g-t th,
.g-tw--raw table.g-t td{
  border-bottom:1px dotted var(--rule);
  color:#3a3a38;line-height:1.8;
}
.g-tw--raw table.g-t tr:last-child th,
.g-tw--raw table.g-t tr:last-child td{border-bottom:0}
@media (max-width:768px){
  .g-tw--raw{margin-left:-6px;margin-right:-6px;padding:6px 12px 8px}
  .g-tw--raw table.g-t{font-size:15px}
}

/* ---------- キャンペーンの注記（比較表・グラフの下に置く） ---------- */
/* 表とグラフは定価のまま。実施中のキャンペーンはここで開示する。
   色は使わず、左の太罫と余白で示す。期限が切れたら文言を必ず更新すること。 */
.g-camp{
  border:0;border-left:3px solid var(--rule-strong);
  background:var(--bg-sub);
  padding:16px 20px;margin:0 0 30px;border-radius:0 3px 3px 0;
}
.g-camp__t{
  margin:0 0 8px;font-size:12.5px;letter-spacing:.1em;
  color:var(--tx-mute);font-weight:500;
}
.g-camp p{margin:0;font-size:15.5px;line-height:1.9;color:var(--tx-strong)}
.g-camp .g-camp__c{
  display:block;margin-top:8px;font-size:13.5px;line-height:1.8;color:var(--tx-faint);
}
.g-camp a{font-size:15px}
@media (max-width:768px){
  .g-camp{margin-left:-6px;margin-right:-6px;padding:14px 16px}
  .g-camp p{font-size:16px}
  .g-camp .g-camp__c{font-size:14px}
}

/* キャンペーン注記の中の、価格に直結する一文だけ控えめな赤にする。
   記事全体は無彩色のままなので、ここ以外では使わないこと。 */
.g-camp__hi{
  color:#9c3a2e;          /* 白背景で 5.9:1。落ち着いた赤 */
  font-weight:700;
}