/* ============================================================ column-editorial.css — インタビューコラム 情緒レイヤー v2「銀塩の扉」 ------------------------------------------------------------ コンセプト：新宿 北村写真機店のトーン。 紙（生成りの白）とインク（墨）のモノクローム基調に、 雑誌の扉ページのようなエディトリアルの格を持たせる。 赤は「証明（No.1）と行動（CTAボタン・バッジ）」にのみ残す。 ------------------------------------------------------------ 制約（v1から継続）： - 文字サイズトークン（--type-*）不変更／HTML・テキスト不変更 - SiteHeader / SiteFooter へは影響させない - 人物写真はモノクロ化しない（遺品整理文脈での遺影連想を回避） 旧レイヤー: column-warmth.css（ロールバック用に保持） ============================================================ */ /* ---- 1. 紙とインク（トークン再定義） ---- */ [data-screen-label] { --surface-page: rgb(250, 250, 248); /* 生成りの紙 */ --surface-subtle: rgb(244, 243, 240); /* 静かな面 */ --surface-muted: rgb(238, 237, 234); /* Q見出し行・サムネ下地 */ /* 暖色トーン一式をモノクロームへ写像（inlineのvar()参照ごと差し替え） */ --wood-50: rgb(246, 245, 243); /* 引用箱・CTA箱 → 淡い紙面 */ --wood-100: rgb(232, 231, 228); --wood-200: rgb(223, 222, 218); /* 箱の枠 → 毛細罫 */ --wood-700: rgb(28, 27, 26); /* 引用の縦罫 → 墨 */ --wood-1100: rgb(100, 99, 97); /* 締めラベル → グラファイト */ --forest-50: rgb(246, 245, 243); /* チェックリスト箱 → 紙面 */ --forest-100: rgb(230, 229, 226); --forest-200: rgb(223, 222, 218); --kit-success: rgb(28, 27, 26); /* チェック印 → 墨 */ --cw-serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif; --cw-ink: rgb(28, 27, 26); --cw-hairline: rgb(223, 222, 218); } /* ヘッダー・フッター内はキット既定値へ戻す */ [data-screen-label] dc-import { --surface-page: rgb(255, 255, 255); --surface-subtle: rgb(248, 248, 248); --surface-muted: rgb(241, 241, 241); --wood-50: rgb(243, 238, 229); --wood-100: rgb(231, 216, 185); --wood-200: rgb(225, 195, 131); --wood-700: rgb(200, 117, 4); --wood-1100: rgb(131, 59, 0); --forest-50: rgb(230, 245, 236); --forest-100: rgb(194, 229, 209); --forest-200: rgb(155, 212, 181); --kit-success: rgb(37, 157, 99); } /* ---- 2. シグネチャー：扉ページのヒーロー ---- */ [data-screen-label] main section[style*="background:var(--surface-subtle)"] { position: relative; background: var(--surface-page) !important; /* 扉は紙の白 */ border-top: 2px solid var(--cw-ink); /* 墨の太罫 */ border-bottom: 1px solid var(--cw-hairline) !important; } /* 英字ジャンル表記（雑誌のエヤーブロー）。装飾であり本文ではない */ [data-screen-label] main h1::before { display: block; font-family: var(--cw-serif); font-size: 11px; font-weight: 500; letter-spacing: 0.38em; color: rgb(100, 99, 97); margin-bottom: 14px; } [data-screen-label^="P1 "] main h1::before { content: "KITAMURA CAMERA JOURNAL"; } [data-screen-label^="P2 "] main h1::before { content: "INTERVIEW"; } [data-screen-label^="P3 "] main h1::before { content: "GUIDE"; } [data-screen-label^="P4 "] main h1::before { content: "GUIDE"; } [data-screen-label^="P5 "] main h1::before { content: "INTERVIEW"; } [data-screen-label^="P6 "] main h1::before { content: "COLUMN"; } [data-screen-label^="P7 "] main h1::before { content: "GUIDE"; } [data-screen-label^="P8 "] main h1::before { content: "GUIDE"; } /* ---- 3. 声と見出しの明朝体 ---- */ [data-screen-label] main h1 { font-family: var(--cw-serif); } [data-screen-label] main h2 { font-family: var(--cw-serif); position: relative; border-bottom: 1px solid var(--cw-hairline) !important; } [data-screen-label] main h2::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 22px; height: 2px; background: var(--cw-ink); /* 赤金グラデ廃止 → 墨の短罫 */ } [data-screen-label] main a h3 { font-family: var(--cw-serif); } [data-screen-label] main blockquote { font-family: var(--cw-serif); position: relative; } [data-screen-label] main p[style*="border-left:3px solid var(--kit-brand-red)"] { font-family: var(--cw-serif); border-left-color: var(--cw-ink) !important; /* リードの縦罫も墨 */ } /* 箱型引用の透かし：細身の欧文引用符（FAアイコン廃止） */ [data-screen-label] main blockquote[style*="background:var(--wood-50)"]::after, [data-screen-label] main blockquote[style*="border-left:5px solid var(--kit-brand-red)"]::after { content: "\201D"; font-family: var(--cw-serif); position: absolute; right: 16px; bottom: -6px; font-size: 56px; line-height: 1; color: var(--cw-hairline); pointer-events: none; } [data-screen-label] main blockquote[style*="border-left:5px solid var(--kit-brand-red)"] { border-left-color: var(--cw-ink) !important; } /* ---- 4. 写真＝ギャラリーのマット装 ---- */ [data-screen-label] main div[style*="border-radius:var(--radius-full)"][style*="overflow:hidden"] { box-shadow: 0 0 0 4px rgb(255, 255, 255), 0 0 0 5px var(--cw-hairline), 0 4px 14px rgba(0, 0, 0, 0.10); } /* ヒーロー写真：彩度を静かに（モノクロ化はしない） */ [data-screen-label] main img[style*="max-height:440px"] { filter: saturate(0.94) contrast(1.02); } /* ---- 5. 記事一覧カード ---- */ [data-screen-label] main a[style*="flex-direction:column"][style*="overflow:hidden"] { box-shadow: 0 1px 10px rgba(0, 0, 0, 0.06); border-color: var(--cw-hairline) !important; } [data-screen-label] main a[style*="flex-direction:column"][style*="overflow:hidden"] img { transition: transform 0.6s ease; filter: saturate(0.94); } [data-screen-label] main a[style*="flex-direction:column"][style*="overflow:hidden"]:hover img { transform: scale(1.04); filter: saturate(1); } /* ---- 6. 対話のディテール：赤 → 墨 ---- */ /* 話者バッジ（Q1／大澤さん／辰己さん） */ [data-screen-label] main span[style*="background:var(--kit-brand-red)"][style*="padding:3px 9px"] { background: var(--cw-ink) !important; border-radius: 999px !important; padding: 3px 12px !important; } /* ステップ番号の丸 */ [data-screen-label] main div[style*="background:var(--kit-brand-red)"][style*="border-radius:var(--radius-full)"] { background: var(--cw-ink) !important; box-shadow: none; } /* ※ No.1バッジ（padding:5px 14px）とキットBadge・CTAボタンは赤のまま＝証明と行動 */ /* ---- 7. TRUSTブロック＝証書の佇まい ---- */ [data-screen-label] main div[style*="background:var(--wood-50)"][style*="border:1px solid var(--wood-200)"]:has(> h2) { background: rgb(255, 255, 255) !important; border-color: var(--cw-ink) !important; } /* ---- 8. 落ち着いた所作 ---- */ @media (prefers-reduced-motion: reduce) { [data-screen-label] main a[style*="flex-direction:column"][style*="overflow:hidden"] img { transition: none; } [data-screen-label] main a[style*="flex-direction:column"][style*="overflow:hidden"]:hover img { transform: none; } } /* ============================================================ v2.1 余白システム — エディトリアルの呼吸 デスクトップで広く、モバイルは clamp() で自然に収束 ============================================================ */ /* 横のリズム：840px幅の全コンテナに共通の左右余白（整列維持） */ [data-screen-label] main [style*="max-width:840px"] { padding-left: clamp(20px, 4.5vw, 44px) !important; padding-right: clamp(20px, 4.5vw, 44px) !important; } /* 扉（ヒーロー帯）：上下にたっぷり */ [data-screen-label] main section[style*="background:var(--surface-subtle)"] > div { padding-top: clamp(40px, 6vw, 64px) !important; padding-bottom: clamp(36px, 5.5vw, 56px) !important; } /* 章見出し：節の間に呼吸（本文直下のh2のみ。箱内のh2は対象外） */ [data-screen-label] main article > h2 { margin-top: clamp(56px, 9vw, 84px) !important; } [data-screen-label] main section[style*="max-width:840px"] > h2 { margin-top: clamp(48px, 8vw, 72px) !important; } /* リード文：導入の間 */ [data-screen-label] main p[style*="border-left:3px solid var(--kit-brand-red)"] { margin-top: clamp(40px, 6vw, 56px) !important; margin-bottom: clamp(40px, 6vw, 56px) !important; padding: clamp(24px, 4vw, 34px) clamp(26px, 4.5vw, 38px) !important; } /* 本文段落：行間をわずかに開く（サイズ不変） */ [data-screen-label] main article > p { line-height: 2 !important; } /* 箱もの（引用箱・チェックリスト・TRUST・締めカード・店舗情報）の内余白 */ [data-screen-label] main div[style*="background:var(--wood-50)"][style*="border:1px solid"], [data-screen-label] main div[style*="background:var(--forest-50)"][style*="border:1px solid"], [data-screen-label] main div[style*="background:var(--surface-subtle)"][style*="border:1px solid"] { padding: clamp(28px, 5vw, 44px) !important; } [data-screen-label] main blockquote[style*="background:var(--wood-50)"] { padding: clamp(24px, 4vw, 34px) clamp(26px, 4.5vw, 38px) !important; } /* CTA：締めの静けさ */ [data-screen-label] main section[style*="text-align:center"] { padding-top: clamp(48px, 8vw, 72px) !important; padding-bottom: clamp(72px, 10vw, 104px) !important; } /* ---- カードサムネの顔切れ対策（2026-07-07） ---- */ /* 2人並びの縦写真を16:9/16:10サムネにcover表示すると頭頂部が切れるため、上寄せで顔を収める */ [data-screen-label] main img[src*="oosawa_tatsumi_001"] { object-position: center 18% !important; }