@charset "utf-8"; /* ================================================== bcom-base.css 全站基础：字体 / 颜色 / 排版 / section 间距 / 基础布局使用方法： - - - 页面主体建议包在 .bcom-wrapper > .bcom-container 中 -------------------------------------------------- 配色、字号参考 Sumapro： - 正文字色: #170C03 - 主色(深蓝绿): #1A7488 - 强调色(浅蓝绿): #82CDDD / #7EC3D2 - 浅背景: #F5FAFC / #FDFDFD ================================================== */ /* ========== 1. 基础设置 / Reset（只作用于新风格页面） ========== */ html.bcom-html { font-size: 62.5%; /* 1rem = 10px */ } .bcom-body { margin: 0; padding: 0; font-family: "Noto Sans JP","メイリオ","Meiryo", "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro", "MS Pゴシック","MS PGothic",sans-serif; color: #170C03; line-height: 2; letter-spacing: 0.06em; /* 接近 Sumapro 设置 */ font-weight: 500; background-color: #FFFFFF; } /* 只对新 body 作用的 box-sizing，避免影响旧页面 */ .bcom-body *, .bcom-body *::before, .bcom-body *::after { box-sizing: border-box; } /* 链接 / 图片 / 列表基础 */ .bcom-body a { color: #050505; text-decoration: none; transition: opacity .3s ease, color .3s ease; } .bcom-body a:hover { opacity: .7; } .bcom-body img { max-width: 100%; height: auto; border: none; vertical-align: middle; } .bcom-body ul, .bcom-body ol { margin: 0; padding: 0; } .bcom-body li { list-style: none; } /* ========== 2. 颜色体系 & 文本色工具 ========== */ /* 文本色 */ .bcom-color-body { color: #170C03 !important; } .bcom-color-primary{ color: #1A7488 !important; } /* 深蓝绿 CTA */ .bcom-color-accent { color: #82CDDD !important; } /* 浅蓝绿 */ .bcom-color-sub { color: #726048 !important; } /* 棕色系小标题 */ .bcom-color-muted { color: #8B8B8B !important; } .bcom-color-danger { color: #F3474C !important; } .bcom-color-link { color: #35ADD3 !important; } /* 背景色 */ .bcom-bg-primary { background-color: #1A7488 !important; color: #FFFFFF; } .bcom-bg-accent { background-color: #82CDDD !important; } .bcom-bg-soft { background-color: #F5FAFC !important; } .bcom-bg-light { background-color: #FDFDFD !important; } .bcom-bg-white { background-color: #FFFFFF !important; } /* 边框 */ .bcom-border-light { border: 1px solid #E2C59F !important; } .bcom-border-muted { border: 1px solid #AAAAAA !important; } .bcom-border-none { border: none !important; } /* ========== 3. 字体 & 排版 ========== */ .bcom-body h1, .bcom-body h2, .bcom-body h3, .bcom-body h4, .bcom-body h5, .bcom-body h6 { margin: 0; font-family: "Noto Sans JP","メイリオ","Meiryo", "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro", "MS Pゴシック","MS PGothic",sans-serif; font-weight: 600; color: #170C03; letter-spacing: 0.08em; } .bcom-body h1 { font-size: 3.2rem; line-height: 1.4; } .bcom-body h2 { font-size: 2.4rem; line-height: 1.5; } .bcom-body h3 { font-size: 2.0rem; line-height: 1.6; } .bcom-body h4 { font-size: 1.8rem; line-height: 1.6; } .bcom-body h5 { font-size: 1.6rem; line-height: 1.7; } .bcom-body h6 { font-size: 1.4rem; line-height: 1.7; } .bcom-body p { margin: 0 0 1.2em; font-size: 1.4rem; } .bcom-lead { font-size: 1.6rem; line-height: 2.2; } .bcom-small { font-size: 1.2rem; } .bcom-heading-sub { font-size: 1.4rem; color: #726048; letter-spacing: 0.16em; text-transform: uppercase; } /* 英文 / 数字用 Inter 风格 */ .bcom-font-en { font-family: "Inter","Helvetica Neue",Arial,sans-serif; letter-spacing: 0.08em; } /* 对齐工具 */ .bcom-text-left { text-align: left !important; } .bcom-text-center { text-align: center !important; } .bcom-text-right { text-align: right !important; } /* ========== 4. 布局：wrapper / container / section ========== */ /* 整页底色，类似 Sumapro .wrapper */ .bcom-wrapper { background-color: #FDFDFD; } /* 主容器：1200px 基准，左右留白 */ .bcom-container { width: 1200px; max-width: 100%; margin: 0 auto; padding: 0 24px; } @media (max-width: 1200px) { .bcom-container { width: 100%; } } @media (max-width: 767px) { .bcom-container { padding: 0 16px; } } /* Section 间距（参考 mg-top-120 / pad-top-120 等） */ .bcom-section { padding: 80px 0; } .bcom-section--lg { padding: 120px 0; } .bcom-section--sm { padding: 40px 0; } /* 条纹背景 / 下划线边框之类 */ .bcom-section--stripe { background-color: #F5FAFC; } .bcom-section--border-top { border-top: 1px solid #E2C59F; } .bcom-section--border-bottom { border-bottom: 1px solid #E2C59F; } /* 根据 Sumapro 的响应式：大间距在平板/手机上缩小 */ @media (min-width: 768px) and (max-width: 1024px) { .bcom-section--lg { padding: 80px 0; } } @media (max-width: 767px) { .bcom-section { padding: 60px 0; } .bcom-section--lg { padding: 60px 0; } .bcom-section--sm { padding: 30px 0; } } /* ========== 5. 间距工具类（基于 Sumapro 常用 px） ========== */ /* margin-top */ .bcom-mt-0 { margin-top: 0 !important; } .bcom-mt-8 { margin-top: 8px !important; } .bcom-mt-16 { margin-top: 16px !important; } .bcom-mt-24 { margin-top: 24px !important; } .bcom-mt-32 { margin-top: 32px !important; } .bcom-mt-40 { margin-top: 40px !important; } .bcom-mt-60 { margin-top: 60px !important; } .bcom-mt-80 { margin-top: 80px !important; } /* 对应原 mg-top-80 */ .bcom-mt-120 { margin-top: 120px !important; } /* 对应原 mg-top-120 */ /* margin-bottom */ .bcom-mb-0 { margin-bottom: 0 !important; } .bcom-mb-8 { margin-bottom: 8px !important; } .bcom-mb-16 { margin-bottom: 16px !important; } .bcom-mb-24 { margin-bottom: 24px !important; } .bcom-mb-32 { margin-bottom: 32px !important; } .bcom-mb-40 { margin-bottom: 40px !important; } .bcom-mb-60 { margin-bottom: 60px !important; } .bcom-mb-80 { margin-bottom: 80px !important; } .bcom-mb-120 { margin-bottom: 120px !important; } /* 对应原 mg-bottom-120 */ /* padding-top / padding-bottom */ .bcom-pt-0 { padding-top: 0 !important; } .bcom-pt-16 { padding-top: 16px !important; } .bcom-pt-24 { padding-top: 24px !important; } .bcom-pt-32 { padding-top: 32px !important; } .bcom-pt-40 { padding-top: 40px !important; } .bcom-pt-60 { padding-top: 60px !important; } .bcom-pt-80 { padding-top: 80px !important; } .bcom-pt-120 { padding-top: 120px !important; } /* 对应原 pad-top-120 */ .bcom-pb-0 { padding-bottom: 0 !important; } .bcom-pb-16 { padding-bottom: 16px !important; } .bcom-pb-24 { padding-bottom: 24px !important; } .bcom-pb-32 { padding-bottom: 32px !important; } .bcom-pb-40 { padding-bottom: 40px !important; } .bcom-pb-60 { padding-bottom: 60px !important; } .bcom-pb-80 { padding-bottom: 80px !important; } .bcom-pb-120 { padding-bottom: 120px !important; } /* 对应原 pad-bottom-120 */ /* 手机上把 120 级别的上下间距减半，贴近 Sumapro 逻辑 */ @media (max-width: 767px) { .bcom-mb-120 { margin-bottom: 60px !important; } .bcom-pt-120 { padding-top: 60px !important; } .bcom-pb-120 { padding-bottom: 60px !important; } } /* ========== 6. Flex 布局工具 ========== */ .bcom-flex { display: flex; flex-wrap: wrap; } .bcom-flex--nowrap { flex-wrap: nowrap; } .bcom-flex--row { flex-direction: row; } .bcom-flex--col { flex-direction: column; } .bcom-flex--center { align-items: center; justify-content: center; } .bcom-flex--middle { align-items: center; } .bcom-flex--between { justify-content: space-between; } .bcom-flex--around { justify-content: space-around; } .bcom-flex--end { justify-content: flex-end; } /* 小屏改为纵向 */ @media (max-width: 767px) { .bcom-flex-sp-col { flex-direction: column; } } /* ========== 7. 卡片 / Box 基础 ========== */ .bcom-card { background-color: #FFFFFF; border-radius: 16px; padding: 24px 32px; box-shadow: 0 4px 16px rgba(0,0,0,0.04); } .bcom-card--border { border: 1px solid #E2C59F; box-shadow: none; } .bcom-card--soft { background-color: #F5FAFC; } @media (max-width: 767px) { .bcom-card { padding: 16px 20px; } } /* ========== 8. 按钮体系（通用 CTA） ========== */ .bcom-btn { display: inline-flex; align-items: center; justify-content: center; padding: 1.4rem 3.2rem; /* 约 14px 32px */ border-radius: 999px; border: 1px solid transparent; background-color: #1A7488; color: #FFFFFF; font-size: 1.5rem; font-weight: 600; line-height: 1.4; letter-spacing: 0.12em; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color .3s ease, color .3s ease, transform .15s ease, box-shadow .15s ease, opacity .3s ease; } .bcom-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,0.12); opacity: 0.9; } .bcom-btn:active { transform: translateY(0); box-shadow: none; opacity: 0.8; } .bcom-btn[disabled], .bcom-btn.bcom-is-disabled { opacity: 0.5; cursor: default; box-shadow: none; transform: none; } /* 次要按钮：浅色背景 */ .bcom-btn--secondary { background-color: #82CDDD; color: #170C03; } /* 线框按钮 */ .bcom-btn--outline { background-color: transparent; color: #1A7488; border-color: #1A7488; } /* 无背景、纯文字按钮（比如关闭/小链接） */ .bcom-btn--ghost { background-color: transparent; border-color: transparent; color: #1A7488; padding: 0; } /* 尺寸 */ .bcom-btn--sm { padding: 0.8rem 1.8rem; font-size: 1.3rem; } .bcom-btn--lg { padding: 1.6rem 4.0rem; font-size: 1.7rem; } /* 按钮里的图标 */ .bcom-btn-icon { display: inline-block; margin-left: 0.8rem; } /* ========== 9. 表单基础 ========== */ .bcom-input, .bcom-select, .bcom-textarea { width: 100%; padding: 10px 12px; border-radius: 6px; border: 1px solid #AAAAAA; font-size: 1.4rem; line-height: 1.5; font-family: inherit; color: #170C03; background-color: #FFFFFF; outline: none; transition: border-color .2s ease, box-shadow .2s ease; } .bcom-input:focus, .bcom-select:focus, .bcom-textarea:focus { border-color: #35ADD3; box-shadow: 0 0 0 1px rgba(53,173,211,0.3); } .bcom-textarea { min-height: 120px; resize: vertical; } .bcom-input--error, .bcom-select--error, .bcom-textarea--error { border-color: #F3474C; } .bcom-form-row { margin-bottom: 16px; } .bcom-form-label { display: block; margin-bottom: 6px; font-size: 1.3rem; font-weight: 600; } .bcom-form-hint { margin-top: 4px; font-size: 1.2rem; color: #8B8B8B; } /* ========== 10. 列表辅助 ========== */ .bcom-list-disc { padding-left: 1.6em; } .bcom-list-disc > li { list-style: disc; margin-bottom: 0.4em; } .bcom-list-decimal { padding-left: 2em; } .bcom-list-decimal > li { list-style: decimal; margin-bottom: 0.4em; } /* ===== Sumapro-like Text Footer ===== */ .bcom-footer{ background: #0b2a55; color: rgba(255,255,255,.88); } .bcom-footer-inner{ max-width: 1200px; margin: 0 auto; padding: 44px 18px 18px; } .bcom-footer-grid{ display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 28px; } .bcom-footer-ttl{ margin: 0 0 10px; font-size: 13px; letter-spacing: .12em; color: rgba(255,255,255,.78); font-weight: 700; } .bcom-footer-list{ list-style: none; padding: 0; margin: 0; border-top: 1px solid rgba(255,255,255,.18); } .bcom-footer-list li{ border-bottom: 1px solid rgba(255,255,255,.12); } .bcom-footer-list a{ display: block; padding: 12px 0; color: rgba(255,255,255,.92); text-decoration: none; font-size: 14px; line-height: 1.2; } .bcom-footer-list a:hover{ color: #ffffff; } .bcom-footer-bottom{ margin-top: 28px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.16); font-size: 12px; color: rgba(255,255,255,.65); } /* responsive */ @media (max-width: 900px){ .bcom-footer-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (max-width: 520px){ .bcom-footer-grid{ grid-template-columns: 1fr; } .bcom-footer-inner{ padding-top: 34px; } }