/* ========================================================================== AI転職ラボ — category.css カテゴリ一覧ページ専用スタイル。css/style.css の後に読み込む。カテゴリごとの色はで切り替える。 ========================================================================== */ /* -------------------------------------------------------------------------- カテゴリテーマ -------------------------------------------------------------------------- */ :root { --cat-color: var(--color-primary); --cat-color-2: #3B82F6; --cat-on: #fff; --cat-bg-soft: #EFF6FF; } [data-category="career"] { --cat-color: #1E3A8A; --cat-color-2: #3B82F6; --cat-bg-soft: #EFF6FF; } [data-category="chatgpt"] { --cat-color: #10B981; --cat-color-2: #34D399; --cat-bg-soft: #ECFDF5; } [data-category="ai-agent"] { --cat-color: #8B5CF6; --cat-color-2: #A78BFA; --cat-bg-soft: #F5F3FF; } /* -------------------------------------------------------------------------- パンくず (article.css と整合) -------------------------------------------------------------------------- */ .breadcrumb { max-width: var(--w-max); margin-inline: auto; padding: var(--sp-4) var(--sp-4) 0; font-size: 12px; color: var(--color-text-muted); } .breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; } .breadcrumb li { display: inline-flex; align-items: center; gap: var(--sp-2); } .breadcrumb li + li::before { content: "›"; color: var(--color-text-muted); font-weight: 700; } .breadcrumb a { color: var(--color-primary); text-decoration: none; font-weight: 500; } .breadcrumb a:hover { color: var(--color-accent); text-decoration: underline; } .breadcrumb [aria-current="page"] { color: var(--color-text-muted); } /* -------------------------------------------------------------------------- カテゴリヘッダー -------------------------------------------------------------------------- */ .cat-hero { background: linear-gradient(135deg, var(--cat-color) 0%, var(--cat-color-2) 100%); color: #fff; margin-top: var(--sp-4); position: relative; overflow: hidden; } .cat-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(600px 300px at 90% -20%, rgba(255,255,255,0.18), transparent 60%), radial-gradient(500px 260px at 10% 120%, rgba(0,0,0,0.15), transparent 60%); pointer-events: none; } .cat-hero__inner { position: relative; max-width: var(--w-max); margin-inline: auto; padding: var(--sp-7) var(--sp-4); text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); } .cat-hero__badge { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 5px 14px; background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.3); border-radius: var(--r-pill); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; backdrop-filter: blur(4px); } .cat-hero__badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,0.25); } .cat-hero h1 { color: #fff; font-size: 28px; line-height: 1.3; margin: 0; text-wrap: balance; } .cat-hero__desc { color: rgba(255,255,255,0.92); font-size: 15px; line-height: 1.9; max-width: 640px; margin: 0 auto; } .cat-hero__count { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 6px 14px; background: rgba(255,255,255,0.14); border-radius: var(--r-pill); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; } .cat-hero__count strong { font-size: 18px; font-weight: 900; } @media (min-width: 1024px) { .cat-hero__inner { padding-block: var(--sp-8); gap: var(--sp-4); } .cat-hero h1 { font-size: 36px; } .cat-hero__desc { font-size: 18px; } } /* -------------------------------------------------------------------------- 2カラムレイアウト -------------------------------------------------------------------------- */ .cat-layout { max-width: var(--w-max); margin-inline: auto; padding: var(--sp-7) var(--sp-4); display: grid; grid-template-columns: 1fr; gap: var(--gutter); } @media (min-width: 1024px) { .cat-layout { grid-template-columns: minmax(0, 1fr) var(--w-sidebar); padding-block: var(--sp-8); } } /* セクション見出し */ .cat-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-5); padding-bottom: var(--sp-2); border-bottom: 2px solid var(--cat-color); } .cat-sec-head h2 { font-size: 22px; margin: 0; padding: 0; border: 0; } /* -------------------------------------------------------------------------- 記事カード (カテゴリ版) -------------------------------------------------------------------------- */ .cat-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-5); } @media (min-width: 640px) { .cat-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .cat-grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); } } .cat-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--color-border); border-radius: var(--r-md); overflow: hidden; text-decoration: none; color: inherit; height: 100%; transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease), border-color var(--dur) var(--ease); } .cat-card:visited { color: inherit; } .cat-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--cat-color); text-decoration: none; } .cat-card:hover .cat-card__title { color: var(--color-accent); } .cat-card__thumb { position: relative; aspect-ratio: 16 / 9; background: var(--color-bg-muted); overflow: hidden; display: grid; place-items: center; font-family: var(--font-mono); font-size: 11px; color: rgba(0,0,0,0.45); } .cat-card__thumb.ph-a { background: repeating-linear-gradient(45deg, rgba(0,0,0,0.06) 0 8px, transparent 8px 16px), linear-gradient(135deg, var(--cat-bg-soft), #fff); } .cat-card__thumb.ph-b { background: repeating-linear-gradient(45deg, rgba(0,0,0,0.05) 0 8px, transparent 8px 16px), linear-gradient(135deg, #FEF3C7, var(--cat-bg-soft)); } .cat-card__thumb.ph-c { background: repeating-linear-gradient(45deg, rgba(0,0,0,0.05) 0 8px, transparent 8px 16px), linear-gradient(135deg, #FFE4E6, var(--cat-bg-soft)); } .cat-card__thumb.ph-d { background: repeating-linear-gradient(45deg, rgba(0,0,0,0.06) 0 8px, transparent 8px 16px), linear-gradient(135deg, #FEFCE8, var(--cat-bg-soft)); } .cat-card__num { position: absolute; top: 12px; left: 12px; padding: 4px 10px; background: rgba(255,255,255,0.92); border-radius: var(--r-sm); font-family: var(--font-mono); font-weight: 700; font-size: 11px; color: var(--cat-color); letter-spacing: 0.04em; } .cat-card__body { padding: var(--sp-4) var(--sp-5) var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); flex: 1; } .cat-tag { display: inline-flex; align-items: center; align-self: flex-start; padding: 3px 12px; border: 1px solid var(--cat-color); color: var(--cat-color); background: #fff; border-radius: var(--r-pill); font-size: 11px; font-weight: 700; text-decoration: none; letter-spacing: 0.02em; line-height: 1.6; } .cat-card__title { font-size: 16px; font-weight: 700; line-height: 1.55; color: var(--color-primary-dark); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color var(--dur) var(--ease); } .cat-card__excerpt { font-size: 13px; color: var(--color-text); line-height: 1.7; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .cat-card__excerpt::before { content: "💡 "; color: var(--cat-color); } .cat-card__meta { margin-top: auto; font-size: 12px; color: var(--color-text-muted); display: flex; align-items: center; gap: var(--sp-3); font-variant-numeric: tabular-nums; } /* -------------------------------------------------------------------------- サイドバー -------------------------------------------------------------------------- */ .cat-sidebar { display: flex; flex-direction: column; gap: var(--sp-5); } .cat-widget { background: #fff; border: 1px solid var(--color-border); border-radius: var(--r-md); padding: var(--sp-5); } .cat-widget h3 { margin: 0 0 var(--sp-4); padding-bottom: var(--sp-2); border-bottom: 2px solid var(--cat-color); font-size: 14px; display: inline-block; letter-spacing: 0.04em; } /* 他カテゴリカード */ .other-cat { display: block; padding: var(--sp-4); border-radius: var(--r-md); border: 1px solid var(--color-border); text-decoration: none; color: #fff; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); position: relative; overflow: hidden; } .other-cat:visited { color: #fff; } .other-cat + .other-cat { margin-top: var(--sp-3); } .other-cat:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .other-cat--career { background: linear-gradient(135deg, #1E3A8A, #3B82F6); border-color: #1E3A8A; } .other-cat--chatgpt { background: linear-gradient(135deg, #10B981, #34D399); border-color: #10B981; } .other-cat--ai-agent { background: linear-gradient(135deg, #8B5CF6, #A78BFA); border-color: #8B5CF6; } .other-cat__label { font-size: 11px; opacity: 0.85; letter-spacing: 0.1em; font-weight: 700; } .other-cat__name { font-size: 15px; font-weight: 700; margin-top: 2px; line-height: 1.4; } .other-cat__arrow { display: inline-block; margin-top: var(--sp-2); font-size: 13px; opacity: 0.9; } /* 注目記事 (1本大きく) */ .featured { display: block; text-decoration: none; color: inherit; background: linear-gradient(135deg, var(--cat-bg-soft), #fff); border: 1px solid var(--color-border); border-left: 4px solid var(--cat-color); border-radius: var(--r-md); padding: var(--sp-4); transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease); } .featured:visited { color: inherit; } .featured:hover { transform: translateY(-2px); border-left-color: var(--color-accent); } .featured__label { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 900; color: var(--cat-color); letter-spacing: 0.12em; margin-bottom: var(--sp-2); } .featured__label::before { content: "★"; color: var(--color-accent); font-size: 14px; line-height: 1; } .featured__title { font-size: 14px; font-weight: 700; line-height: 1.55; color: var(--color-primary-dark); margin: 0 0 var(--sp-2); } .featured__meta { font-size: 11px; color: var(--color-text-muted); } /* メルマガ (カテゴリカラー版) */ .cat-widget-nl { background: linear-gradient(135deg, var(--cat-color), var(--cat-color-2)); color: #fff; border-color: transparent; } .cat-widget-nl h3 { color: #fff; border-bottom-color: rgba(255,255,255,0.5); } .cat-widget-nl p { font-size: 13px; line-height: 1.7; color: rgba(255,255,255,0.9); margin: 0 0 var(--sp-3); } .cat-widget-nl input[type="email"] { width: 100%; padding: 10px 12px; border: 1px solid rgba(255,255,255,0.3); border-radius: var(--r-sm); background: rgba(255,255,255,0.12); color: #fff; font-size: 13px; margin-bottom: var(--sp-3); } .cat-widget-nl input[type="email"]::placeholder { color: rgba(255,255,255,0.7); } .cat-widget-nl .btn-primary { width: 100%; } .cat-widget-nl small { display: block; margin-top: var(--sp-2); font-size: 11px; color: rgba(255,255,255,0.75); line-height: 1.6; } /* -------------------------------------------------------------------------- 他カテゴリ誘導 (ページ最下部) -------------------------------------------------------------------------- */ .other-cats { background: var(--color-bg-muted); border-top: 1px solid var(--color-border); padding: var(--sp-7) var(--sp-4); } .other-cats__inner { max-width: var(--w-max); margin-inline: auto; } .other-cats h2 { font-size: 18px; margin: 0 0 var(--sp-5); color: var(--color-primary-dark); } .other-cats__grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); } @media (min-width: 640px) { .other-cats__grid { grid-template-columns: repeat(2, 1fr); } } .other-cats__card { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-5); border-radius: var(--r-md); text-decoration: none; color: #fff; min-height: 140px; justify-content: space-between; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .other-cats__card:visited { color: #fff; } .other-cats__card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .other-cats__card h3 { color: #fff; font-size: 18px; margin: 0; padding: 0; border: 0; line-height: 1.4; } .other-cats__card p { font-size: 13px; color: rgba(255,255,255,0.9); margin: 0; line-height: 1.7; } .other-cats__card span.arrow { display: inline-flex; align-items: center; gap: 4px; margin-top: var(--sp-2); font-size: 13px; font-weight: 700; } /* ========================================================================== Sidebar: widget / widget-newsletter 記事ページ (article.css) と同じスタイルをカテゴリページにも適用 ========================================================================== */ .cat-sidebar .widget { background: #fff; border: 1px solid var(--color-border); border-radius: var(--r-md); padding: var(--sp-5); } .cat-sidebar .widget h3 { margin: 0 0 var(--sp-4); padding-bottom: var(--sp-2); border-bottom: 2px solid var(--color-accent); font-size: 14px; letter-spacing: 0.04em; display: inline-block; } .cat-sidebar .widget-newsletter { background: linear-gradient(135deg, #1E3A8A, #0F172A); color: #fff; border-color: transparent; } .cat-sidebar .widget-newsletter h3 { color: #fff; border-bottom-color: var(--color-accent); } .cat-sidebar .widget-newsletter p { font-size: 13px; line-height: 1.7; color: #CBD5E1; margin: 0 0 var(--sp-3); } .cat-sidebar .widget-newsletter form { display: block; margin: 0; } .cat-sidebar .widget-newsletter input[type="email"] { width: 100%; padding: 10px 12px; border: 1px solid #334155; border-radius: var(--r-sm); background: rgba(255,255,255,0.08); color: #fff; font-size: 13px; margin-bottom: var(--sp-3); box-sizing: border-box; } .cat-sidebar .widget-newsletter input[type="email"]::placeholder { color: #94A3B8; } .cat-sidebar .widget-newsletter input[type="email"]:focus { outline: 2px solid var(--color-accent); outline-offset: 1px; } .cat-sidebar .widget-newsletter .btn-primary { width: 100%; } .cat-sidebar .widget-newsletter small { display: block; margin-top: var(--sp-2); font-size: 11px; color: #94A3B8; line-height: 1.6; }