/* ========================================================= equip-common.css 設備トラブル系ページ（equip-page）専用の共通デザイン影響範囲：のみ ========================================================= */ /* 全体 */ body.works.equip-page { font-feature-settings: "palt"; line-height: 1.8; color: #fff; /* box の中は白文字が前提 */ } /* 各 page-faucet, page-water-leak など個別ページの外側枠 */ .works.equip-page .equip-frame { /* .box の濃色背景の中で使う前提 */ color: inherit; } /* FVリード */ .works.equip-page .ichikan-fv-lead { color: #fff; line-height: 1.8; max-width: 760px; margin: 10px auto 18px; text-align: left; } /* CTA */ .works.equip-page .ichikan-fv-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 10px; } .works.equip-page .ichikan-btn { display: inline-flex; align-items: center; justify-content: center; padding: 14px 18px; min-width: 220px; border-radius: 10px; font-weight: 700; text-decoration: none; transition: 0.2s; } .works.equip-page .ichikan-btn-line { background: #17b75e; color: #fff; } .works.equip-page .ichikan-btn-tel { background: #1a73e8; color: #fff; } /* grid */ .works.equip-page .ichikan-grid { display: grid; gap: 12px; } .works.equip-page .ichikan-grid-2 { grid-template-columns: repeat(2, 1fr); } .works.equip-page .ichikan-grid-3 { grid-template-columns: repeat(3, 1fr); } /* 白いカード（最重要） */ .works.equip-page .ichikan-card, .works.equip-page .ichikan-section, .works.equip-page .ichikan-price-box, .works.equip-page .ichikan-final-cta, .works.equip-page .ichikan-case-meta { background: #fff; color: #333; border: 1px solid #e6e6e6; border-radius: 12px; padding: 14px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06); } /* 料金表 */ .works.equip-page .ichikan-price-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid #e6e6e6; border-radius: 12px; overflow: hidden; color: #333; } .works.equip-page .ichikan-price-table th, .works.equip-page .ichikan-price-table td { padding: 12px; border-bottom: 1px solid #eee; text-align: left; color: #333; } /* flow */ .works.equip-page .ichikan-flow-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; } .works.equip-page .ichikan-flow-list li { background: #fff; border: 1px solid #e6e6e6; border-radius: 10px; padding: 12px; display: flex; gap: 10px; align-items: center; color: #333; } .works.equip-page .ichikan-flow-list .step { display: inline-flex; width: 28px; height: 28px; border-radius: 50%; align-items: center; justify-content: center; font-weight: 800; background: #1a73e8; color: #fff; flex-shrink: 0; } /* FAQ */ .works.equip-page .ichikan-faq-list .faq-item { background: #fff; border: 1px solid #e6e6e6; border-radius: 10px; margin-bottom: 8px; overflow: hidden; color: #333; } .works.equip-page .ichikan-faq-list .faq-q { cursor: pointer; padding: 12px 14px; font-weight: 700; position: relative; color: #333; } .works.equip-page .ichikan-faq-list .faq-a { display: none; padding: 0 14px 12px; line-height: 1.8; color: #333; } .works.equip-page .ichikan-faq-list .faq-item.is-open .faq-a { display: block; } /* fixed CTA */ .works.equip-page .ichikan-fixed-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999; display: none; grid-template-columns: 1fr 1fr; } .works.equip-page .ichikan-fixed-cta a { display: flex; align-items: center; justify-content: center; padding: 14px 0; font-weight: 800; color: #fff; text-decoration: none; } .works.equip-page .ichikan-fixed-cta .fixed-line { background: #17b75e; } .works.equip-page .ichikan-fixed-cta .fixed-tel { background: #1a73e8; } @media (max-width: 900px) { .works.equip-page .ichikan-grid-3 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .works.equip-page .ichikan-grid-2, .works.equip-page .ichikan-grid-3 { grid-template-columns: 1fr; } .works.equip-page .ichikan-fixed-cta { display: grid; } body.works.equip-page { padding-bottom: 60px; } } /* ===== Theme C: Friendly Teal ===== */ body.works.equip-page { font-family: "M PLUS 1p", "Noto Sans JP", sans-serif; } .works.equip-page .ichikan-h3 { border-left: 5px solid #0e8a8a; background: #f7faf9; color: #0e8a8a; } .works.equip-page .ichikan-btn-tel { background: #0e8a8a; } .works.equip-page .ichikan-btn-line { background: #17b75e; } /* ========================================================= 下層ブロック（カード）背景色を共通でfloralwhitoに変更 ========================================================= */ .works.equip-page .ichikan-card, .works.equip-page .ichikan-price-box, .works.equip-page .ichikan-case-meta, .works.equip-page .ichikan-final-cta { background: #fffaf0 !important; border-color: #dce7f8; /* 薄いブルーの枠線（好みに応じて） */ } /* フォームページのボタン文字を大きくする */ .company.works.equip-page .ichikan-btn { font-size: 1.1rem; font-weight: 700; } /* ========================================= 固定CTAだけ使いたいページ用の汎用クラス例： ========================================= */ .has-fixed-cta .ichikan-fixed-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999; display: none; /* SPだけで表示 */ grid-template-columns: 1fr 1fr; } .has-fixed-cta .ichikan-fixed-cta a { display: flex; align-items: center; justify-content: center; padding: 14px 0; font-weight: 800; color: #fff; text-decoration: none; } /* 既存の色指定を流用 */ .has-fixed-cta .ichikan-fixed-cta .fixed-line { background: #17b75e; } .has-fixed-cta .ichikan-fixed-cta .fixed-tel { background: #1a73e8; } @media (max-width: 600px) { .has-fixed-cta .ichikan-fixed-cta { display: grid; } body.has-fixed-cta { padding-bottom: 60px; } } /* 固定CTAのボタン文字サイズをページ種別に関わらず統一 */ @media (max-width: 600px) { body.works.equip-page .ichikan-fixed-cta a, body.has-fixed-cta .ichikan-fixed-cta a { font-size: 0.9rem; font-weight: 800; } }