/* ============================================================= blog.html（一覧）と blog-single.html（詳細） 下層ページ共通は page.css、トークンは style.css を前提にする。 カード（.card）は style.css のものをそのまま使う。 ============================================================= */ /* トップの背景写真。page.css の .page-head::before が var(--head-bg) を読む。 url() の相対パスは「使う側の CSS ファイル」基準で解決されるので、 HTML のインライン style ではなく必ず CSS ファイル側で指定すること。 2026-09-14：写真（img_blog-hero）が入ったので、それまでの「写真が無い前提」の 指定（--head-bg: none / --head-min: auto / ::before の display:none / 1100px・767px での --band 打ち消し）をまとめて外し、他の8ページと同じ型にした。 高さの下限（page.css の 560px）・スマホの写真帯・上そろえは page.css 側から効く。 */ .page-head { --head-bg: url("../images/img_blog-hero.webp"); /* このページだけ上下センター基準。他は「画像の上から N px 下」を枠の上端に合わせる 固定値（既定 -100px / service は -180px）だが、blog は枠の高さが変わっても 絵の真ん中が残るようにする。 */ --head-y: center; } /* 記事の見出しと本文（一覧では絞り込み）は続きもの。 style.css の .sec が上に150px持っているので、ここだけ詰める。 */ .page-head + .sec { padding-top: 56px; } /* ------------------------------------------------------------- 一覧：カテゴリの絞り込み ------------------------------------------------------------- */ .bl-filter { display: flex; flex-wrap: wrap; gap: 10px; padding-bottom: 40px; border-bottom: 1px solid var(--line); } .bl-chip { padding: 11px 22px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); font-family: var(--f-en); font-size: 16px; font-weight: 700; letter-spacing: .06em; color: var(--ink-500); transition: background-color .25s ease, color .25s ease, border-color .25s ease; } .bl-chip:hover { border-color: var(--hp-sky); color: var(--ink-900); } .bl-chip.is-on { background: var(--hp-sky); border-color: var(--hp-sky); color: #fff; } /* ------------------------------------------------------------- 一覧：カードの並び ------------------------------------------------------------- */ .bl-grid { margin-top: 48px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; /* 2026-09-14：カードの3D傾きを削除したので perspective も外した */ } .bl-grid .card[hidden] { display: none; } .bl-empty { margin-top: 60px; text-align: center; font-size: 16px; color: var(--ink-300); } /* ------------------------------------------------------------- 一覧：ページ送り ------------------------------------------------------------- */ .bl-pager { margin-top: 72px; display: flex; justify-content: center; align-items: center; gap: 10px; } .bl-pager > * { display: grid; place-items: center; min-width: 46px; height: 46px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; font-family: var(--f-en); font-size: 16px; font-weight: 700; color: var(--ink-500); } .bl-pager .is-now { background: var(--ink-900); border-color: var(--ink-900); color: #fff; } .bl-pager a:hover { border-color: var(--hp-sky); color: var(--ink-900); } .bl-pager .bl-next { display: inline-flex; gap: 12px; } .bl-pager .arw { display: inline-grid; place-items: center; } .bl-pager .arw-i { width: 7px; height: 12px; fill: currentColor; } /* 静的なので2ページ目以降はまだ無い。押せないことを見た目でも示す */ .bl-pager [aria-disabled="true"] { opacity: .4; pointer-events: none; } /* display:flex を持っているので、hidden 属性だけでは消えない（作者スタイルが ブラウザ標準の [hidden]{display:none} に勝つ）。絞り込み中に JS が隠す */ .bl-pager[hidden] { display: none; } /* ------------------------------------------------------------- 一覧：右カラム 箱の型（.bl-layout / .bl-side / .bl-side-box）は詳細ページと共用。 見た目を統一するため、ここでは新しい型を足さず中身だけを定義する。 ------------------------------------------------------------- */ /* 右カラム 280px ぶん本文が狭くなるので、カードは 3列 → 2列。 .inner が上限（--page 1600px）まで開いたとき、本文は 1600 − 280 − gap72 = 1248px。カードは 2列で 609px、3列だと 396px。 右カラムを付けたうえで3列にすると、元の3列（513px）より細くなって割に合わない */ .bl-main .bl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* --- 検索 --- */ .bl-search { position: relative; margin-top: 16px; } /* 見出しを置かない箱（検索）。上の余白は箱の間隔だけで足りる */ .bl-side-search .bl-search { margin-top: 0; } .bl-search input { width: 100%; height: 46px; /* .bl-pager の粒と同じ高さ */ padding: 0 66px 0 20px; /* 右は虫めがね＋×のぶん空ける */ border: 1px solid var(--line); border-radius: 999px; /* .bl-chip / .bl-pager と同じ丸み */ background: var(--paper); font-family: var(--f-jp); font-size: 16px; color: var(--ink-900); transition: border-color .25s ease, box-shadow .25s ease; } .bl-search input::placeholder { color: var(--ink-300); } .bl-search input:focus { outline: 0; border-color: var(--hp-sky); box-shadow: 0 0 0 3px color-mix(in srgb, var(--hp-sky) 14%, transparent); } /* 検索欄の「×」を消して、自前のボタンに置き換える（見た目をブラウザに任せない） */ .bl-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; } .bl-search-ic { position: absolute; right: 18px; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 18px; height: 18px; pointer-events: none; } .bl-search-ic svg { width: 18px; height: 18px; fill: none; stroke: var(--ink-300); stroke-width: 1.7; stroke-linecap: round; transition: stroke .25s ease; } .bl-search input:focus ~ .bl-search-ic svg { stroke: var(--hp-sky); } .bl-search-clear { position: absolute; right: 44px; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 20px; height: 20px; border: 0; border-radius: 50%; background: var(--ghost); font-size: 14px; line-height: 1; color: var(--ink-500); cursor: pointer; transition: background-color .2s ease, color .2s ease; } .bl-search-clear:hover { background: var(--ink-300); color: #fff; } /* .bl-pager と同じ理由。display:grid が [hidden] に勝ってしまう */ .bl-search-clear[hidden] { display: none; } /* --- 人気記事 --- */ /* 順位の出し方は詳細ページの目次（.bl-toc）と同じ decimal-leading-zero。 数字だけ空色にして、見出し・日付との強弱を目次とそろえる */ .bl-pop { margin-top: 18px; counter-reset: pop; } .bl-pop li { counter-increment: pop; } .bl-pop li + li { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line-soft); } .bl-pop a { display: flex; align-items: flex-start; gap: 12px; } .bl-pop-th { position: relative; flex: none; width: 64px; height: 64px; border-radius: 14px; overflow: hidden; background: var(--ghost); } .bl-pop-th img { width: 100%; height: 100%; object-fit: cover; transition: scale .5s cubic-bezier(.22,.7,.28,1); } /* 順位はサムネの左上に重ねる。数字だけの列を作らずに済み、幅を稼げる */ .bl-pop-th::after { content: counter(pop, decimal-leading-zero); position: absolute; left: 0; top: 0; padding: 3px 7px 4px; border-radius: 14px 0 10px 0; background: var(--hp-sky); font-family: var(--f-mono); font-size: 14px; font-weight: 500; letter-spacing: .04em; color: #fff; } .bl-pop a:hover .bl-pop-th img { scale: 1.06; } .bl-pop-tx { display: block; padding-top: 1px; } .bl-pop-ttl { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; font-size: 16px; font-weight: 700; line-height: 1.7; color: var(--ink-700); transition: color .2s ease; } .bl-pop a:hover .bl-pop-ttl { color: var(--hp-sky); } .bl-pop-meta { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-family: var(--f-mono); font-size: 14px; letter-spacing: .04em; color: var(--ink-300); } /* ------------------------------------------------------------- 詳細：記事のカード 見出しを別セクション（.page-head）に切り出していたのをやめ、見出しから 本文までを1枚のカードに収めた。切り出していたときは、見出しが .inner の 左端（60px）、本文はカラムの中で中央寄せ（187px）と、127px ずれていた。 ------------------------------------------------------------- */ .bl-single { padding: 44px 0 120px; } /* 地色は page.css の `main > section:nth-of-type(odd) { background: var(--paper) }` （詳細度 0,1,1）と競合する。クラスだけ（0,1,0）では負けるので、 同じ形にそろえて後勝ちにする */ main > section.bl-single { background: var(--cream-2); } /* 白いカードを浮かせる地色 */ .bl-single .crumb { width: 100%; max-width: 1172px; /* 記事820px + gap72px + 右カラム280px */ margin: 0 auto 24px; } /* 記事セクションを cream-2 にしたぶん、次のセクション（関連記事）は白に。 nth-of-type の交互だと、.page-head を外した影響で両方 cream-2 になる */ .bl-single + .sec { background: var(--paper); } .bl-card { padding: 56px 60px 64px; background: var(--paper); border: 1px solid rgba(28,64,94,.08); border-radius: var(--r-card); box-shadow: 0 22px 70px rgba(32,66,98,.08); } /* --- カード先頭：日付・タイトル・リード・書き手 --- */ .bl-art-head { position: relative; padding: 10px 0 34px; border-bottom: 1px solid var(--line); } .bl-art-head::before { content: "JOURNAL / INSIGHT"; display: block; margin-bottom: 20px; font-family: var(--f-mono); font-size: 11px; font-weight: 700; letter-spacing: .16em; color: var(--hp-sky); } .bl-art-head h1 { margin-top: 16px; font-size: clamp(28px, 2.4vw, 39px); font-weight: 800; line-height: 1.48; letter-spacing: 0; color: var(--ink-900); } /* 書き手とカテゴリを1行に。左に人、右にカテゴリ */ .bl-by { margin-top: 28px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .bl-by-who { display: inline-flex; align-items: center; gap: 12px; } .bl-by-face { width: 42px; height: 42px; border-radius: 50%; object-fit: contain; background: var(--ghost); padding: 5px; } .bl-by-name { font-size: 16px; font-weight: 700; color: var(--ink-900); transition: color .2s ease; } .bl-by-who:hover .bl-by-name { color: var(--hp-sky); } /* --- 記事末：SNSシェア --- */ /* 粒は .bl-chip / .bl-pager と同じ丸ピル。色はホバー時だけ各サービスのブランド色 （--b）に寄せ、平常時は他の部品と同じ線と墨色にしてページの色数を増やさない */ .bl-share { margin-top: 64px; padding-top: 36px; border-top: 1px solid var(--line); text-align: center; } .bl-share-ttl { font-size: 16px; font-weight: 700; color: var(--ink-500); } .bl-share-list { margin-top: 16px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } /* 本文用の箇条書きスタイル（.bl-article ul > li：左に丸・padding 24px・行間 10px）が このリストにも掛かる。祖先を1つ足して（0,2,1）打ち消す */ .bl-article .bl-share-list > li { padding: 0; margin: 0; } .bl-article .bl-share-list > li::before { display: none; } .bl-share-btn { --b: var(--ink-900); display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); font-family: var(--f-jp); font-size: 16px; font-weight: 700; letter-spacing: .02em; color: var(--ink-700); cursor: pointer; transition: color .25s ease, border-color .25s ease, background-color .25s ease, transform .25s cubic-bezier(.3,0,.2,1); } .bl-share-btn svg { width: 16px; height: 16px; flex: none; fill: currentColor; } .bl-share-btn:hover { color: var(--b); border-color: var(--b); transform: translateY(-2px); } .bl-share-btn.is-fb { --b: #1877f2; } .bl-share-btn.is-line { --b: #06c755; } .bl-share-btn.is-copy, .bl-share-btn.is-more { --b: var(--hp-sky); } .bl-share-btn.is-done { color: #fff; background: var(--hp-sky); border-color: var(--hp-sky); } /* --- 記事末：この記事を書いた人 --- */ .bl-writer { margin-top: 72px; padding-top: 40px; border-top: 1px solid var(--line); } /* 本文の h2（左に青い縦線）とは別物。目次にも入れない（main.js 側で除外）。 `.bl-article h2` はこの下（本文のブロック）で定義されていて詳細度が同じ 0,1,1 なので、後勝ちで負ける。祖先を1つ足して 0,2,1 にして勝たせる */ .bl-article .bl-writer h2 { margin-top: 0; padding: 0; border: 0; font-size: 16px; font-weight: 800; letter-spacing: .06em; color: var(--ink-500); } .bl-writer-in { margin-top: 24px; display: flex; align-items: flex-start; gap: 26px; } .bl-writer-face { flex: none; width: 104px; height: 104px; border-radius: 50%; object-fit: contain; background: var(--ghost); padding: 14px; } .bl-writer-name { font-size: 18px; font-weight: 800; color: var(--ink-900); } .bl-writer-bio { margin-top: 12px; font-size: 16px; line-height: 1.95; color: var(--ink-500); } .bl-writer-more { margin-top: 16px; text-align: right; } .bl-writer-more a { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 700; color: var(--hp-sky); } .bl-writer-more .arw-i { width: 7px; height: 12px; fill: currentColor; } /* 本文を18pxに上げたぶん、リードも上げて強弱を保つ。 ヘッダー（日付・タイトル・書き手）の外に出したので、区切り線とアイキャッチの 両側に余白を持たせる。上下を header の padding-bottom(34px) にそろえた */ .bl-lead { margin: 34px 0 40px; font-size: 19px; line-height: 2; color: var(--ink-800); } /* 読了時間。日付と同じ粒として .card-meta の中に並べる */ .bl-read { font-family: var(--f-mono); font-size: 14px; letter-spacing: .04em; color: var(--ink-300); } .bl-read::before { content: "·"; margin-right: 10px; } /* 読書の進捗。記事本文のどこまで来たかだけを示す。 ヘッダー（z-index 100）の上に出す */ .bl-prog { position: fixed; inset: 0 0 auto; z-index: 101; height: 3px; pointer-events: none; } .bl-prog span { display: block; height: 100%; width: 0; background: var(--signal); /* ブランド色の虹。ロゴと同じ並び */ transform-origin: 0 50%; } @media (prefers-reduced-motion: reduce) { .bl-prog { display: none; } } /* ------------------------------------------------------------- 詳細：本文と横の目次 ------------------------------------------------------------- */ .bl-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 72px; align-items: start; } /* 記事ページだけ、本文の幅にカラムを合わせて全体を中央に置く。 1fr のままだと、.inner が上限まで開いたときカラムは 1248px あるのに本文は 700px で止まり、あいだに 470px の空白ができる（＝右カラムだけが遠くに離れる）。 実測：1920px で「本文の右端〜右カラムの左端」が 540px 空いていた */ .bl-layout.is-article { /* 700px はカードの「中身」の幅。カードの左右余白 60px×2 を足した 820px を カラム幅にする。ここを 700px にすると本文が 580px＝34字まで細る */ grid-template-columns: minmax(0, 820px) 280px; justify-content: center; } /* 長文の版面。日本語は1行 35〜45字が読みやすいとされる範囲で、 16px × 780px = 49字 とはみ出していた。18px × 700px で 38字。 行の高さ 2.15 はそのまま（18px なら 38.7px）*/ .bl-article { /* width を明示しないと、1カラム時の margin-inline:auto で「中身の最小幅」に 縮んでしまう。表（min-width 560px）＋余白 44px ＝ 604px に固定され、 375px の画面から 240px はみ出していた（2026-09-05 に発見）。 100% にすれば、幅は親（＝画面）で決まり、max-width が上限になる */ width: 100%; max-width: 820px; /* 中身 700px ＋ カードの左右余白 60px×2 */ font-size: 18px; line-height: 2.15; color: var(--ink-800); } .bl-article > .ph { margin-bottom: 48px; } /* 段落・リスト・引用・表のあいだは、どの並びでも同じ間隔を空ける */ .bl-article p + p, .bl-article ul + p, .bl-article blockquote + p, .bl-article .bl-table-wrap + p, .bl-article p + ul { margin-top: 24px; } .bl-article b { color: var(--ink-1000); font-weight: 700; } /* 本文中のリンク。サイト全体は a { color: inherit } なので、そのままだと 本文に埋もれてリンクだと分からない。記事の中だけ空色＋下線にする （記事末のCTAと書き手プロフィールのボタン類は対象外） */ .bl-article p > a:not(.btn):not(.d-btn) { color: var(--hp-sky); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: color-mix(in srgb, var(--hp-sky) 40%, transparent); transition: text-decoration-color .2s ease; } .bl-article p > a:not(.btn):not(.d-btn):hover { text-decoration-color: var(--hp-sky); } .bl-article h2 { margin-top: 80px; padding: 22px 0 17px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line-soft); font-size: 24px; font-weight: 800; line-height: 1.55; letter-spacing: 0; color: var(--ink-900); scroll-margin-top: 140px; } .bl-article h2 + p, .bl-article h2 + ul, .bl-article h2 + .bl-table-wrap { margin-top: 24px; } .bl-article ul { margin-top: 20px; } .bl-article ul > li { position: relative; padding-left: 24px; } .bl-article ul > li + li { margin-top: 10px; } .bl-article ul > li::before { content: ""; position: absolute; left: 4px; top: 15px; width: 8px; height: 8px; border-radius: 50%; background: color-mix(in srgb, var(--hp-sky) 30%, transparent); box-shadow: inset 0 0 0 2px var(--hp-sky); } .bl-article blockquote { margin-top: 32px; padding: 28px 32px; background: var(--cream-2); border-radius: 16px; } .bl-article blockquote p { font-size: 16px; font-weight: 700; color: var(--ink-900); } /* 表。狭い画面では横に逃がす */ .bl-table-wrap { margin-top: 28px; overflow-x: auto; } .bl-article table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 16px; } .bl-article th, .bl-article td { padding: 14px 16px; border-bottom: 1px solid var(--line); text-align: left; line-height: 1.8; } .bl-article th { background: var(--ghost); font-weight: 700; color: var(--ink-900); } /* 記事末のCTA。Q&A系の記事にだけ置く */ .bl-cta { margin-top: 72px; padding: 48px 44px 52px; background: var(--cream-2); border-radius: var(--r-card); text-align: center; } .bl-cta h2 { margin-top: 0; padding: 0; border: 0; font-size: 21px; line-height: 1.6; } .bl-cta p { margin-top: 18px; font-size: 16px; } .bl-cta .s-btn { margin-top: 30px; opacity: 1; transform: none; } /* --- 右カラム --- */ /* 中身が画面より高いと、上端が 140px で固定されたあと、下のほうは画面外に 出たまま二度と見られない（実測：一覧 1086px・記事 1050px に対し、 ノートPCの表示領域は 700〜800px）。中だけスクロールさせて全部たどれるようにする。 スクロールバーは出さない（右カラムに縦線が入るとカードと喧嘩する）。 */ .bl-side { position: sticky; top: 140px; max-height: calc(100vh - 170px); overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain; /* 端まで来てもページ側にスクロールを渡さない */ } .bl-side::-webkit-scrollbar { display: none; } /* 内側スクロールを持たせたことで、枠の外にはみ出したボックスは画面に一度も 入らず、.reveal（スクロールで現れる演出）が永久に発火しない。 実測：画面の高さ 700px で「人気記事」が opacity:0 のままだった。 右カラムは読み物ではなく道具なので、ここだけ演出を切る。 style.css の `.sec-head.reveal` と同じ扱い。 */ .bl-side .reveal { opacity: 1; transform: none; filter: none; } /* 2026-09-14：右カラムの見せ方。 一度3つを白いパネルに入れたが、よくある WordPress のサイドバーになったのでやめた。 箱で囲わず、罫線と字組みだけで見せる。トップや下層ページと同じ 「英字の小ラベル ＋ 和文」の見出しに揃え、余白で間を取る。 */ .bl-side-box + .bl-side-box { margin-top: 48px; } .bl-side-toc { padding: 24px 22px 26px; border: 1px solid rgba(49,113,164,.14); border-radius: 18px; background: rgba(255,255,255,.78); box-shadow: 0 18px 44px rgba(33,67,98,.06); } .bl-side-box h2 { padding-bottom: 14px; border-bottom: 1px solid var(--line); font-size: 16px; font-weight: 800; letter-spacing: .1em; color: var(--ink-900); } /* 英字ラベルは HTML の data-en から出す。見出しを2行に割らずに済む */ .bl-side-box h2::before { content: attr(data-en); display: block; margin-bottom: 6px; font-family: var(--f-en); font-size: 12px; font-weight: 700; letter-spacing: .18em; color: var(--hp-sky); } .bl-toc { margin-top: 18px; counter-reset: toc; } .bl-toc li { counter-increment: toc; } .bl-toc li + li { margin-top: 12px; } .bl-toc a { display: block; position: relative; padding-left: 26px; overflow: hidden; font-size: 15px; line-height: 1.7; white-space: nowrap; text-overflow: ellipsis; color: var(--ink-500); transition: color .2s ease, padding-left .2s ease; } .bl-toc a::before { content: counter(toc, decimal-leading-zero); position: absolute; left: 0; top: 1px; font-family: var(--f-mono); font-size: 14px; color: var(--hp-sky); } .bl-toc a:hover { color: var(--ink-900); } .bl-toc a.is-now { padding-left: 32px; color: var(--ink-900); font-weight: 700; } .bl-toc a.is-now::before { color: var(--hp-sky); } /* カテゴリ。詳細ページは blog.html へ飛ぶ 、一覧ページはその場で絞る