:root { /* ── 使う色は5つだけ。増やさないこと ── */ --white: #FFFFFF; /* パネル・濃い面の上の文字 */ --off-white: #F7F7F7; /* ページ地・薄い面・行ホバー */ --text: #111827; /* 文字すべて。濃い面の背景にも使う */ --red: #BA3720; /* ボタン・現在地・PR表記 */ --blue: #0047AB; /* メインカラー。本文中リンク。hero テーマではこの枠に緑が入る（末尾の .theme-hero）*/ /* 塗り面（見出し・パンくず・カテゴリバッジ・ヘッダーCTA・表の見出し行）に使う色。 ここ1行を --text に戻せば全部まとめて黒に戻る。文字色・フッターはこれとは別で常に --text。 */ --main: var(--blue); /* ── 上の5色を混ぜて作った中間色（新しい色みは足していない） ── */ --border: #E2E3E5; /* --text を白地に12%。罫線すべて */ --on-dark-sub: #BCBEC3; /* --white を --text 地に72%。濃い面の上の補足 */ --main-pale: #E0E9F5; /* --blue を白地に12%（--border と同じ作り方）。h2 の地色 */ /* 影だけは透明度が要る（不透明にすると黒い帯になる）ので8桁hex＝#RRGGBBAA で書く */ --shadow-sm: 0 1px 2px #1118270F; --shadow-md: 0 4px 12px #11182724; --shadow-lg: 0 12px 28px #11182738; --line-gradient: linear-gradient(to right, var(--blue) 0%, var(--text) 50%, var(--red) 100%); --header-h: 64px; /* ページの横幅。ヘッダー・パンくず・本文・フッターウィジェット・記事上部の帯が全部これに揃う。 枠がこの幅で、その内側に 16px の余白を取る書き方で統一している（中身の幅は 968px）。 */ --page-w: 1000px; /* 追従ヘッダーの下で止める位置。目次のアンカーとサイドバー広告の両方が使う。 */ --stop-top: calc(var(--sticky-h) + 16px); /* ブロック同士の縦の間隔。ヘッダー→パンくず→本文と、サイドバーのウィジェット同士。 */ --gap: 16px; /* 追従ヘッダー（お知らせバー＋ヘッダー）の高さ。50px はお知らせバーぶん （padding 14px×2 ＋ 中身）。⚠ お知らせバーは .announce-text が nowrap・ .announce-bar が overflow:hidden なので、画面幅が変わっても高さは動かない。 だから JS で測る必要がない＝この1箇所が正本。 */ --sticky-h: calc(var(--header-h) + 50px); } * { box-sizing: border-box; } /* 目次などのアンカーで飛んだ時、追従ヘッダー（お知らせバー＋ヘッダー）の下に見出しが潜らないよう、 その高さぶん手前で止める。高さは :root の --sticky-h（1箇所だけ）。 */ html { scroll-padding-top: var(--stop-top); } body { margin: 0; font-family: -apple-system, "Hiragino Sans", sans-serif; background: var(--off-white); color: var(--text); } a { color: var(--text); text-decoration: none; } svg.ic { width: 16px; height: 16px; flex: none; } /* ページ幅の器。--page-w で中央に置く所をここへまとめた。内側の余白は場所ごとに違うので各セレクタが持つ */ header.site .site-inner, .breadcrumb-wrap, .breadcrumb__inner, .footer-widget__inner, main.has-hero > .layout, .page-hero__inner { max-width: var(--page-w); margin: 0 auto; } /* お知らせバー。クラス名・値とも LIVE PORTAL と同じ（横に流し続ける） */ /* 背景は LIVE PORTAL の .announce-bar と同じグラデーション */ .announce-bar { display: block; overflow: hidden; background-image: linear-gradient(to bottom right, var(--blue) 0%, var(--text) 50%, var(--red) 100%); color: var(--white); padding: 14px 0; font-size: 14px; } .announce-track { display: flex; width: max-content; animation: announce-scroll 60s linear infinite; } /* ⚠ 項目の間隔は gap ではなく margin-right で取る。gap だと 6本に対して隙間が5つしかできず、 全幅 6w+5g に対し translateX(-50%) が 3w+2.5g になって、1周ごとに 0.5g（96px）飛ぶ。 margin-right なら全幅 6(w+g)・移動量 3(w+g) で周期と一致する（LP は gap のままなので展開時に直す）。 */ .announce-text { display: inline-flex; align-items: center; gap: .5rem; margin-right: 12rem; white-space: nowrap; font-weight: 600; letter-spacing: .02em; } .announce-btn { display: inline-block; background: var(--white); color: var(--text); padding: .15rem .75rem; border-radius: 999px; font-size: .7rem; font-weight: 700; line-height: 1.4; } @keyframes announce-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .announce-bar:hover .announce-track { animation-play-state: paused; } @media (prefers-reduced-motion: reduce) { .announce-track { animation: none; } } /* お知らせバーごと追従させる。header.site 自体は静的に戻した */ .site-header-sticky { position: sticky; top: 0; z-index: 100; } /* ヘッダー：左＝ロゴ／右＝メニュー＋区切り線＋ハンバーガー */ header.site { background: var(--white); color: var(--text); box-shadow: var(--shadow-sm); border-bottom: 1px solid var(--border); } header.site .site-inner { padding: 0 16px; display: flex; align-items: center; gap: 4px; height: var(--header-h); } /* サイト名の大きさは**ヘッダーメニューの 1.2 倍**に揃える（2026-08-21 CEO 決定）。 PC＝.gnav__item > a の 14px × 1.2 ＝ 16.8px／狭い画面＝.sp-menu__link の 16px × 1.2 ＝ 19.2px。 ⚠ メニューの文字サイズを変えたら、こちらも 1.2 倍で追随させること。 */ header.site .logo { margin-right: auto; font-size: 16.8px; font-weight: bold; color: var(--text); transition: opacity .2s ease-out, visibility .2s ease-out; } .gnav { align-self: stretch; } .gnav__list { height: 100%; margin: 0; padding: 0; list-style: none; display: flex; } .gnav__item { display: flex; } .gnav__item > a { display: flex; align-items: center; padding: 0 10px; color: var(--text); font-size: 14px; font-weight: bold; transition: color .2s ease-out; } /* 現在地とホバーは同じ見た目：ラベルの下に左から伸びる青→黒→赤の線 */ .gnav__item > a > span { position: relative; display: block; margin-top: 6px; padding-bottom: 6px; } .gnav__item > a > span::after { content: ""; position: absolute; top: 100%; left: 0; width: 100%; height: 2px; background-image: var(--line-gradient); transform: scaleX(0); transform-origin: left center; transition: transform .3s ease-out; } .gnav__item > a:hover > span::after, .gnav__item.is-current > a > span::after { transform: scaleX(1); } /* 右端の CTA。LIVE PORTAL の .site-header__cta と同値だが、min-width:170px は外して ラベル幅ぴったりにしている（CEO 指示・2026-08-14）。 */ .header-cta { display: inline-flex; flex: none; align-items: center; justify-content: center; gap: 6px; margin-left: 12px; padding: 8px 16px; border-radius: 999px; background: var(--main); color: var(--white); font-size: 14px; font-weight: 500; white-space: nowrap; transition: opacity .2s ease-out; } .header-cta:hover { opacity: .88; } /* ヘッダーの検索ボタン。入口だけを置き、キーワード欄と絞り込みは検索ページが持つ。 形は .header-cta と同じ丸だが、塗らずに枠線で置いて CTA より一段弱く見せる。 */ .header-search { display: inline-flex; flex: none; align-items: center; justify-content: center; gap: 6px; margin-left: 12px; padding: 7px 16px; border-radius: 999px; border: 1px solid var(--text); background: var(--white); color: var(--text); font-size: 14px; font-weight: 500; white-space: nowrap; } .header-search:hover { background: var(--off-white); } /* スマホメニュー内は .sp-menu__cta と同じ寸法・同じ影にして、入力欄ではなくボタンに見せる （枠線ぶん padding を1px引いて、塗りボタンと高さを揃える）。 */ .header-search.menu { display: flex; max-width: 320px; margin: 24px auto 0; padding: 13px 16px; box-shadow: var(--shadow-md); } /* ハンバーガー。モバイル幅でだけ出す（→ 下の media query）。開くと同じボタンが × に変わる */ .nav-toggle { display: none; align-items: center; padding: 8px 12px; background: none; border: none; color: var(--text); cursor: pointer; } .nav-toggle__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .nav-toggle__bars { position: relative; display: block; width: 24px; height: 2px; background: currentColor; transition: background .2s ease-out; } .nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; left: 0; width: 100%; height: 2px; background: currentColor; transition: transform .25s ease-out; } .nav-toggle__bars::before { top: -7px; } .nav-toggle__bars::after { top: 7px; } /* 開いている間だけの状態。切り替えは site.js が body へ .is-menu-open を付けるだけ */ body.is-menu-open { overflow: hidden; } /* 全面メニューなので背面はスクロールさせない */ body.is-menu-open .nav-toggle__bars { background: transparent; } body.is-menu-open .nav-toggle__bars::before { transform: translateY(7px) rotate(45deg); } body.is-menu-open .nav-toggle__bars::after { transform: translateY(-7px) rotate(-45deg); } /* モバイル用メニュー：画面全面に出して、ヘッダーと同じ項目を縦1列・中央に並べるだけ */ .sp-menu { display: none; } .sp-menu[hidden] { display: none; } .sp-menu__list { list-style: none; margin: 0; padding: 0; } .sp-menu__link { display: flex; align-items: center; justify-content: center; height: 56px; font-size: 16px; font-weight: bold; color: var(--text); } .sp-menu__item.is-current .sp-menu__link { color: var(--red); } /* メニュー内の CTA。値は LIVE PORTAL の .mobile-nav__cta と同じ */ .sp-menu__cta { display: flex; align-items: center; justify-content: center; gap: 8px; max-width: 320px; margin: 24px auto 0; padding: 14px 16px; border-radius: 999px; background: var(--main); color: var(--white); font-size: 14px; font-weight: 500; box-shadow: var(--shadow-md); } .sp-menu__cta:hover { opacity: .88; } @media (prefers-reduced-motion: reduce) { .gnav__item > a > span::after, .nav-toggle__bars::before, .nav-toggle__bars::after { transition: none; } } /* ブロック同士の縦の間隔は 16px でそろえる（ヘッダー→パンくず＝.breadcrumb-wrap の16px、 パンくず→本文＝ここ、サイドバーのウィジェット同士＝aside.sidebar の gap:16px）。 */ main { max-width: var(--page-w); margin: 0 auto; padding: var(--gap) 16px 100px; } /* ⚠ サイドバーは **332px**。AdSense の 300px ユニットが `.widget`（padding 16px×2）の 内側に収まる最小幅（300 + 32 = 332）。280px だと 52px 足りず、広告側が付ける `margin-left:-32px` と相殺して **768〜1038px で 8〜20px の横スクロール**が出ていた （2026-08-23 CEO 指摘・実測）。⛔ overflow:hidden で切って詰めないこと（AdSense 規約）。 */ .layout { display: grid; grid-template-columns: 1fr 332px; gap: 28px; align-items: start; } /* ⚠ min-width:0 は**本文とサイドバーの両方**に要る。grid の `1fr` は既定で 「中身の最小幅より狭くならない」ため、片方だけだと残りが器を押し広げる。 実害＝AdSense のレスポンシブ広告が `` にインラインで `width:375px; margin-left:-32px` を書き込み、サイドバーの min-content が 375px になる。 すると grid のトラックが 343px→375px に膨らみ、**本文の右余白が消える** （狭い画面では文字が画面端に張り付き、768〜1038px では横スクロールが出る）。 2026-08-23 に CEO 指摘で発見。⛔ 広告側を overflow:hidden で切らないこと（AdSense 規約）。 */ .layout .content, .layout aside.sidebar { min-width: 0; } /* align-self:stretch は下の .widget.ad の追従に要る。.layout の align-items:start のままだと サイドバーの高さが中身なりになり、貼り付ける余地（親の残りの高さ）が無くて動かない。 */ aside.sidebar { display: flex; flex-direction: column; gap: var(--gap); align-self: stretch; } /* サイドバー最後の広告だけ画面に貼り付ける。止め位置は目次のアンカーと同じ --sticky-h 基準。 */ .widget.ad { position: sticky; top: var(--stop-top); } /* パネルの値は LIVE PORTAL の .detail-side__panel--padded と同じ（角丸12px・padding16px・同じ影） */ .widget { background: var(--white); box-shadow: var(--shadow-sm); border-radius: 12px; padding: 16px; } .widget h4 { font-size: 13px; font-weight: bold; margin: 0 0 12px; display: flex; align-items: center; gap: 6px; } .widget ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } /* ①カテゴリ別の記事数。値は LIVE PORTAL の .detail-side__app-link と同じ */ .widget.countlist ul { gap: 4px; } .widget.countlist li a { display: flex; align-items: center; justify-content: space-between; padding: 6px 12px; border-radius: 6px; font-size: 14px; color: var(--text); transition: background-color .15s ease; } .widget.countlist li a:hover { background: var(--off-white); } .widget.countlist .count { flex: none; margin-left: 8px; font-size: 12px; color: var(--text); } /* ②データベースの絞り込み。値は LIVE PORTAL の .detail-side__accordion 一式と同じ */ /* パネル自体は padding を持たない（アコーディオンの行を端まで引くため）。 見出しだけは他のウィジェットと同じ位置・同じ下線になるよう、余白で内側に寄せる。 ⛔ border-bottom / font-size には触らない（触ると見出しのデザインが1つだけ崩れる）。 */ .widget.flush { padding: 0; overflow: hidden; } .widget.flush > h4 { margin: 16px 16px 12px; } .filter__accordion > * + * { border-top: 1px solid var(--border); } .filter__item { padding: 12px 16px; } .filter__summary { display: flex; align-items: center; justify-content: space-between; font-size: 14px; font-weight: 500; color: var(--text); cursor: pointer; list-style: none; } .filter__summary::-webkit-details-marker { display: none; } .filter__summary::marker { content: ""; } .filter__chevron { width: 16px; height: 16px; color: var(--text); flex-shrink: 0; transition: transform .15s ease; } .filter__item[open] .filter__chevron { transform: rotate(180deg); } .filter__body { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; } /* 丸いチップは絞り込みと一覧タブの2つ。形と枠線・文字色は共通で、余白と文字サイズだけ各クラスが持つ */ .tab, .filter__pill { border-radius: 999px; border: 1px solid var(--text); color: var(--text); } .filter__pill { padding: 4px 12px; font-size: 12px; transition: background-color .15s ease, color .15s ease; } .filter__footer { padding: 12px 16px; border-top: 1px solid var(--border); } .filter__footer-link { display: block; text-align: center; font-size: 12px; font-weight: 500; color: var(--blue); } .filter__footer-link:hover { text-decoration: underline; } /* ③新着のまとめ */ .widget.latest li a { display: block; font-size: 13px; line-height: 1.5; } .widget.latest li a:hover .latest__title { text-decoration: underline; } .latest__title { display: block; font-weight: 500; color: var(--text); } .latest__date { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; font-size: 11px; color: var(--text); } /* ④広告。ラベルの値は LIVE PORTAL の .detail-side__ad-label と同じ */ .ad__label { margin: 0 0 8px; font-size: 10px; color: var(--text); text-align: center; letter-spacing: .1em; text-transform: uppercase; } /* 中身が未実装の枠を示す破線ボックス。広告枠とフッターウィジェット枠で共用する */ .placeholder { text-align: center; color: var(--text); font-size: 12px; background: var(--off-white); border: 1px dashed var(--border); border-radius: 6px; padding: 40px 16px; } h1.page-title { font-size: 22px; font-weight: bold; margin-bottom: 20px; } /* データベース：横長テキストリンク一覧 */ .db-block-list { background: var(--white); border-radius: 12px; box-shadow: var(--shadow-sm); overflow: hidden; } .db-block { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-bottom: 1px solid var(--border); } .db-block:last-child { border-bottom: none; } .db-block:hover { background: var(--off-white); } /* 日付はカテゴリの左。幅を固定して、タイトルの開始位置を行ごとに揃える */ .db-block .meta-date { flex: none; width: 92px; font-size: 12px; color: var(--text); white-space: nowrap; } /* 幅は実カテゴリ名の最長（「メディア立ち上げ・制作」）が1行に収まる値。 折り返すとタイトルの開始位置が行ごとにずれるので nowrap で固定する。 */ /* 幅はサイトごとに自動計算（--cat-w）。全CMSで一番長いラベルに合わせると、 短いラベルのサイトで無駄に広くなるため（2026-08-20 CEO 指示）。 */ .db-block__cat { flex: none; width: var(--cat-w, 150px); text-align: center; white-space: nowrap; padding: 4px 6px; border-radius: 6px; } /* タイトルは折り返さず、はみ出したら「…」で省略する。 ⚠ flex 子要素は既定が min-width:auto で縮まないため、min-width:0 が要る（無いと省略が効かない）。 */ .db-block h3 { flex: 1; min-width: 0; margin: 0; font-size: 15px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 狭い画面は「日付＋カテゴリ」／「タイトル＋シェブロン」の2段に折る（横1列だとタイトルが3行に割れる） */ .db-block .ic { flex: none; color: var(--text); } /* 正方形画像＋タイトル＋カテゴリのカード一覧 */ .db-card-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 24px; } .db-card { display: flex; gap: 14px; background: var(--white); border-radius: 16px; padding: 14px; overflow: hidden; transition: box-shadow .2s, transform .2s; } .db-card:hover, .card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } /* 一覧の絵柄。card デザインは本文の横に置く正方形、text デザインはタイトル上の帯。 置き方だけが違うので、地色と中身の収め方は 1 か所にまとめてある。 */ .db-card__img, .card__img { display: flex; align-items: center; justify-content: center; overflow: hidden; color: var(--text); } /* 白いカードの上に載るので --off-white で灰色に見える */ .db-card__img { flex: none; width: 88px; aspect-ratio: 1; border-radius: 12px; background: var(--off-white); } /* こちらはページ地（--off-white）と接するため、同色だと消える。1段濃い --border を使う。 .card 側が overflow:hidden なので、帯の上角は親の角丸で切られる */ /* 比率は 1200×630（OGP画像と同じ）。将来アイキャッチ画像を入れても切れない */ .card__img { aspect-ratio: 1200 / 630; background: var(--border); } .db-card__img .ic { width: 34px; height: 34px; } .card__img .ic { width: 40px; height: 40px; } /* 帯は面積が広いので少し大きく */ .db-card__img img, .card__img img, .detail-author__avatar img { width: 100%; height: 100%; object-fit: cover; } .db-card__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; justify-content: center; } /* 文字サイズは行が持つ（.card__meta-row と同じ持たせ方）。日付はバッジではないので pill 指定を当てない */ .db-card__tags { display: flex; flex-wrap: wrap; gap: 6px; font-size: 12px; } .db-card h3, .card__body h3 { margin: 0; font-size: 15px; font-weight: bold; color: var(--text); } .tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; } .tab { padding: 6px 16px; background: var(--white); font-size: 13px; font-weight: 500; transition: background .15s, color .15s; } .tab:hover { background: var(--off-white); } /* コラム／まとめ：lism-css Works002 風カードグリッド（https://lism-css.com/patterns/works/works002 を再現） */ .card-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .card { display: block; background: var(--white); border-radius: 20px; overflow: hidden; transition: box-shadow .2s, transform .2s; } .card__body { padding: 26px; display: flex; flex-direction: column; gap: 10px; } .card__meta-row { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--text); } /* 抜粋（excerpt デザイン）。長さは PHP 側で50文字に切っているので、ここでは行間だけ整える */ .card__excerpt { margin: 0; font-size: 13px; line-height: 1.7; color: var(--text); } /* 日付。コンテナ指定を外して「1クラス＝1つの見た目」にした（一覧3種と詳細で共用するため） */ .meta-date { display: inline-flex; align-items: center; gap: 5px; } .pager { display: flex; justify-content: center; gap: 8px; margin-top: 28px; } .pager a, .pager span { display: inline-block; padding: 6px 12px; border: 1px solid var(--text); border-radius: 4px; background: var(--white); color: var(--text); font-size: 13px; } .pager .ellipsis { border: none; background: none; padding: 6px 4px; } .breadcrumb-wrap { padding: var(--gap) 16px 0; } /* ⚠ ここだけメインカラーに合わせず黒のまま（CEO 指示・2026-08-15） */ .breadcrumb-bar { background: var(--text); color: var(--white); padding: 10px 16px; font-size: 12px; border-radius: 8px; display: flex; align-items: center; gap: 8px; overflow-x: auto; white-space: nowrap; } .breadcrumb-bar a { color: var(--white); flex: none; } .breadcrumb-bar a:hover { text-decoration: underline; } .breadcrumb-bar span { color: var(--on-dark-sub); flex: none; } .detail-body { background: var(--white); box-shadow: var(--shadow-sm); border-radius: 8px; padding: 24px; line-height: 1.9; } /* 本文の見出し。コンテナ指定を外して1クラス＝1つの見た目にした（LIVE PORTAL・うちなーまっぷと同じ命名／2026-08-10）。 カード見出し（.db-card h3・.card__body h3）は役割が違うのでクラスを付けない。 */ /* h2 は塗り。バッジと同じく「黒地に白文字」で、見出しの中で一番強い扱いにする */ /* h2 の地色はメインカラーを薄めたもの。地が明るいので文字は --text（白のままだと読めない） */ .content-h2 { font-size: 20px; font-weight: 700; color: var(--text); background: var(--main-pale); margin: 40px 0 16px; padding: 10px 16px; } /* 左の縦棒は塗り面なので --main（h2 の地色と同じ系統）。文字色だけ --text のまま。 */ .content-h3 { font-size: 16px; font-weight: 700; color: var(--text); border-left: 3px solid var(--main); padding: 2px 0 2px 14px; margin: 32px 0 12px; } .content-h4 { font-size: 14px; font-weight: 700; color: var(--text); margin: 24px 0 8px; } /* 見出しは .detail-body の 1.9 を引き継ぐと行間が開きすぎる（2行以上で特に目立つ）。見出しだけ詰める */ h1.page-title, .content-h2, .content-h3, .content-h4, .db-block h3 { line-height: 1.5; } /* 本文の箇条書き・強調・インラインリンク。値は LIVE PORTAL の .article-body と同じ */ .detail-body ul, .detail-body ol { margin: .5rem 0 1rem; padding-left: 1.5rem; } .detail-body ul { list-style: disc; } .detail-body ol { list-style: decimal; } .detail-body li { margin-bottom: .35rem; } .detail-body strong { font-weight: 700; color: var(--text); } /* 構造リンク（カード・関連リスト）まで下線化しないよう、段落とリストの中に限定 */ /* ⚠ ボタンは除外する。含めると詳細度で勝ってしまい、あとから色を上書きする層が要る */ /* 本文中のリンクは**メインカラー・太字・下線**で統一する（2026-08-20 CEO 指示）。 p / li だけだと表のセルや引用の中のリンクが素のままになり、同じ本文なのに見た目が揃わない。 ⛔ .cta-button（大きなボタン）とバナー枠の中は対象外＝親が div / span なのでここには当たらない。 */ .detail-body p a:not(.cta-button), .detail-body li a:not(.cta-button), .detail-body td a, .detail-body th a, .detail-body blockquote a, .toc-box a { color: var(--main); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; } .detail-body p a:not(.cta-button):hover, .detail-body li a:not(.cta-button):hover, .detail-body td a:hover, .detail-body th a:hover, .detail-body blockquote a:hover, .toc-box a:hover { opacity: .75; } /* 本文に埋め込むボタン。⚠ class="cta-button" は DB の記事本文に焼き込まれているので名前は変えない。 幅75%・中央寄せ・全周丸め、右端に丸囲みの矢印（矢印は本文HTMLに無いので ::after で足す）。 */ /* em だと親の文字サイズで余白が変わる。ここだけ他と単位が違ったので px に揃えた */ .cta-wrap { margin: 28px 0; text-align: center; } .cta-button { position: relative; /* 矢印を右端に固定して、文字だけを中央に置くため */ display: flex; width: 75%; margin: 0 auto; align-items: center; justify-content: center; padding: 15px 48px; border-radius: 999px; background: var(--red); color: var(--white); font-size: 1rem; font-weight: 700; text-decoration: none; letter-spacing: .05em; box-shadow: var(--shadow-md); } /* mask なので currentColor に追従する（文字色を変えれば矢印も変わる） */ .cta-button::after { content: ""; position: absolute; top: 50%; right: 20px; transform: translateY(-50%); width: 24px; height: 24px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M10.5 8.5l3.5 3.5-3.5 3.5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M10.5 8.5l3.5 3.5-3.5 3.5'/%3E%3C/svg%3E") center / contain no-repeat; } /* 記事下の「◯◯の記事一覧」。形は本文中のボタンと同じで、色だけ白背景・黒文字・黒枠 （CPU の命名どおり修飾子は使わず1語クラスを併記）。 */ .cta-button.outline { background: var(--white); color: var(--text); border: 2px solid var(--text); box-shadow: none; } .meta-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 13px; color: var(--text); margin-bottom: 16px; } .meta-bar .meta-date .ic { width: 14px; height: 14px; flex: none; } /* 広告表記は見落とされてはいけないので、5色のうち一番強い赤を当てる */ .pr-badge { background: var(--red); color: var(--white); } /* バッジは「塗り」と「白抜き」の2種だけ。別名で同じ宣言を繰り返さない */ .meta-cat, .meta-tag, .db-card__cat, .pr-badge { font-size: 12px; padding: 3px 12px; border-radius: 999px; } /* 小さい方の2つ。文字は同じ 11px の太字（余白と角丸は置き場所で違うので各クラスが持つ） */ .card__cat, .db-block__cat { font-size: 11px; font-weight: bold; } .card__cat { padding: 3px 10px; border-radius: 999px; } .meta-cat, .db-card__tags .db-card__cat, .card__cat, .db-block__cat, .tab.is-current, .pager .current, .filter__pill:hover { background: var(--main); color: var(--white); } .meta-tag { background: var(--white); color: var(--text); border: 1px solid var(--text); } .meta-cat:hover, .meta-tag:hover { opacity: .75; } /* 本文の締めくくり。カテゴリとタグを横一列に並べる（meta-bar から降ろした） */ .post-terms { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 24px; padding-top: 20px; border-top: 1px solid var(--border); } .post-terms .ic { width: 15px; height: 15px; } .post-terms a + .ic { margin-left: 16px; } /* カテゴリ組とタグ組の間だけ空ける */ /* 執筆者情報（A案）。左に頭文字のアバター、右に名前と説明を横並びで置く */ .detail-author { display: flex; align-items: flex-start; gap: 16px; background: var(--white); border-radius: 12px; padding: 20px; margin-bottom: 24px; } .detail-author__avatar { flex: none; width: 56px; height: 56px; border-radius: 50%; overflow: hidden; background: var(--text); color: var(--white); display: flex; align-items: center; justify-content: center; } .detail-author__avatar .ic { width: 26px; height: 26px; } .detail-author__body { min-width: 0; } /* flex 子要素が縮めるように */ .detail-author__label { font-size: 11px; letter-spacing: .08em; margin: 0 0 4px; } .detail-author .content-h4 { font-size: 16px; margin: 0 0 8px; } .detail-author__desc { font-size: 14px; line-height: 1.7; margin: 0 0 10px; } .detail-author__links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; font-size: 13px; } /* 黒文字・下線なし。リンクだと分かる手掛かりはアイコンが持つ */ .detail-author__link { display: inline-flex; align-items: center; gap: 6px; color: var(--text); text-decoration: none; word-break: break-all; } .detail-author__link:hover { opacity: .7; } .detail-author__link .ic { width: 14px; height: 14px; } /* 本文中の広告枠。中身（ラベル＋枠）はサイドバーの .widget.ad と同じ部品を使う */ .ad-slot { margin-bottom: 24px; } /* 目次下・本文中の枠は本文の流れに入るので、記事下より余白を詰めて上下対称にする */ .ad-slot.toc { margin: 0 0 28px; } .ad-slot.inline { margin: 28px 0; } /* コラム／まとめ詳細 */ .toc-box { background: var(--off-white); border-radius: 8px; padding: 24px; margin-bottom: 32px; } /* 目次の頭は「見出し」ではなく枠の名前なので h タグを使わない（h1 の直後に h4 が来る階層の飛びも消える）。 */ .toc-box__label { margin: 0 0 16px; font-size: 14px; color: var(--text); font-weight: bold; } .toc-box ul { margin: 0; padding-left: 20px; font-size: 14px; color: var(--text); } /* 本文へ飛ぶリンク。普段は画面外、フォーカス時だけ左上に出す（見た目を邪魔しない）。 */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 1000; background: var(--main); color: #fff; padding: 10px 16px; border-radius: 0 0 6px 0; font-weight: 700; } .skip-link:focus { left: 0; } .toc-box li { margin-bottom: 8px; } .toc-box__item--h3 { margin-left: 20px; list-style-type: circle; } /* 中見出し。h2 より一段下げる */ .toc-box ul:empty { display: none; } /* H3を持たない項目の空リストを出さない */ /* safe_html() が通すのに見た目が決まっていなかったタグ。本文の中で浮かないよう最低限を与える。 ⚠ img の max-width が無いと、幅の広い画像が本文カラムからはみ出す（記事に画像が入った時点で崩れる）。 */ .detail-body img { max-width: 100%; height: auto; border-radius: 8px; } .detail-body blockquote { margin: 0 0 1rem; padding: 4px 0 4px 16px; border-left: 3px solid var(--border); } .detail-body pre { margin: 0 0 1rem; padding: 16px; background: var(--off-white); border: 1px solid var(--border); border-radius: 8px; overflow-x: auto; font-size: 13px; line-height: 1.7; } .detail-body :not(pre) > code { padding: 1px 6px; background: var(--off-white); border: 1px solid var(--border); border-radius: 4px; font-size: .9em; } .detail-body pre code { padding: 0; background: none; border: 0; font-size: inherit; } .detail-body hr { margin: 32px 0; border: 0; border-top: 1px solid var(--border); } /* 表は狭い画面ではみ出すので、**表そのものを横スクロールの器**にする。 safe_html() は div を落とすので本文に器を作れない。table を display:block にすると 中の行が anonymous table box になり、はみ出したぶんだけ表の中だけがスクロールする （min-width で 520px を強制すると、ページ全体に横スクロールが出てしまう）。 */ /* 表は器（.table-scroll）に入れて、はみ出したぶんだけ器の中を横スクロールさせる。 ⛔ table 自身を display:block にして代用しない。中の thead / tbody が内容ぶんの幅しか 取らないので、**見出しの帯が途中で切れる**（2026-08-21 に発生）。器は wrap_tables() が付ける。 */ .detail-body .table-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 16px; } .detail-body table { width: 100%; border-collapse: collapse; font-size: 14px; } .detail-body table th, .detail-body table td { padding: 10px 14px; text-align: left; white-space: nowrap; } .detail-body table th { background: var(--main); color: var(--white); font-weight: bold; } .detail-body table td:first-child { background: var(--off-white); color: var(--text); font-weight: bold; } /* ログイン画面（/login/・/logout/）の見た目は login.css が持つ。公開ページと1枚も共有しないので ここには置かない（チャット専用を parts.css に切ったのと同じ理由）。 */ /* フッターウィジェットは