/* ============================================================ 嘉迅ソフト / KASYUN SOFT — 共用样式 全站共用。修改这里会影响所有页面。 ============================================================ */ :root{ --blue:#3363AD; --green:#36A257; --ink:#1f2733; --muted:#5b6672; --line:#e5e9f0; --bg:#ffffff; --bg2:#f6f8fc; --bg3:#eef2f8; --grad:linear-gradient(90deg,#3363AD 0%,#307C9D 50%,#36A257 100%); --maxw:1120px; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{ font-family:"Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo","Microsoft YaHei","PingFang SC",sans-serif; color:var(--ink); background:var(--bg); line-height:1.8; font-size:16px; -webkit-font-smoothing:antialiased; } a{color:inherit;text-decoration:none} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px} /* ---- 语言切换：成对书写 .ja / .zh，由 控制 ---- */ [data-lang="ja"] .zh{display:none} [data-lang="zh"] .ja{display:none} /* ---- header ---- */ header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92); backdrop-filter:blur(8px);border-bottom:1px solid var(--line)} .nav{display:flex;align-items:center;gap:24px;height:68px} .brand{display:flex;align-items:center;gap:12px;flex-shrink:0} .brand img{height:34px;width:auto;display:block} .brand .name{font-weight:700;font-size:18px;letter-spacing:.02em;line-height:1.2} .brand .name small{display:block;font-weight:500;font-size:11px;color:var(--muted);letter-spacing:.06em} nav.menu{margin-left:auto;display:flex;gap:22px;align-items:center} nav.menu a{font-size:14px;color:var(--muted);font-weight:500;transition:color .2s;position:relative} nav.menu a:hover{color:var(--blue)} nav.menu a[aria-current="page"]{color:var(--blue);font-weight:700} nav.menu a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:-6px; height:2px;background:var(--grad);border-radius:2px} .langbtn{border:1px solid var(--line);border-radius:999px;padding:5px 12px;font-size:13px; color:var(--muted);cursor:pointer;background:#fff;font-weight:600;transition:.2s} .langbtn:hover{border-color:var(--blue);color:var(--blue)} .burger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:6px} .burger span{width:22px;height:2px;background:var(--ink);border-radius:2px} /* ---- 首页主视觉 ---- */ .hero{background:var(--bg2);border-bottom:1px solid var(--line);overflow:hidden;position:relative} .hero::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--grad)} .hero .wrap{padding:96px 24px 88px} .hero .eyebrow{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.14em; color:var(--blue);margin-bottom:20px} .hero h1{font-size:clamp(28px,4.4vw,46px);line-height:1.35;font-weight:800;letter-spacing:.01em; max-width:20em;margin-bottom:24px} .hero h1 .g{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent} .hero p{font-size:17px;color:var(--muted);max-width:40em;margin-bottom:36px} /* ---- 子页标题条 ---- */ .page-hero{background:var(--bg2);border-bottom:1px solid var(--line);position:relative} .page-hero .wrap{padding:56px 24px 48px} .page-hero .label{font-size:12px;font-weight:700;letter-spacing:.16em;color:var(--green);text-transform:uppercase} .page-hero h1{font-size:clamp(26px,3.4vw,38px);font-weight:800;margin-top:8px;line-height:1.3} .page-hero p{color:var(--muted);margin-top:16px;max-width:44em} /* ---- 面包屑（顶部的品牌渐变条紧贴 header，与首页主视觉保持一致）---- */ .crumb{border-bottom:1px solid var(--line);background:#fff;position:relative} .crumb::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--grad)} .crumb .wrap{padding:18px 24px 14px;font-size:13px;color:var(--muted)} .crumb a{color:var(--muted)} .crumb a:hover{color:var(--blue)} .crumb .sep{margin:0 8px;color:#c3ccd8} .crumb .cur{color:var(--ink);font-weight:600} /* ---- 按钮 ---- */ .btns{display:flex;gap:14px;flex-wrap:wrap} .btn{display:inline-block;padding:13px 26px;border-radius:8px;font-weight:700;font-size:15px;transition:.2s} .btn.primary{background:var(--blue);color:#fff} .btn.primary:hover{background:#28518f;transform:translateY(-1px)} .btn.ghost{border:1px solid var(--line);background:#fff;color:var(--ink)} .btn.ghost:hover{border-color:var(--blue);color:var(--blue)} /* ---- 区块 ---- */ section{padding:80px 0} section.alt{background:var(--bg2)} .shead{margin-bottom:48px;max-width:46em} .shead .label{font-size:12px;font-weight:700;letter-spacing:.16em;color:var(--green);text-transform:uppercase} .shead h2{font-size:clamp(24px,3vw,34px);font-weight:800;margin-top:10px;position:relative;padding-bottom:16px} .shead h2::after{content:"";position:absolute;bottom:0;left:0;width:52px;height:3px;background:var(--grad);border-radius:3px} .shead p{color:var(--muted);margin-top:18px} /* ---- 会社概要表 ---- */ .info{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden} .info th,.info td{text-align:left;padding:16px 22px;border-bottom:1px solid var(--line);vertical-align:top} .info tr:last-child th,.info tr:last-child td{border-bottom:none} .info th{width:34%;background:var(--bg3);font-weight:700;font-size:14px;color:var(--ink)} .info td{color:var(--muted)} .creed{margin-top:28px;padding:26px 30px;background:#fff;border:1px solid var(--line);border-left:4px solid var(--green);border-radius:10px} .creed h3{font-size:16px;margin-bottom:10px;color:var(--blue)} .creed p{color:var(--muted);font-size:15px} /* ---- 卡片栅格 ---- */ .grid{display:grid;gap:22px} .g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:30px;transition:.2s} .card:hover{box-shadow:0 10px 30px rgba(51,99,173,.08);transform:translateY(-2px)} .card .no{font-size:13px;font-weight:800;color:var(--green);letter-spacing:.1em} .card h3{font-size:19px;margin:8px 0 12px;font-weight:700} .card p{color:var(--muted);font-size:15px} .card ul{margin:10px 0 0;padding-left:1.1em;color:var(--muted);font-size:14.5px} .card li{margin-bottom:6px} /* ---- 首页栏目入口卡 ---- */ .entries{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .entry{display:block;background:#fff;border:1px solid var(--line);border-radius:12px;padding:28px 30px;transition:.2s} .entry:hover{box-shadow:0 10px 30px rgba(51,99,173,.08);transform:translateY(-2px);border-color:#cfdbee} .entry .label{font-size:11px;font-weight:700;letter-spacing:.16em;color:var(--green);text-transform:uppercase} .entry h3{font-size:19px;font-weight:700;margin:8px 0 10px} .entry p{color:var(--muted);font-size:14.5px;min-height:3.6em} .entry .more{display:inline-block;margin-top:14px;font-size:14px;font-weight:700;color:var(--blue)} .entry .more::after{content:"→";margin-left:6px;transition:.2s;display:inline-block} .entry:hover .more::after{transform:translateX(4px)} /* ---- 标签与数字 ---- */ .tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px} .tag{background:var(--bg3);border:1px solid var(--line);border-radius:999px;padding:7px 16px;font-size:14px;color:var(--ink);font-weight:600} .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:32px} .stat{text-align:center;background:#fff;border:1px solid var(--line);border-radius:12px;padding:26px 12px} .stat .num{font-size:32px;font-weight:800;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent} .stat .lab{font-size:13px;color:var(--muted);margin-top:6px} .note{margin-top:26px;font-size:14px;color:var(--muted);background:var(--bg3);border-radius:8px;padding:16px 20px} /* ---- 底部行动区 ---- */ .cta{background:var(--bg2);border-top:1px solid var(--line)} .cta .wrap{padding:64px 24px;text-align:center} .cta h2{font-size:clamp(22px,2.6vw,30px);font-weight:800;margin-bottom:14px} .cta p{color:var(--muted);margin-bottom:28px} .cta .btns{justify-content:center} /* ---- 联系页 ---- */ .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px} .cinfo dt{font-weight:700;font-size:13px;color:var(--green);letter-spacing:.08em;margin-top:20px} .cinfo dt:first-child{margin-top:0} .cinfo dd{color:var(--muted);font-size:16px;margin-top:4px} .cinfo dd a{color:var(--blue)} form label{display:block;font-size:13px;font-weight:700;margin:16px 0 6px} form input,form textarea{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:8px;font:inherit;font-size:15px} form input:focus,form textarea:focus{outline:none;border-color:var(--blue)} form textarea{min-height:120px;resize:vertical} form button{margin-top:22px} /* ---- footer ---- */ footer{background:#1f2733;color:#c7d0dc;padding:52px 0 30px} footer .ftop{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;align-items:flex-start} footer .fbrand{font-weight:700;font-size:18px;color:#fff} footer .fbrand small{display:block;font-weight:400;font-size:12px;color:#8b97a7;margin-top:4px} footer nav{display:flex;gap:20px;flex-wrap:wrap} footer nav a{font-size:14px;color:#c7d0dc} footer nav a:hover{color:#fff} footer .copy{margin-top:36px;padding-top:22px;border-top:1px solid #33404f;font-size:13px;color:#8b97a7} /* ---- 响应式 ---- */ @media(max-width:860px){ nav.menu{position:fixed;inset:68px 0 auto 0;flex-direction:column;background:#fff; border-bottom:1px solid var(--line);padding:16px 24px;gap:4px;margin-left:0;display:none} nav.menu.open{display:flex} nav.menu a{padding:10px 0;width:100%} nav.menu a[aria-current="page"]::after{display:none} .langbtn{margin-top:8px} .burger{display:flex;margin-left:auto} .g2,.g3,.contact-grid,.entries{grid-template-columns:1fr} .stats{grid-template-columns:repeat(2,1fr)} .info th{width:40%} .entry p{min-height:0} section{padding:60px 0} .hero .wrap{padding:68px 24px 62px} }