@charset "UTF-8"; /* ========================================================= 一般事業主行動計画ページ専用 action-plan.css 対象: 他ページへの影響を防ぐため、すべて .action-plan-page 配下に限定 ========================================================= */ /* ========================================================= ページ上部・紹介エリア ========================================================= */ .action-plan-page .plan-hero { background: #f5f7fa; border-left: 4px solid #185FA5; border-radius: 0 8px 8px 0; padding: 1.75rem 2rem; margin-bottom: 2.5rem; } .action-plan-page .plan-hero-label { font-size: 11px; letter-spacing: 0.08em; color: #185FA5; font-weight: bold; margin-bottom: 0.4rem; } .action-plan-page .plan-hero h3 { font-size: 20px; font-weight: bold; color: #222; margin-bottom: 0.6rem; } .action-plan-page .plan-hero p { font-size: 14px; color: #555; line-height: 1.8; } /* ========================================================= セクション見出し ========================================================= */ .action-plan-page .plan-section-label { font-size: 13px; font-weight: bold; color: #888; margin-bottom: 1.25rem; display: flex; align-items: center; gap: 10px; letter-spacing: 0.04em; } .action-plan-page .plan-section-label::after { content: ""; flex: 1; height: 1px; background: #e0e0e0; } /* ========================================================= 取り組み目標カード ========================================================= */ .action-plan-page .plan-goals { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 2.5rem; } .action-plan-page .plan-goal-card { background: #fff; border: 1px solid #e0e0e0; border-top: 3px solid #185FA5; border-radius: 8px; padding: 1.5rem; } .action-plan-page .plan-goal-num { font-size: 11px; font-weight: bold; color: #185FA5; margin-bottom: 0.6rem; letter-spacing: 0.06em; } .action-plan-page .plan-goal-icon { display: block; font-size: 28px; color: #185FA5; margin-bottom: 0.75rem; } .action-plan-page .plan-goal-title { font-size: 16px; font-weight: bold; color: #222; margin-bottom: 0.5rem; } .action-plan-page .plan-goal-body { font-size: 13px; color: #555; line-height: 1.75; } .action-plan-page .plan-goal-badge { display: inline-block; font-size: 12px; font-weight: bold; padding: 4px 12px; border-radius: 20px; margin-top: 1rem; background: #e6f1fb; color: #0C447C; } /* ========================================================= 計画タイムライン ========================================================= */ .action-plan-page .plan-timeline { margin-bottom: 2rem; } .action-plan-page .plan-tl-item { display: flex; gap: 1.5rem; align-items: stretch; } /* 左側の縦線・丸 */ .action-plan-page .plan-tl-axis { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; width: 20px; } .action-plan-page .plan-tl-dot { width: 14px; height: 14px; border-radius: 50%; background: #185FA5; flex-shrink: 0; margin-top: 6px; } .action-plan-page .plan-tl-dot.past { background: #fff; border: 2px solid #ccc; } .action-plan-page .plan-tl-line { width: 2px; flex: 1; min-height: 20px; margin-top: 4px; background: #e0e0e0; } /* ========================================================= 計画カード ========================================================= */ .action-plan-page .plan-tl-card { flex: 1; background: #fff; border: 1px solid #ddd; border-radius: 8px; padding: 1.25rem 1.5rem; margin-bottom: 1rem; } .action-plan-page .plan-tl-card.current { border-color: #185FA5; border-width: 1.5px; } /* 現行・過去ラベル */ .action-plan-page .plan-tl-tag { display: inline-block; font-size: 11px; font-weight: bold; padding: 2px 10px; border-radius: 20px; margin-bottom: 0.6rem; background: #e6f1fb; color: #185FA5; } .action-plan-page .plan-tl-tag.past-tag { background: #f2f2f2; color: #999; } /* 計画情報 */ .action-plan-page .plan-tl-period { font-size: 13px; color: #888; margin-bottom: 0.25rem; } .action-plan-page .plan-tl-title { font-size: 16px; font-weight: bold; color: #222; margin-bottom: 0.3rem; } .action-plan-page .plan-tl-posted { font-size: 12px; color: #aaa; margin-bottom: 0.75rem; } /* ========================================================= PDFボタン ========================================================= */ .action-plan-page .plan-btn-row { display: flex; flex-wrap: wrap; gap: 0.5rem; } .action-plan-page .plan-btn-pdf { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: bold; padding: 7px 16px; border: 1px solid #185FA5; border-radius: 6px; color: #185FA5; background: #fff; text-decoration: none; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .action-plan-page .plan-btn-pdf:hover { background: #e6f1fb; text-decoration: none; } .action-plan-page .plan-btn-sub { border-color: #ccc; color: #666; } .action-plan-page .plan-btn-sub:hover { background: #f5f5f5; } /* ========================================================= スマートフォン・タブレット対応 ========================================================= */ @media screen and (max-width: 768px) { .action-plan-page .plan-hero { padding: 1.4rem 1.25rem; margin-bottom: 2rem; } .action-plan-page .plan-hero h3 { font-size: 18px; } .action-plan-page .plan-goals { grid-template-columns: 1fr; gap: 1rem; } .action-plan-page .plan-goal-card { padding: 1.25rem; } .action-plan-page .plan-tl-item { gap: 0.9rem; } .action-plan-page .plan-tl-card { padding: 1rem 1.1rem; } .action-plan-page .plan-btn-row { flex-direction: column; } .action-plan-page .plan-btn-pdf { width: 100%; justify-content: center; box-sizing: border-box; } } /* ========================================================= 小さいスマートフォン対応 ========================================================= */ @media screen and (max-width: 430px) { .action-plan-page .plan-hero { padding: 1.2rem 1rem; } .action-plan-page .plan-hero-label { font-size: 10px; } .action-plan-page .plan-hero h3 { font-size: 17px; } .action-plan-page .plan-hero p { font-size: 13px; } .action-plan-page .plan-section-label { font-size: 12px; } .action-plan-page .plan-goal-card { padding: 1.1rem; } .action-plan-page .plan-tl-item { gap: 0.65rem; } .action-plan-page .plan-tl-axis { width: 16px; } .action-plan-page .plan-tl-dot { width: 12px; height: 12px; } .action-plan-page .plan-tl-card { padding: 0.9rem; } .action-plan-page .plan-tl-title { font-size: 15px; } .action-plan-page .plan-tl-period { font-size: 12px; } }