@charset "UTF-8"; /* ============================================================ pc-basic.css ― パソコン基礎講座専用スタイル前提: 各ページはとし、 /subpage.css（pp-* デザイントークン）を先に読み込むこと。色・寸法はすべて --pp-* カスタムプロパティを参照する。独自クラスは pcb- プレフィックスで統一。本講座は初心者向けのため、本文は16px以上・余白多めが基準。 ============================================================ */ /* ---------- レイアウト: 2カラム化 ---------- pp-page 標準は 210px 1fr 300px の3カラムだが、本講座は右カラムを使わないため 2カラムに上書きし、行長が伸びすぎないよう全体幅も 1020px に絞る。 */ .pcb-body .pp-page{ grid-template-columns:210px 1fr; max-width:1020px; padding-top:32px; } @media (max-width:760px){ .pcb-body .pp-page{grid-template-columns:1fr;padding-top:24px;} } /* 名刺と同じブランド三角形の背景は本講座では使わない */ .pcb-body .pp-page::before, .pcb-body .pp-page::after{display:none;} /* ---------- パネルの余白と見出しサイズ ---------- */ .pcb-body .pp-col-center .pp-panel{padding:26px 30px 30px;} .pcb-body .pp-phead h2{font-size:21px;} .pcb-body .pp-lead{font-size:16px;line-height:2;} /* ---------- パンくず ---------- */ .pcb-breadcrumb{ font-size:13px; color:var(--pp-faint); margin:0 0 14px; } .pcb-breadcrumb a{color:var(--pp-sub);} .pcb-breadcrumb a:hover{color:var(--pp-brand);} .pcb-breadcrumb .sep{margin:0 6px;color:var(--pp-line);} /* ---------- 本文の基本 ---------- */ .pcb-body .pp-panel h3{ font-size:18px; font-weight:700; color:var(--pp-ink); margin:40px 0 30px; padding-left:12px; border-left:4px solid var(--pp-brand); } .pcb-body .pp-panel h3:first-of-type{margin-top:20px;} .pcb-text{ font-size:16px; line-height:2.0; color:var(--pp-sub); margin:0 0 30px; } .pcb-text a{color:var(--pp-brand-dark);text-decoration:underline;text-underline-offset:3px;} .pcb-text a:hover{color:var(--pp-brand);} .pcb-text b{color:var(--pp-ink);} .pcb-text strong{color:var(--pp-ink);font-weight:700;} .pcb-text em{font-style:normal;font-weight:600;color:var(--pp-brand-dark);} /* 用語（はじめて出る専門用語） */ .pcb-term{ font-weight:700; color:var(--pp-ink); border-bottom:2px solid var(--pp-brand); padding-bottom:1px; } /* ---------- リード文（ページ冒頭の到達点） ---------- */ .pcb-lead{ background:var(--pp-deep); border:1px solid var(--pp-line); border-left:4px solid var(--pp-brand); border-radius:var(--pp-radius); padding:18px 22px; margin:0 0 26px; } .pcb-lead-title{ font-family:var(--pp-mono); font-size:12px; letter-spacing:.08em; color:var(--pp-brand-dark); margin:0 0 10px; } .pcb-lead p{ font-size:16px; line-height:2.0; color:var(--pp-sub); margin:0; } .pcb-lead p + p{margin-top:12px;} /* ---------- 会話形式 ---------- */ .pcb-talk{ margin:26px 0; display:flex; flex-direction:column; gap:18px; } .pcb-talk-row{ display:flex; align-items:flex-start; gap:12px; } .pcb-talk-row.is-teacher{flex-direction:row-reverse;} .pcb-talk-face{ flex:0 0 64px; text-align:center; } .pcb-talk-face img{ width:64px;height:64px; border-radius:50%; object-fit:cover; border:2px solid var(--pp-line); background:var(--pp-paper); } .pcb-talk-face .q{ display:flex; align-items:center; justify-content:center; width:64px;height:64px; border-radius:50%; background:var(--pp-deep); border:2px solid var(--pp-line); color:var(--pp-faint); font-weight:700; font-size:24px; } .pcb-talk-name{ display:block; font-size:11px; color:var(--pp-faint); margin-top:5px; line-height:1.2; } .pcb-talk-bubble{ position:relative; max-width:calc(100% - 94px); background:var(--pp-deep); border:1px solid var(--pp-line); border-radius:10px; padding:13px 18px; font-size:16px; line-height:1.95; color:var(--pp-ink); } .pcb-talk-bubble::before{ content:""; position:absolute; top:24px; left:-7px; width:12px;height:12px; background:inherit; border-left:1px solid var(--pp-line); border-bottom:1px solid var(--pp-line); transform:rotate(45deg); } .pcb-talk-row.is-teacher .pcb-talk-bubble{ background:#fdf1f0; border-color:#f3d5d3; font-size:16px; padding:16px 22px; max-width:calc(100% - 110px); } /* 講師の写真は受講者アイコンより大きく */ .pcb-talk-row.is-teacher .pcb-talk-face{flex:0 0 80px;} .pcb-talk-row.is-teacher .pcb-talk-face img{width:80px;height:80px;} .pcb-talk-row.is-teacher .pcb-talk-bubble::before{ left:auto; right:-7px; border:none; border-right:1px solid #f3d5d3; border-top:1px solid #f3d5d3; transform:rotate(45deg); } .pcb-talk-bubble b{color:var(--pp-brand-dark);} /* ---------- 講師メモ（14年の現場記録） ---------- */ .pcb-memo{ background:#fffdf5; border:1px solid #eadfbf; border-radius:var(--pp-radius); padding:16px 20px 18px; margin:26px 0; } .pcb-memo-label{ display:inline-block; font-family:var(--pp-mono); font-size:11px; letter-spacing:.1em; color:#8a7a3f; background:#f6efd8; border-radius:3px; padding:3px 10px; margin:0 0 10px; } .pcb-memo p{ font-size:16px; line-height:2.0; color:#5d5433; margin:0; } .pcb-memo p + p{margin-top:14px;} .pcb-memo p b{color:#3f3818;} /* ---------- ポイント / 注意 ---------- */ .pcb-point{ background:var(--pp-paper); border:2px solid var(--pp-brand); border-radius:var(--pp-radius); padding:16px 20px; margin:26px 0; } .pcb-point-label{ display:inline-block; font-family:var(--pp-mono); font-size:11px; letter-spacing:.1em; color:#fff; background:var(--pp-brand); border-radius:3px; padding:3px 10px; margin:0 0 10px; } .pcb-point p{ font-size:16px; line-height:1.95; color:var(--pp-ink); margin:0; } /* ---------- 手順ステップ ---------- */ .pcb-steps{ counter-reset:pcbstep; margin:20px 0 26px; } .pcb-steps li{ position:relative; padding:0 0 30px 50px; font-size:16px; line-height:1.95; color:var(--pp-sub); } .pcb-steps li::before{ counter-increment:pcbstep; content:counter(pcbstep); position:absolute; left:0;top:0; width:32px;height:32px; display:flex; align-items:center; justify-content:center; background:var(--pp-brand); color:#fff; font-family:var(--pp-mono); font-size:15px; font-weight:500; border-radius:50%; } .pcb-steps li:not(:last-child)::after{ content:""; position:absolute; left:15px;top:38px;bottom:2px; width:2px; background:var(--pp-line-soft); } .pcb-steps li b{color:var(--pp-ink);} /* ---------- キーボードのキー表現 ---------- */ .pcb-kbd{ display:inline-block; font-family:var(--pp-mono); font-size:14px; color:var(--pp-ink); background:var(--pp-paper); border:1px solid #c9c9c9; border-bottom-width:3px; border-radius:4px; padding:1px 9px; margin:0 3px; vertical-align:baseline; } /* ---------- コマンド表示（黒い画面） ---------- */ .pcb-cmd{ background:#1d1f21; border-radius:var(--pp-radius); padding:14px 18px; margin:18px 0 22px; overflow-x:auto; } .pcb-cmd code{ font-family:var(--pp-mono); font-size:14.5px; color:#e8e8e8; white-space:pre; } .pcb-cmd code .prompt{color:#7f8c98;} /* ---------- 電源マークの図解 ---------- */ .pcb-symbol{ display:flex; align-items:center; justify-content:center; gap:20px; background:var(--pp-deep); border:1px solid var(--pp-line); border-radius:var(--pp-radius); padding:26px 14px; margin:20px 0 0; } .pcb-symbol .glyph{ font-family:var(--pp-mono); font-size:44px; line-height:1; color:var(--pp-ink); } .pcb-symbol .op{ font-size:22px; color:var(--pp-faint); } .pcb-symbol svg{display:block;} .pcb-symbol-caption{ text-align:center; font-size:13.5px; color:var(--pp-faint); margin:10px 0 22px; } /* ---------- 図版（スクリーンショット・写真） ---------- 使い方:

*/ .pcb-fig{ margin:30px 0; } .pcb-fig img{ display:block; max-width:100%; height:auto; border:1px solid var(--pp-line); border-radius:var(--pp-radius); background:var(--pp-paper); } .pcb-fig figcaption{ text-align:center; font-size:13.5px; color:var(--pp-faint); margin-top:10px; } /* 小さめに見せたいとき(スマホ画面のスクショ等)は .is-narrow を追加 */ .pcb-fig.is-narrow img{ max-width:420px; margin:0 auto; } /* ---------- もっと深く（経験者向け発見コーナー） ---------- */ .pcb-deep{ border:1px solid var(--pp-ink); border-radius:var(--pp-radius); overflow:hidden; margin:32px 0 8px; } .pcb-deep-head{ display:flex; align-items:baseline; gap:12px; background:var(--pp-ink); color:#fff; padding:12px 20px; } .pcb-deep-head .ttl{ font-size:16px; font-weight:700; } .pcb-deep-head .en{ font-family:var(--pp-mono); font-size:11px; letter-spacing:.12em; color:#bbb; } .pcb-deep-body{padding:6px 20px 20px;} .pcb-deep-body h4{ font-size:16.5px; font-weight:700; color:var(--pp-ink); margin:24px 0 30px; } /* ---------- AdSense 広告枠 ---------- 広告の前後に余白をとり、上に「広告」ラベルを付ける。（ad-slot は partials/ad-*.php が出力する共通ラッパー） */ .pcb-body .ad-slot{ margin:36px 0; } .pcb-body .ad-slot::before{ content:"\5E83\544A"; /* 「広告」。エンコーディング差異による文字化けを防ぐためUnicodeエスケープで記述 */ display:block; text-align:center; font-size:11px; letter-spacing:.2em; color:var(--pp-faint); margin-bottom:8px; } /* ---------- レッスン一覧（index用） ---------- */ .pcb-lessons li{ border-top:1px dotted var(--pp-line-soft); } .pcb-lessons li:first-child{border-top:none;} .pcb-lessons a{ display:flex; align-items:baseline; gap:10px; padding:14px 2px; font-size:16px; color:var(--pp-ink); } .pcb-lessons a:hover{color:var(--pp-brand);} .pcb-lessons a .mk{color:var(--pp-brand);font-size:15px;} .pcb-lessons .soon{ display:flex; align-items:baseline; gap:10px; padding:14px 2px; font-size:16px; color:var(--pp-faint); } .pcb-lessons .soon .mk{color:var(--pp-line);font-size:15px;} .pcb-lessons .tag{ font-family:var(--pp-mono); font-size:11px; letter-spacing:.06em; color:var(--pp-faint); background:var(--pp-deep); border:1px solid var(--pp-line); border-radius:3px; padding:2px 7px; margin-left:auto; white-space:nowrap; } /* ---------- ページ末尾の戻り ---------- */ .pcb-foot-nav{ margin:20px 0 0; font-size:14.5px; } .pcb-foot-nav a{color:var(--pp-sub);} .pcb-foot-nav a:hover{color:var(--pp-brand);} /* ---------- レスポンシブ ---------- */ @media (max-width:640px){ .pcb-body .pp-col-center .pp-panel{padding:20px 16px 24px;} .pcb-talk-bubble{max-width:calc(100% - 72px);} .pcb-talk-face{flex-basis:50px;} .pcb-talk-face img, .pcb-talk-face .q{width:50px;height:50px;} .pcb-talk-face .q{font-size:20px;} .pcb-talk-row.is-teacher .pcb-talk-face{flex-basis:62px;} .pcb-talk-row.is-teacher .pcb-talk-face img{width:62px;height:62px;} .pcb-talk-row.is-teacher .pcb-talk-bubble{max-width:calc(100% - 86px);} .pcb-symbol{gap:12px;} .pcb-symbol .glyph{font-size:32px;} }